数据可视化【五】 Scatter Plot

最新推荐文章于 2023-07-06 03:00:00 发布
最新推荐文章于 2023-07-06 03:00:00 发布
阅读量939 收藏 1
点赞数
分类专栏： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_T233333333/article/details/108085366
版权

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	name


const 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
}
王江奎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SoviChart数据可视化：散点图（Scatter plot）
码为人生的博客
12-02 1218
散点图也称 X-Y 图，是一种显示不同变量之间关系的数据可视化，将所有的数据以点的形式在 x 轴和 y 轴来显示此数据，以显示变量之间的相互影响程度。
数据可视化|实验八 实现scatterplot关系图
qq_43941925的博客
04-05 1050
使用 tips 数据集绘制一个简单的散点图 import seaborn as sns import matplotlib.pyplot as plt tips=sns.load_dataset('tips') plt.rcParams['font.sans-serif'] = 'SimHei' plt.rcParams['axes.unicode_minus'] = False ax = sns.scatterplot(x='total_bill',y='tip',data=tips) ax.set_ti
使用scatter函数绘制散点图时，所有参数的含义及设置
weixin_43708528的博客
08-23 5852
使用scatter函数绘制散点图时，所有参数的含义及设置 pytorch的scatter函数中所有的参数 在做深度学习的实验的时候，需要画散点图，在此将散点图常用参数的含义及设置分享给大家 参数 x,y的设置 x,y对应了平面点的位置,也就是我们即将绘制散点图的数据点 参数s的设置 s代表控制点大小，默认是20. 当把s设置为2的时候，效果如下图。 参数 c的设置 c对应颜色指示值,默认蓝色’b’,可以通过设置来改变散点图的颜色，需要注意的是颜色值需要加单引号。 使用RGB或是RGB二维数组都是可以的。
数据可视化图表-散点图（Scatter plot）
Cassiel60的博客
03-12 1万+
本文是接着这篇内容的：https://blog.csdn.net/Cassiel60/article/details/88350442 散点图是用于研究两个变量之间关系的经典的和基本的图表。 如果数据中有多个组，则可能需要以不同颜色可视化每个组。 在 matplotlib 中，您可以使用plt.scatterplot（）方便地执行此操作 #Import dataset midwest =...
散布图 scatter plot
qq1987924的专栏
03-09 1万+
转自：http://www.gztaiyou.com/html/201292710143.html 什么是散布图？       散布图是用非数学的方式来辨认某现象的测量值与可能原因因素之间的关系. 这种图示方式具有快捷，易于交流, 和易于理解的特点。用来绘制散布图的数据必须是成对的(X,Y)。通常用垂直轴表示现象测量值Y ，用水平轴表示可能有关系的原因因素X。       散布图
Scatter Plot
qq_42052864的博客
08-15 2517
import numpy as np import matplotlib.pyplot as plt plt.style.use('ggplot') x=np.arange(1,15,1) #创建数据 线性，二次多项式 y_liner=x+5*np.random.randn(14) y_quadratic=x**2+10*np.random.randn(14) #polyfit 拟合数据，...
散点图（Scatter Plot）
qq_51691366的博客
05-23 1499
散点图是数据集中的每个值都由点表示的图Matplotlib 模块有一种绘制散点图的方法，它需要两个长度相同的数组，一个数组用于 x 轴的值，另一个数组用于 y 轴的值：x 数组代表每辆汽车的年龄y 数组表示每个汽车的速度需要注意的是，x数组中的每一个位置的值与y数组中的每一个位置值一一对应，也即5对应 99，其余以此类推下面是上面的代码运行结果，可以看到使用年限越长的车，速度越慢。
[seaborn] seaborn学习笔记2-散点图Scatterplot
热门推荐
You and Me
05-30 3万+
散点图Scatterplot 散点图能够显示2个维度上2组数据的值。每个点代表一个观察点。X（水平）和Y（垂直）轴上的位置表示变量的值。研究这两个变量之间的关系是非常有用的。在seaborn中通过regplot和lmplot制作散点图，regplot和lmplot核心功能相近，regplot相对简单点，如果要定制图像更深层次功能，需要使用lmplot。该章节主要内容有： 基础散点图绘制 Basi...
数据可视化（虚假数据）
01-18
数据可视化是一种将复杂的数据集转化为易于理解的图形或图像的过程，它通过视觉表示来揭示数据中的模式、趋势和关联，使非专业人士也能迅速洞察信息。在这个“数据可视化（虚假数据）”项目中，我们将探讨如何利用...
matlab_.zip_数据可视化
09-23
MATLAB中的数据可视化主要依赖于其内置的绘图函数，如`plot`、`scatter`、`bar`、`histogram`等。`plot`函数用于绘制线图，适用于显示两个变量之间的关系；`scatter`用于绘制散点图，适合观察数据点之间的分布；`bar...
数据可视化-Matplotlib绘制拟合散点图
最新发布
04-22
数据可视化是将复杂的数据集通过图形化的方式呈现出来，以便于人们更容易地理解和分析数据。在众多的数据可视化库中，Python的Matplotlib是基础且强大的工具之一，它提供了丰富的图表类型，包括散点图和拟合曲线。本...
circos 可视化手册-scatter plot 篇
庐州月光的博客
11-08 2085
欢迎关注微信公众号《生信修炼手册》! plots这个block 中，支持许多的图表类型，scatter plot是最常用的一种。用法如下 关于file文件的内容，在之前的文章中已经详细介绍过。r0和r1定义圆环的位置，max和min定义y轴的最小值和最大值，剩余的几个参数控制散点的外观。 glyph表示点的形状，circle代表圆形，triangle代表三角形，rectangle代表矩形；gly...
Matlab绘图系列教程-基础绘图：散点图 (scatter函数 )
图灵的猫的博客
07-06 2万+
散点图是一种常用的数据可视化工具，能够展示数据之间的关系和分布情况。在Matlab中，绘制散点图非常简单，同时又具有丰富的功能和灵活的定制选项。本教程将逐步引导你学习Matlab中绘制散点图的方法和技巧，并通过详细的解释、示例和有趣的案例分析，帮助你全面了解散点图绘制的过程。
Python画图matplotlib库的使用scatter(),plot()方法教学实例
Elon_Zac的博客
11-16 4877
Python画图 matplotlib库的使用，散点图，曲线图，函数图，柱状图图，饼状图，MATLAB替代画图 Python画图主要用到matplotlib这个库。具体来说是pylab和pyplot这两个子库。这两个库可以满足基本的画图需求。 pylab神器：pylab.rcParams.update(params)。这个函数几乎可以调节图的一切属性，包括但不限于：坐标范围，axes标签字号大小，xtick,ytick标签字号，图线宽，legend字号等。 ...
R数据可视化｜使用Scatterplot3d包制作3D散点图
Xingze_Li
12-31 1万+
介绍 R 中有许多包（RGL、car、lattice、scatterplot3d等）用于创建3D 图形。 本教程介绍了如何使用 R 的 scatterplot3d包 在 3D 空间中生成散点图。 scaterplot3d 使用起来非常简单，可以通过在已经生成的图形中添加补充点或回归平面来轻松扩展。 它可以很容易地安装，因为它只需要一个已安装的 R 版本。 安装并加载 scaterplot3d install.packages("scatterplot3d") library("scatterplot3d
python scatter
AndrewYZWang的博客
04-25 1319
RandomWalk.pyfrom random import choiceclass RandomWalk(): def __init__(self,num_points=50000): self.num_points =num_points self.x_values=[0] self.y_values=[0] def fill_wa
散点图为什么是两组点_SAT数学易错点排雷之scatter plot
weixin_39834745的博客
01-13 575
梁老师课堂，每次梳理一个SAT数学重点、难点或者易错点；今天这篇文章，梁老师继续为大家梳理SAT数学的一个易错知识点，它就是scatter plot；首先简单介绍一下什么是scatter plot：以上六个图展示的就是scatter plot，每一个点都代表了横纵坐标的一对值；除此之外，这些图还说明了这些散点图上面两组数据的关系，分别是positive+strong，positive+weak，n...
【Python笔记】Plot、Scatter、Subplot函数用法
qq_25888559的博客
06-09 3627
Plot、Scatter、Subplot函数用法
matplotlib 散点图scatter
onemorepoint的博客
09-11 232
matplotlib 散点图scatter 最近开始学习python编程，遇到scatter函数，感觉里面的参数不知道什么意思于是查资料,最后总结如下： 1、scatter函数原型 2、其中散点的形状参数marker如下： 3、其中颜色参数c如下: 4、基本的使用方法如下： [python] view plain copy   #导入必要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值