![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
数据可视化
王江奎
这个作者很懒,什么都没留下…
展开
-
D3力导引图
学习力导引图的时候在网上没有找到什么好的教程,支离破碎地进行了一段时间的学习,还阅读了d3的关于d3的官方文档,但是始终觉得不的要领。这里记录一下我学习力导引图的一些心得以及推荐一下学习资源。学习资源官方文档:https://github.com/d3/d3-force推荐:https://tomroth.com.au/d3/#force-graphs学习心得其他的知识在推荐网页都可以学习到,但是有一点那个网站没有提到,官方网站也没有提到的:在用forceSimulation绑定节点以后,如果节原创 2020-10-28 19:23:32 · 2272 阅读 · 1 评论 -
数据可视化【十五】
经验法则:在颜色不相邻的时候加上背景颜色颜色的个数为6~12比较好。颜色其实很大程度上由背景决定而不是他本身决定。D3 Scale-Chromatic 有许多颜色刻度,可以根据自己的需要进行选择。参考论文:Practical Rules for Using Color in Charts(Stephen Few,perceptual Edge)规则1:如果想要同一种颜色看起来一样,应该保证背景是一致的规则2:如果想要一种颜色可以被轻易的看到,应该使用一种和物品颜色有充分差异的背景颜色规则3:原创 2020-10-14 14:32:34 · 157 阅读 · 0 评论 -
数据可视化【十四】交互式过滤地区分布图
在前面的博客中已经介绍了如何绘制地区分布图,这一节学习如何绘制交互式过滤地区分布图。如果对绘制地区分布图还不熟悉的话可以了解一下之前我写的博客:数据可视化【十三】地区分布图整体的框架仍然是在之前的基础上进行修改,主要是添加交互事件。首先要做的是给图例添加点击事件,让我们可以通过点击改变地图的状态。colorLegend.js const groupEnter = groups.enter().append('g') .attr('class', 'tick') .attr('transf原创 2020-09-26 22:53:48 · 270 阅读 · 0 评论 -
数据可视化【十三】地区分布图
Intergrating(整合) TopsJSON with tabular data(列表数据)Creating a loadAndProcessData moduleVisualizing an ordered attribute with colorShowing data from 2 attributes in tooltipAdding a color legend原创 2020-09-20 08:50:09 · 1429 阅读 · 0 评论 -
数据可视化【十二】 颜色图例和尺寸图例
有了前面的知识,制作一个图例应该不是很难,关键是我们想要制作一个可以在其他地方进行使用的图例,这样就需要能够动态地设置图例的大小,位置,等等。这里直接上代码:colorLegend.jsexport const colorLegend = (selection, props) => { const {colorScale, height, circleRadius, spacing, textOffset} = props; const groups = se原创 2020-09-20 08:45:31 · 893 阅读 · 0 评论 -
数据可视化【十一】树状图
Highlighting on Hover using CSSAdding simple tooltips(using )Loading multiple data filesLooking up country name from idPanning & Zooming原创 2020-09-11 21:32:23 · 2227 阅读 · 0 评论 -
数据可视化【十】绘制地图
Loading and parsing TOPOJSON导入Topojson d3文件地址:https://unpkg.com/topojson@3.0.2/dist/topojson.min.js想要找d3文件的话去unpkg.com好像大部分都能找到的样子Rendering geographic features寻找合适的地图数据:谷歌搜索world-atlas npm,第一个网站点进去,然后选择合适的d3文件。这个文件里面的地图是Topojson格式的,想要转化为geojson需要使用to原创 2020-09-10 21:56:01 · 853 阅读 · 0 评论 -
数据可视化【九】单向数据流交互
我们使用一下上上篇博客的代码。例如我们想要当鼠标点击水果的时候会出现黑色的框,再点击一下黑色的框就会消失。首先,我们应该给组件添加点击事件:fruitBowl.jsgruopAll.on('click', d => onClick(d.id));这个on函数第一个参数是事件的类型,例如这里就是点击事件click,后一个就是点击这个组件的时候所调用的函数。fruitBowl.jsconst onClick = id => { gruopAll.select('circle'.原创 2020-08-22 22:13:22 · 185 阅读 · 0 评论 -
数据可视化【八】根据数据类型选择可视化方式
Marks:RowsPointsLinesAreasChannels:ColumnsPositionColorShape原创 2020-08-22 20:47:29 · 306 阅读 · 0 评论 -
数据可视化【七】 更新模式
Enter以下面这个简单的代码进行分析const svg = d3.select('svg');// svg.style('background-color', 'red'); testconst height = +svg.attr('height');//+ equals paresFloat()const width = +svg.attr('width');const makeFruit = type =>( {type} ); //这种写法好像能够直接得到一个属性名为't.原创 2020-08-22 20:01:04 · 376 阅读 · 0 评论 -
数据可视化【六】Line Chart && Area Chart
Line Chartvizhub代码:https://vizhub.com/Edward-Elric233/094396fc7a164c828a4a8c2e13045308实现效果:这里先使用d3.line()设置每个点的x坐标和y坐标,然后再用这个东西设置path的'd'属性,就可以得到曲线。const lineGenerator = d3.line() .x(d => xScale(xValue(d))) .y(d => yScale(yValue(d))) .原创 2020-08-18 22:01:34 · 737 阅读 · 0 评论 -
数据可视化【五】 Scatter Plot
Scatter Plotvizhub上实现的代码:https://vizhub.com/Edward-Elric233/53807a1b35d94329b3689081cd2ea945?edit=fileshttps://vizhub.com/Edward-Elric233/b9647d50899a4a0e8e917f913cd0a53a由前面的柱状图,我们对图形进行一定的修改就可以得到散点图:index.html<!DOCTYPE html><html><h原创 2020-08-18 19:58:26 · 930 阅读 · 0 评论 -
数据可视化【四】Bar Chart
Representing a data table in JavaScriptCreating rectangles for each rowUsing linear and band scalesThe margin conventionAdding axes以下学习内容参考博客:传送门select()选择所有指定元素的第一个selectAll()选择指定元素的全部上面两个函数返回的结果为选择集关于 select 和 selectAll 的参数,其实是符合 CSS 选择器的条件的,即.原创 2020-08-16 21:39:53 · 1316 阅读 · 0 评论 -
数据可视化【三】基本概念
Visualization is suitable when there is a need to augment human capabilities rather than replace people with computational decision-making methods.当可以信赖的智能化的解决方案存在的时候,可视化是不必要的。当不知道需要分析的问题是什么的时候,可视化可以帮助人们发现问题。探索分析科学数据展示已有结果在开发模型之前更好地理解需求帮助开发者为智能方案调.原创 2020-08-15 21:44:44 · 320 阅读 · 0 评论 -
数据可视化【二】HTML+CSS+SVG+D3
HTML、CSS和SVG学习实现代码:https://vizhub.com/Edward-Elric233/89185eb96bc64a9d81777873a0ccd0b9index.html<!DOCTYPE html><html><head> <title>Shapes with SVG and CSS</title> <link rel="stylesheet" href="./style.css">&原创 2020-08-15 21:43:32 · 436 阅读 · 0 评论 -
数据可视化【一】JavaScript学习
本博客是我学习Curran Kelleher老师数据可视化课程的笔记,感兴趣的小伙伴可以点击这里学习。three cores of data visualization:analysisdesignconstruction推荐书籍《visualization analysis & design》JS学习尽量使用const可以通过()=>{}的方式声明函数,不需要关键字function数组可以通过数组的forEach方法遍历数组array.forEach(item =原创 2020-08-11 13:36:44 · 376 阅读 · 0 评论