數據可視化【六】Line Chart Area Chart

Line Chart

vizhub代碼：

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))).curve(d3.curveBasis); //使得曲線比較光滑g.append('path').attr('class', 'line-path').attr('d', lineGenerator(data));

index.html

<!DOCTYPE html>
<html><head><title>Temperature in San Francisc Line Chart</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();const lineGenerator = d3.line().x(d => xScale(xValue(d))).y(d => yScale(yValue(d))).curve(d3.curveBasis); //使得曲線比較光滑g.append('path').attr('class', 'line-path').attr('d', lineGenerator(data));/*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
}.line-path {fill: none;stroke: steelblue;stroke-width: 5;stroke-linejoin: round /*使得曲線比較光滑*/
}

其實也可以在折現圖上加上點，只需要去掉原本散點圖的注釋就可以了。但是我覺得這樣不好看就沒有加上。

Area Chart

vizhub代碼：

https://vizhub.com/Edward-Elric233/9fa9b8c649cf41a3afcde6e185a72cca

https://vizhub.com/Edward-Elric233/39790021eded4d398be6f97726e73dd2

area圖只需要把使用line的地方換成area即可。不同的地方在于area需要設置y0,y1,y用來劃分區域，而且需要設置path的fill屬性，用來表示區域的顏色。一般來講應該不需要設置線的stroke和stroke-width屬性。

例如把上面的圖變成Area Chart
在這里插入圖片描述
需要修改的js代碼如下：

const areaGenerator = area().x(d => xScale(xValue(d))).y1(d=>yScale(yValue(d))).y0(innerHeight).curve(curveBasis);	//使得曲線比較光滑g.append('path').attr('class', 'line-path').attr('d', areaGenerator(data));

這里還畫了一個圖，把網格提到了圖形的前面。
在這里插入圖片描述
雖然有些丑，但是如果需要使用的話還是可以的。技巧就是先生成Area圖，然后再生成坐標軸就可以了。這樣坐標線就會顯示在圖形的上面。

index.html

<!DOCTYPE html>
<html><head><title>World Population Area Chart</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 title = 'World Population';const xValue = d => d.year;const xAxisLabel = 'Year';const yValue = d => d.population;const yAxisLabel = 'Population';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), 0]).range([0, innerHeight]).nice();const yAxisTickFormat = number => d3.format('.1s')(number).replace('G', 'B');const yAxis = d3.axisLeft(yScale).tickFormat(yAxisTickFormat).tickSize(-innerWidth).tickPadding(15);const xAxis = d3.axisBottom(xScale)//.tickFormat(xAxisTickFormat).ticks(10) //設置標簽的多少，不知道為什么如果設置為10就會很亂，可能是因為這是一周的時間，如果劃分成10個以上就需要顯示小時吧.tickSize(-innerHeight) //設置tick-line的長度.tickPadding(15); //通過設置Padding讓x軸的數字離遠一點const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);const areaGenerator = d3.area().x(d => xScale(xValue(d))).y1(d => yScale(yValue(d))).y0(innerHeight).curve(d3.curveBasis); //使得曲線比較光滑g.append('path').attr('class', 'line-path').attr('d', areaGenerator(data));//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/world-population-by-year-2015.csv').then(data => {console.log(data);data.forEach(d => {//得到的數據默認每個屬性的值都是字符串，因此需要進行轉換d.population = +d.population;d.year = new Date(d.year);});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
}.line-path {fill: #42A5B3;/*   stroke : blue;stroke-width : 5; */
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/383612.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/383612.shtml
英文地址，請注明出處：http://en.pswp.cn/news/383612.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

數據可視化【七】 更新模式

數據可視化【七】 更新模式

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;我…
閱讀更多...
75 顏色分類

75 顏色分類

題目已經提示可以一遍掃描了但是我還是沒有想到&#xff0c;其實雙指針的想法我已經有了&#xff0c;但是一想到有問題就覺得無法實現。這也揭示了我思維上的問題&#xff1a;用一種方法解決問題遇到困難第一件事情不是想著如何攻克而是想著換一種方法。對自己的思維也不自信。…
閱讀更多...
最新文章

Copyright @ 2022~2023