惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The Hacker News
The Hacker News
F
Full Disclosure
Cloudbric
Cloudbric
Blog — PlanetScale
Blog — PlanetScale
W
WeLiveSecurity
N
News and Events Feed by Topic
T
Troy Hunt's Blog
V2EX - 技术
V2EX - 技术
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
B
Blog
GbyAI
GbyAI
C
Check Point Blog
B
Blog RSS Feed
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Recorded Future
Recorded Future
The Last Watchdog
The Last Watchdog
N
News and Events Feed by Topic
T
The Blog of Author Tim Ferriss
O
OpenAI News
V
V2EX
人人都是产品经理
人人都是产品经理
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
IT之家
IT之家
WordPress大学
WordPress大学
www.infosecurity-magazine.com
www.infosecurity-magazine.com
S
Security @ Cisco Blogs
C
Cisco Blogs
Security Latest
Security Latest
S
Security Affairs
V
Visual Studio Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Hacker News - Newest:
Hacker News - Newest: "LLM"
博客园 - 司徒正美
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Microsoft Azure Blog
Microsoft Azure Blog
Last Week in AI
Last Week in AI
AWS News Blog
AWS News Blog
雷峰网
雷峰网
Apple Machine Learning Research
Apple Machine Learning Research
PCI Perspectives
PCI Perspectives
博客园_首页
U
Unit 42
Google DeepMind News
Google DeepMind News
Hugging Face - Blog
Hugging Face - Blog
Project Zero
Project Zero
Cisco Talos Blog
Cisco Talos Blog
The Register - Security
The Register - Security
N
Netflix TechBlog - Medium
L
LINUX DO - 热门话题
H
Hacker News: Front Page

博客园 - dataxiu.com

[原创.数据可视化系列之十三]idw反距离权重插值算法的javascript代码实现 [原创.数据可视化系列之十二]使用 nodejs通过async await建立同步数据抓取 [原创.数据可视化系列之七]阿里竞赛作品技术展示 [原创.数据可视化系列之六]使用openlyaers进行公网地图剪切 [原创.数据可视化系列之五]韩国"萨德"系统防御图 [原创.数据可视化系列之四]跨平台,多格式的等值线和等值面的生成 [原创.数据可视化系列之三]使用Ol3加载大量点数据 [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布 [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据 管理类软件的界面模板。 使用SilverLight开发ARPG游戏(一) 买联想学生机器的遭遇:问联想1(连载) 联想09年春节学生机开卖了。 谈UrlRewriter在XP和2003上IIS设置的差异 使用SilverLight构建插件式应用程序(九) —聊天插件客户端的实现 .NET 访问JAVA的WebService使用SOAP头 使用SilverLight构建插件式应用程序(八) —聊天插件Duplex WCF的实现 使用SilverLight构建插件式应用程序(七) 使用SilverLight构建插件式应用程序(六)
[原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色
dataxiu.com · 2017-02-03 · via 博客园 - dataxiu.com

对灰度图进行彩色化是数据可视化中常见的需求,使用d3在客户端比较容易实现,本文使用d3生成图片,并显示:

代码如下:

代码中首先下载数据文件,然后设定d3的色带信息,生成一个空白的canvas元素,并对元素的,通过d3插值颜色,给每个点设定颜色信息,并显示出来:

 1 d3.request("data/geos/current/" + IdwPro[options.pro].file)
 2             .responseType("arraybuffer")
 3             .response(function (req) {
 4              var values=req;
 5             console.info(values);
 6  
 7             //色带信息。
 8             var color = d3.scaleLinear().domain([193, 206, 219, 233.15, 255.372, 273.15, 275.15, 291, 298, 311, 328])
 9             .range([d3.rgb(37, 4, 42), d3.rgb(41, 10, 130), d3.rgb(81, 40, 40),
10                      d3.rgb(192, 37, 149), d3.rgb(70, 215, 215), d3.rgb(21, 84, 187),
11                      d3.rgb(24, 132, 14), d3.rgb(247, 251, 59), d3.rgb(235, 167, 21),
12                      d3.rgb(230, 71, 39), d3.rgb(88, 27, 67)])
13             .interpolate(d3.interpolateHcl);
14             //图片高度
15             var width = 720,
16                 height = 360;
17  
18             var _blankcanvas = document.createElement("canvas");
19             _blankcanvas.width = width;
20             _blankcanvas.height = height;
21             var blankcanvas = _blankcanvas.getContext("2d").getImageData(0, 0, width, height);
22             var _idwcontext = document.createElement("canvas");
23             _idwcontext.width = width;
24             _idwcontext.height = height;
25  
26             var idwcontext = _idwcontext.getContext("2d");
27  
28  
29             var c, i = 0,
30                 n = width * height * 4,
31                 blankimg = blankcanvas.data;
32  
33             var d = new Uint8ClampedArray(n);
34             //console.info(image.data);
35             for (var i = 0; i < height; i++) {
36                 var istar = width * i;
37                 var istart = (height - i) * width;
38                 for (var j = 0; j < width; j++) {
39  
40                     c = d3.rgb(color(values.blocks[0][(istar + j)]));
41                     blankimg[(istart + j) * 4 + 0] = c.r;
42                     blankimg[(istart + j) * 4 + 1] = c.g;
43                     blankimg[(istart + j) * 4 + 2] = c.b;
44                     blankimg[(istart + j) * 4 + 3] = 255;
45                 }
46             }
47  
48             idwcontext.putImageData(blankcanvas, 0, 0);
49             //
50              
51           
52         }).get();