數據可視化【五】 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.pswp.cn/news/383613.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/383613.shtml
英文地址，請注明出處：http://en.pswp.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;完整備份差…
閱讀更多...
數據庫原理及應用【五】安全性和完整性約束

數據庫原理及應用【五】安全性和完整性約束

數據庫一致性被破壞&#xff1a; 系統故障許多用戶的并發訪問人為破壞事務本身不正確 保護數據庫一致性的方法&#xff1a; 視圖/查詢修改訪問控制 普通用戶擁有資源特權的用戶DBA 數據庫的安全問題 身份驗證 口令物理設備 GRANT CONNECT TO John IDENTIFIED BY 123456…
閱讀更多...
遞歸式復雜度求解

遞歸式復雜度求解

代換法 猜測復雜度驗證是否滿足遞歸式&#xff08;使用歸納法&#xff09;找到常數應該滿足的條件針對基本情況&#xff0c;常數足夠大時總是成立的 需要注意的是&#xff0c;我們猜測的復雜度有可能不滿足遞歸式&#xff0c;這個時候就要通過減去一些低階項來使得歸納成立。…
閱讀更多...
斐波那契數列計算

斐波那契數列計算

定義 斐波那契數列&#xff1a; F[n]{0,n01,n1F[n?1]F[n?2],elseF[n] \begin{cases} 0,n0 \\ 1,n1\\ F[n-1]F[n-2],else \end{cases} F[n]??????0,n01,n1F[n?1]F[n?2],else? 樸素計算法 根據遞歸式F[n]F[n?1]F[n?2]F[n]F[n-1]F[n-2]F[n]F[n?1]F[n?2]進行計算…
閱讀更多...
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文件…
閱讀更多...
3.01【python正則表達式以及re模塊】

3.01【python正則表達式以及re模塊】

python正則表達式以及re模塊 元字符 正則表達式的語法就由表格中的元字符組成&#xff0c;一般用于搜索、替換、提取文本數據 元字符含義.匹配除換行符以外的任何單個字符*匹配前面的模式0次或1次匹配前面的模式1次或多次?匹配前面的模式0次或1次[]用于定義字符集&#xff…
閱讀更多...
Linux配置編程環境+云服務器上傳文件

Linux配置編程環境+云服務器上傳文件

Java環境配置 Ubuntu https://www.cnblogs.com/lfri/p/10437266.html Centos https://blog.csdn.net/qq_21077715/article/details/85536399 Tomcat配置 Centos https://blog.csdn.net/qq_21077715/article/details/85541685 https://www.cnblogs.com/newwind/p/9904561…
閱讀更多...
gbd + cgbd

gbd + cgbd

gbd&#xff1a;傳送門 cgbd&#xff1a;傳送門 | 傳送門
閱讀更多...
數據可視化【十四】交互式過濾地區分布圖

數據可視化【十四】交互式過濾地區分布圖

在前面的博客中已經介紹了如何繪制地區分布圖&#xff0c;這一節學習如何繪制交互式過濾地區分布圖。如果對繪制地區分布圖還不熟悉的話可以了解一下之前我寫的博客&#xff1a;數據可視化【十三】地區分布圖 整體的框架仍然是在之前的基礎上進行修改&#xff0c;主要是添加交…
閱讀更多...
Ubuntu環境搭建

Ubuntu環境搭建

本文記錄了一些常用的Ubuntu軟件 然后首先修改軟件源&#xff1a;軟件和更新->Ubuntu軟件->下載自&#xff1a;其他站點&#xff08;修改為阿里云&#xff09; 在關閉的時候需要更新什么的 然后修改更新方式&#xff0c;將不支持的更新去掉 常用的Windows軟件 網易云…
閱讀更多...
1 兩數之和

1 兩數之和

雖然只是一道很簡單的題&#xff0c;但是也給我很多思考。 剛看到這道題的時候沒有仔細思考&#xff0c;直接寫了個排序和二分查找&#xff0c;想著對每個數字查找另一個數字會不會出現&#xff0c;復雜度是O(nlognnlogn)O(nlognnlogn)O(nlognnlogn)&#xff0c;主要訓練了一下…
閱讀更多...
834 樹中距離之和

834 樹中距離之和

這道題我自己的想法只有對每個點都用一遍Dijkstra然后再求和&#xff0c;顯然會超時&#xff0c;所以我都沒有嘗試。 研究了一下題解&#xff0c;發現題解很巧妙&#xff0c;自己對樹的處理還是太稚嫩&#xff0c;之前樹鏈剖分學的都忘光了。 對于固定根節點的&#xff0c;我…
閱讀更多...
最新文章

Copyright @ 2022~2023