数据可视化【五】 Scatter Plot

Scatter Plot

vizhub上实现的代码：

https://vizhub.com/Edward-Elric233/53807a1b35d94329b3689081cd2ea945

https://vizhub.com/Edward-Elric233/b9647d50899a4a0e8e917f913cd0a53a

https://vizhub.com/Edward-Elric233/8c6b50cd81a04f048f490f48e4fe6264

由前面的柱状图，我们对图形进行一定的修改就可以得到散点图：

在这里插入图片描述只要将绑定数据以后enter进行添加矩形的操作换成圆形就可以了，不过需要注意的是不能够y坐标再使用scaleBand了，而应该使用scalePoint，如果继续使用scaleBand的话需要调整圆的坐标（y坐标是Categorical的）。注意圆形的属性是cx,cy,r分别表示圆心的坐标和半径。

index.html

<!DOCTYPE html>
<html><head><title>Scatter Plot</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">// console.log(d3); test whether you have imported d3.js or not</script></body></html>

index.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');const render = data => {const xValue = d => d.population;const yValue = d => d.country;const margin = { top: 60, right: 20, bottom: 80, left: 150 };const innerWidth = width - margin.left - margin.right;const innerHeight = height - margin.top - margin.bottom;const xScale = d3.scaleLinear().domain([0, d3.max(data, xValue)]).range([0, innerWidth]).nice(); //作用是如果值域的最大值不够整齐可以变得整齐// const yScale = scaleBand()const yScale = d3.scalePoint().domain(data.map(yValue)).range([0, innerHeight]).padding(0.5);const xAxisTickFormat = number => d3.format('.3s')(number).replace('G', 'B');const yAxis = d3.axisLeft(yScale).tickSize(-innerWidth);;const xAxis = d3.axisBottom(xScale).tickFormat(xAxisTickFormat).tickSize(-innerHeight); //设置tick-line的长度const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);//yAxis(g.append('g'));const yAxisG = g.append('g').call(yAxis).selectAll('.domain').remove();const xAxisG = g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);xAxisG.selectAll('.domain').remove();xAxisG.append('text').attr('class', 'axis-label').attr('y', 60).attr('x', innerWidth / 2).attr('fill', 'black').text('populiation');let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx) => {var i = idx || -1;return {get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }};};const getColor = createGetColor();g.selectAll('circle').data(data).enter().append('circle').attr('cy', d => yScale(yValue(d))).attr('cx', d => xScale(xValue(d))).attr('r', 15).attr('fill', getColor.get);g.append('text').attr('class', 'title').attr('y', -20).text('Top 10 Most Population Countries');
};d3.csv("https://gist.githubusercontent.com/Edward-Elric233/23f3024c472ffd7e34e6a5ac04bad26c/raw/6ced2249ea6f5d12f72c1eb00b8c1278d2c86e95/every%2520countries'%2520population").then(data => {data.forEach(d => {d.population = +d.population * 1000;});render(data);// console.log(data);
});

styles.css

body {margin: 0px;overflow: hidden;font-family: manosapce;
}text {font-family: sans-serif;
}.tick text {font-size: 2em;fill: #8E8883
}.axis-label {fill: #8E8883;font-size: 2.5em
}.title {font-size: 3em;fill: #8E8883
}

虽然大概实现了散点图，但是上面的数据不适合用散点图来进行表示。因此我们不妨更换数据，使用更适合的数据。

在这里插入图片描述这里因为y坐标也是Quantitative的，所以应该使用scaleLinear。画的时候注意坐标的方向，如果方向不对应的画可以调整scaleLinear的domain或者range（反向即可）。这里因为圆形比较密集就设置了一下圆形的透明度opacity，看起来比较好看。

index.html

<!DOCTYPE html>
<html><head><title>Cars Scatter Plot</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">// console.log(d3); test whether you have imported d3.js or not</script>
</body></html>

index.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');//mpg	cylinders	displacement	horsepower	weight	acceleration	year	origin	nameconst render = data => {const title = 'Cars: Mpg vs. Horsepower';const xValue = d => d.mpg;const xAxisLabel = 'Mpg';const yValue = d => d.horsepower;const yAxisLabel = 'Horsepower';const margin = { top: 60, right: 20, bottom: 80, left: 100 };const innerWidth = width - margin.left - margin.right;const innerHeight = height - margin.top - margin.bottom;const circleRadius = 10;const xScale = d3.scaleLinear()//.domain([min(data, xValue), max(data, xValue)])	//和下面的写法等价.domain(d3.extent(data, xValue)).range([0, innerWidth]).nice(); //作用是如果值域的最大值不够整齐可以变得整齐// const yScale = scaleBand()const yScale = d3.scaleLinear().domain([d3.max(data, yValue), d3.min(data, yValue)]).range([0, innerHeight]).nice();//const xAxisTickFormat = number => format('.3s')(number).replace('G','B');const yAxis = d3.axisLeft(yScale).tickSize(-innerWidth).tickPadding(15);const xAxis = d3.axisBottom(xScale)//.tickFormat(xAxisTickFormat).tickSize(-innerHeight) //设置tick-line的长度.tickPadding(15); //通过设置Padding让x轴的数字离远一点const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);//yAxis(g.append('g'));const yAxisG = g.append('g').call(yAxis);yAxisG.selectAll('.domain').remove();yAxisG.append('text').attr('class', 'axis-label').attr('y', -70).attr('x', -innerHeight / 2).attr('fill', 'black').attr('transform', `rotate(-90)`).attr('text-anchor', 'middle') //设置锚点在中心.text(yAxisLabel);const xAxisG = g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);xAxisG.selectAll('.domain').remove();xAxisG.append('text').attr('class', 'axis-label').attr('y', 60).attr('x', innerWidth / 2).attr('fill', 'black').text(xAxisLabel);let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx) => {var i = idx || -1;return {get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }};};const getColor = createGetColor();g.selectAll('circle').data(data).enter().append('circle').attr('cy', d => yScale(yValue(d))).attr('cx', d => xScale(xValue(d))).attr('r', circleRadius).attr('fill', getColor.get);g.append('text').attr('class', 'title').attr('y', -20).attr('x', innerWidth / 2).attr('text-anchor', 'middle').text(title);
};d3.csv('https://vizhub.com/curran/datasets/auto-mpg.csv').then(data => {data.forEach(d => {//得到的数据默认每个属性的值都是字符串，因此需要进行转换d.mpg = +d.mpg;d.cylinders = +d.cylinders;d.displacement = +d.displacement;d.horsepower = +d.horsepower;d.weight = +d.weight;d.acceleration = +d.acceleration;d.year = +d.year;});render(data);// console.log(data);
});

styles.css

body {margin: 0px;overflow:hidden;font-family: manosapce;}circle {opacity : 0.5;}text {font-family : sans-serif;}.tick text {font-size : 2em;fill : #8E8883}.tick line {stroke : #E5E2E0}.axis-label {fill : #8E8883;font-size: 2.5em}.title {font-size : 3em;fill : #8E8883}

对于时间轴的处理可以使用scaleTime
在这里插入图片描述
index.html

<!DOCTYPE html>
<html><head><title>Temperature in San Francisc Scatter Plot</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">// console.log(d3); test whether you have imported d3.js or not</script></body></html>

html.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');const render = data => {const title = 'A week in San Francisco';const xValue = d => d.timestamp;const xAxisLabel = 'Time';const yValue = d => d.temperature;const yAxisLabel = 'Temperature';const margin = { top: 60, right: 20, bottom: 80, left: 100 };const innerWidth = width - margin.left - margin.right;const innerHeight = height - margin.top - margin.bottom;const circleRadius = 6;const xScale = d3.scaleTime()//.domain([min(data, xValue), max(data, xValue)])	//和下面的写法等价.domain(d3.extent(data, xValue)).range([0, innerWidth]).nice(); //作用是如果值域的最大值不够整齐可以变得整齐// const yScale = scaleBand()const yScale = d3.scaleLinear().domain([d3.max(data, yValue), d3.min(data, yValue)]).range([0, innerHeight]).nice();//const xAxisTickFormat = number => format('.3s')(number).replace('G','B');const yAxis = d3.axisLeft(yScale).tickSize(-innerWidth).tickPadding(15);const xAxis = d3.axisBottom(xScale)//.tickFormat(xAxisTickFormat).tickSize(-innerHeight) //设置tick-line的长度.tickPadding(15); //通过设置Padding让x轴的数字离远一点const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);//yAxis(g.append('g'));const yAxisG = g.append('g').call(yAxis);yAxisG.selectAll('.domain').remove();yAxisG.append('text').attr('class', 'axis-label').attr('y', -70).attr('x', -innerHeight / 2).attr('fill', 'black').attr('transform', `rotate(-90)`).attr('text-anchor', 'middle') //设置锚点在中心.text(yAxisLabel);const xAxisG = g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);xAxisG.selectAll('.domain').remove();xAxisG.append('text').attr('class', 'axis-label').attr('y', 60).attr('x', innerWidth / 2).attr('fill', 'black').text(xAxisLabel);let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx) => {var i = idx || -1;return {get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }};};const getColor = createGetColor();g.selectAll('circle').data(data).enter().append('circle').attr('cy', d => yScale(yValue(d))).attr('cx', d => xScale(xValue(d))).attr('r', circleRadius).attr('fill', 'red');g.append('text').attr('class', 'title').attr('y', -20).attr('x', innerWidth / 2).attr('text-anchor', 'middle').text(title);
};d3.csv('https://vizhub.com/curran/datasets/temperature-in-san-francisco.csv').then(data => {// console.log(data);data.forEach(d => {//得到的数据默认每个属性的值都是字符串，因此需要进行转换d.temperature = +d.temperature;d.timestamp = new Date(d.timestamp);});render(data);
});

styles.css

body {margin: 0px;overflow: hidden;font-family: manosapce;
}circle {opacity: 0.5;
}text {font-family: sans-serif;
}.tick text {font-size: 2em;fill: #8E8883
}.tick line {stroke: #E5E2E0
}.axis-label {fill: #8E8883;font-size: 2.5em
}.title {font-size: 3em;fill: #8E8883
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/383613.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据可视化【六】Line Chart Area Chart

数据可视化【六】Line Chart Area Chart

Line Chart vizhub代码&#xff1a; https://vizhub.com/Edward-Elric233/094396fc7a164c828a4a8c2e13045308 实现效果&#xff1a; 这里先使用d3.line()设置每个点的x坐标和y坐标&#xff0c;然后再用这个东西设置path的d属性&#xff0c;就可以得到曲线。 const lineGen…
阅读更多...
数据可视化【七】 更新模式

数据可视化【七】 更新模式

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} ); //这种写法好像能够直接得到一个…
阅读更多...
数据可视化【八】根据数据类型选择可视化方式

数据可视化【八】根据数据类型选择可视化方式

Marks:Rows PointsLinesAreas Channels:Columns PositionColorShape
阅读更多...
数据可视化【九】单向数据流交互

数据可视化【九】单向数据流交互

我们使用一下上上篇博客的代码。 例如我们想要当鼠标点击水果的时候会出现黑色的框&#xff0c;再点击一下黑色的框就会消失。 首先&#xff0c;我们应该给组件添加点击事件&#xff1a; fruitBowl.js gruopAll.on(click, d > onClick(d.id));这个on函数第一个参数是事件…
阅读更多...
数据库原理及应用【四】数据库管理系统

数据库原理及应用【四】数据库管理系统

查询优化 数据库管理系统中非常重要的一部分。 代数优化 按照一定的规则将语句变化成关系代数以后进行优化 操作优化 对代数优化后的查询树使用比较好的方法进行查询。 主要是对连接运算进行优化 嵌套循环归并扫描索引优化哈希连接 恢复机制 备份&#xff08;完整备份差…
阅读更多...
递归式复杂度求解

递归式复杂度求解

代换法 猜测复杂度验证是否满足递归式&#xff08;使用归纳法&#xff09;找到常数应该满足的条件针对基本情况&#xff0c;常数足够大时总是成立的 需要注意的是&#xff0c;我们猜测的复杂度有可能不满足递归式&#xff0c;这个时候就要通过减去一些低阶项来使得归纳成立。…
阅读更多...
P、NP、NP完全问题、NP难问题

P、NP、NP完全问题、NP难问题

可以在多项式时间内求解的问题称为易解的&#xff0c;而不能在多项式时间内求解的问题称为难解的。 P类问题&#xff1a;多项式类型&#xff0c;是一类能够用&#xff08;确定性的&#xff09;算法在多项式的时间内求解的判定问题。 只有判定问题才属于P 不可判定问题&#…
阅读更多...
数据可视化【十】绘制地图

数据可视化【十】绘制地图

Loading and parsing TOPOJSON 导入Topojson d3文件 地址&#xff1a;https://unpkg.com/topojson3.0.2/dist/topojson.min.js 想要找d3文件的话去unpkg.com好像大部分都能找到的样子 Rendering geographic features 寻找合适的地图数据&#xff1a;谷歌搜索world-atlas npm…
阅读更多...
数据可视化【十一】树状图

数据可视化【十一】树状图

Constructing a node-link tree visualization 首先将节点之间的连线画出来。 使用json函数读取文件以后&#xff0c;使用hierarchy等函数得到连线的数组&#xff0c;然后绑定这个数组&#xff0c;给每个元素添加一个path&#xff0c;绘画使用的是一个函数linkHorizontal&…
阅读更多...
数据可视化【十二】 颜色图例和尺寸图例

数据可视化【十二】 颜色图例和尺寸图例

有了前面的知识&#xff0c;制作一个图例应该不是很难&#xff0c;关键是我们想要制作一个可以在其他地方进行使用的图例&#xff0c;这样就需要能够动态地设置图例的大小&#xff0c;位置&#xff0c;等等。 这里直接上代码&#xff1a; colorLegend.js export const color…
阅读更多...
数据可视化【十三】地区分布图

数据可视化【十三】地区分布图

在前面的博客中已经介绍了如何绘制地图&#xff0c;这一节学习如何绘制地区分布图。如果对绘制地图还不熟悉的话可以了解一下之前我写的博客&#xff1a;数据可视化【十】绘制地图 Intergrating(整合) TopoJSON with tabular data(列表数据) 在前面的博客中没有使用到tsv文件…
阅读更多...
数据可视化【十四】交互式过滤地区分布图

数据可视化【十四】交互式过滤地区分布图

在前面的博客中已经介绍了如何绘制地区分布图&#xff0c;这一节学习如何绘制交互式过滤地区分布图。如果对绘制地区分布图还不熟悉的话可以了解一下之前我写的博客&#xff1a;数据可视化【十三】地区分布图 整体的框架仍然是在之前的基础上进行修改&#xff0c;主要是添加交…
阅读更多...
Ubuntu环境搭建

Ubuntu环境搭建

本文记录了一些常用的Ubuntu软件 然后首先修改软件源&#xff1a;软件和更新->Ubuntu软件->下载自&#xff1a;其他站点&#xff08;修改为阿里云&#xff09; 在关闭的时候需要更新什么的 然后修改更新方式&#xff0c;将不支持的更新去掉 常用的Windows软件 网易云…
阅读更多...
Ubuntu修改/删除主目录下的中文文件夹

Ubuntu修改/删除主目录下的中文文件夹

在Ubuntu的主目录下一般是有一些中文的目录&#xff0c;例如桌面&#xff0c;视频等等&#xff0c;还无法修改名称&#xff0c;在一群英文文件夹里面显得有些突兀&#xff08;Ubuntu终端下的中文一点也不好看&#xff09;&#xff0c;就想把这些文件夹修改一下&#xff0c;结果…
阅读更多...
每日一题：leetcode1489. 找到最小生成树里的关键边和伪关键边

每日一题：leetcode1489. 找到最小生成树里的关键边和伪关键边

时隔多年我终于又开始写博客了&#xff0c;主要是已经放假了&#xff0c;之前一直忙于考试和课设没有时间写博客&#xff0c;学习笔记也因为买了iPad的缘故大部分都是手写的了。 假期想要把以前做过的项目都整理一下放在github和CSDN上。 也已经很久没有写算法题了&#xff0…
阅读更多...
每日一题：leetcode989.数组形式的整数加法

每日一题：leetcode989.数组形式的整数加法

题目描述 题目分析 题目非常简单&#xff0c;但是我还是wa了几发&#xff0c;对不起&#xff0c;我太菜了。我的想法是把K转换为数组然后用大整数加法处理。但是因为太久没有写了导致写了好久。 class Solution { public:void add(vector<int> &A, vector<int&g…
阅读更多...
每日一题：leetcode674.最长连续递增序列

每日一题：leetcode674.最长连续递增序列

题目描述 题目分析 一遍遍历&#xff0c;如果硬要说用了什么算法的话觉得应该算是一个简单的滑动窗口吧 AC代码 class Solution { public:int findLengthOfLCIS(vector<int>& nums) {if (nums.size() 0) {return 0;}int ret 1;int cnt 1;for (int i 1; i <…
阅读更多...
每日一题：leetcode959.由斜杠划分区域

每日一题：leetcode959.由斜杠划分区域

题目描述 题目分析 仔细分析这道题以后虽然觉得可能要转化为图之类的&#xff0c;但是完全没有具体的想法&#xff0c;因为每个格子都有三种情况&#xff0c;这三种情况的不同的组合又会产生不同的结果。 发现找不到编码转化为图以后&#xff0c;我分析了一下不同数量方块之间…
阅读更多...
每日一题：leetcode1319.联通网络的操作次数

每日一题：leetcode1319.联通网络的操作次数

题目描述 题目分析 ps&#xff1a;这篇博客是补前天的&#xff0c;前天在老家不方便写博客 题目挺简单的&#xff0c;但是通过题目对图的连通性有了一个更深刻的认识&#xff1a;如果有超过&#xff08;或等于&#xff09;n-1条边&#xff0c;则一定是可以让整个图联通的。 如…
阅读更多...
每日一题：leetcode1128.等价多米诺骨牌对数

每日一题：leetcode1128.等价多米诺骨牌对数

题目描述 题目分析 看到题目以后第一个想法是遍历数组&#xff0c;对每个元素有一个数据结构中保存了该元素出现的次数&#xff0c;然后往结果中相加&#xff08;表示该元素和前面的对数&#xff09;&#xff0c;然后再将元素出现的次数加一。 思考用什么数据结构保存元素出现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023