多系列折線圖如果某點線值太高，大部分是小值，如何處理？（資料可視化，d3.js）-有解無憂

我一直在使用 d3.js 繪制多系列折線圖來顯示 covid 案例。我使用國家作為每個時間序列的變數。但是有些國家的數值太小，有些國家的數值在某個時間點太高。因此，閱讀圖表很復雜。如何解決這些資料差異。多系列折線圖如果某點線值太高，大部分是小值，如何處理？（資料可視化，d3.js）

上圖是我作業的結果。我用于圖表的部分代碼如下。由于資料為csv格式，以下是樣本資料。

iso_code,continent,location,date,total_cases,case_per_date,total_deaths,death_per_date,total_cases_million,case_per_million,death_per_million,total_death_million
AFG,Asia,Afghanistan,24-02-2020,5,5,0,0,0.126,0.126,0,0
AFG,Asia,Afghanistan,25-02-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,26-02-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,27-02-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,28-02-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,29-02-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,01-03-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,02-03-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,03-03-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,04-03-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,05-03-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,06-03-2020,5,0,0,0,0.126,0,0,0
AFG,Asia,Afghanistan,07-03-2020,8,3,0,0,0.201,0.075,0,0

這是我用于圖表的比例。

const x = d3.scaleTime().range([0, vis.WIDTH])
const y = d3.scaleLinear().range([vis.HEIGHT, 0])
const z = d3.scaleOrdinal(d3.schemeCategory10);

我使用 d3.nest 使資料更方便使用。

const covidData = d3.nest()
            .key(d => d.location)
            .entries(data)

我使用以下代碼制作單個系列。

const line = d3.line()
     .x(function(d) { return x(d.date); })
     .y(function(d) { return y(d.case_per_date); });

以下代碼用于繪制圖表。

const country = g.selectAll(".countries").data(data);
country.exit().remove();
country.enter().insert("g", ".focus")
       .append("path")
       .attr("class","chart-line")
       .style("stroke", d => z(d.id))
       .merge(country)
       .transition(vis.t)
       .attr("d",d => line(d.values))

由于我懷疑系列之間的巨大差異，因此我只發布了我的代碼的一小部分。

uj5u.com熱心網友回復：

您可以將軸設計為具有多線性比例：

yScale = d3.scaleLinear().domain([0, 50000, 200000]).range([ vis.height, vis.height/2, 0])

您可以根據您的停止值進行更改（可以增加值的數量）和所需的圖表

或者，如果您只想顯示趨勢，請使用 log 或 sqrt scales d3.scaleSqrt() 或 d3.scaleLog()

https://observablehq.com/@d3/introduction-to-d3s-scales

這些比例將比上面使用的更好，因為用戶需要與軸刻度相關才能理解圖形。您還需要以較小的間隔提供刻度值，以便在前一種方法中更好地呈現它

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496731.html

標籤：d3.js 数据可视化

上一篇：d3.v5.min.js:2錯誤：<path>屬性d：預期的moveto路徑命令（'M'或'm'），“函式a(a){va...”

下一篇：如何從PythonAnywhereFlaskWebapp（通過Pandas&sqlalchemy）訪問外部MySQL資料庫：接收sqlalchemy.exc.OperationalError