[D3] Build a Scatter Plot with D3 v4
Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They’re extremely versatile thanks to their ability to display multiple dimensions of data simultaneously using x and y position, opacity, color, and even shape. This lesson introduces the SVG circle
element as part of building a robust scatter plot.
var margin = {
top: 10,
right: 20,
bottom: 65,
left: 40
};
var width = 400 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom; var svg = d3.select('.chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.call(responsivefy)
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); /**
* Load data
*/
d3.json('../data/data2.json', function (err, data) {
/**
* Add Y axis
*/
var yScale = d3.scaleLinear()
.domain(d3.extent(data, (d) => d.expectancy))
.range([height, 0])
.nice();
var yAxis = d3.axisLeft(yScale);
svg.call(yAxis); /**
* Add X axis
*/
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.cost))
.range([0, width])
.nice(); var xAxis = d3.axisBottom(xScale);
svg
.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis); // For circle, we need scaleSqrt
var rScale = d3.scaleSqrt()
.domain([0, d3.max(data, d => d.population)])
.range([0, 40]); // Create some container to contain the circles
var circles = svg.selectAll('.ball')
.data(data)
.enter()
.append('g')
.attr('class', 'ball')
.attr('transform', d => {
return `translate(${xScale(d.cost)}, ${yScale(d.expectancy)})`
}); // Add circle to each containers
circles
.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', d => rScale(d.population))
.style('opacity', 0.5)
.style('fill', 'steelblue'); // Add text
circles
.append('text')
.style('text-anchor', 'middle')
.style('fill', 'black')
.attr('y', 4)
.text(d => d.code)
}); function responsivefy(svg) {
// get container + svg aspect ratio
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style("width")),
height = parseInt(svg.style("height")),
aspect = width / height; // add viewBox and preserveAspectRatio properties,
// and call resize so that svg resizes on inital page load
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("preserveAspectRatio", "xMinYMid")
.call(resize); // to register multiple listeners for same event type,
// you need to add namespace, i.e., 'click.foo'
// necessary if you call invoke this function for multiple svgs
// api docs: https://github.com/mbostock/d3/wiki/Selections#on
d3.select(window).on("resize." + container.attr("id"), resize); // get width of container and resize svg to fit it
function resize() {
var targetWidth = parseInt(container.style("width"));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
}
[D3] Build a Scatter Plot with D3 v4的更多相关文章
- [D3] Build a Line Chart with D3 v4
Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll ...
- [D3] Build an Area Chart with D3 v4
Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...
- [D3] Build a Column Chart with D3 v4
Column and bar charts are staples of every visualization library. They also make a great project for ...
- [D3] 9. Scatter Plot
Up until now we've just looked at bar charts. A handy chart, no doubt, but D3 offers a variety of ch ...
- [D3] Animate Chart Axis Transitions in D3 v4
When the data being rendered by a chart changes, sometimes it necessitates a change to the scales an ...
- [D3] Load and Inspect Data with D3 v4
You probably use a framework or standalone library to load data into your apps, but what if that’s o ...
- d3.svg.line()错误:TypeError: d3.svg.line is not a function
var line_generator= d3.svg.line() .x(function (d,i) { return i; }) .y(function (d) { return d; }) 错误 ...
- d3可视化实战02:理解d3数据驱动的真正含义
前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...
- Matplotlib学习---用matplotlib画散点图,气泡图(scatter plot, bubble chart)
Matplotlib里有两种画散点图的方法,一种是用ax.plot画,一种是用ax.scatter画. 一. 用ax.plot画 ax.plot(x,y,marker="o",co ...
随机推荐
- C#中结构struct的使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- ElasticSearch 架构图
ElasticSearch 架构图 从下往上来分析ElasticSearch 架构图 Gateway代表ElasticSearch索引的持久化存储方式. 在Gateway中,ElasticSearch ...
- C/C++(语句,数组)
C语言语句: 两大选择,三大循环,四大跳转 两大跳转:if,switch 三大循环:for,while,do-while 四大跳转:break,continue,goto,return do-whil ...
- 玩转阿里云server——安装WebserverTomcat7
1. 以root用户身份登录阿里云server 2. 使用apt-get install安装Tomcat7 sudo apt-get install tomcat7 3.安装后.Tomcat在启动时报 ...
- UVALive-6485-Electric Car Rally(BFS)
题目:点击打开链接 思路:对于当前位置的每个时间段都要走一遍(除了那些须要的时间比最大同意的时间还大的),用 整形 vis[当前位置][剩余油量] 标记. #include <cstdio> ...
- smarty模板引擎(一)基础知识
一.基本概念 1.什么是mvc? mvc是一种开发模式,核心思想是:数据的输入.数据的处理.数据显示的强制分离. 2.什么是smarty? smarty是一个php的模板引擎.更明白的 ...
- cocos2d-x 一些3效果的类及创建參数
CCShaky3D::create(时间,晃动网格大小,晃动范围,Z轴是否晃动); //创建一个3D晃动的效果 CCShakyTiles3D::create(时间,晃动网格大小,晃动范围,Z轴是否晃动 ...
- git 工具的使用总结(6)-提交合并处理
1.撤消修改 1)revert:反转提交,它就是把你的一个提交先撤消掉,但是,它跟reset不同的是,你的这次这小会留下记录,这样在你下次需要的时候,可以通过这个节点把撤消的提交恢复 zhangshu ...
- ajax嵌套ajax 可能出现问题 的解决办法
ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会数据会读不出来 第一种 描述:如果条件许可,把两次请求都放在服务端处理掉一起发回来,这些就在客户端只有一次ajax了 优点:代码放在 ...
- BZOJ1492: [NOI2007]货币兑换Cash(CDQ分治,斜率优化动态规划)
Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...