我一直在绘制一个多系列线图，以使用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))
由于我的疑问是关于系列之间的很大差异，因此我只发布了代码的几部分。
I have been plotting a multi-series line chart to show covid cases by using d3.js. I used the country as the variable for each time series. But some countries have a too-small values and some countries have too high at some point of time. Because of that, it's complicated to read the diagram. How to solve these differences in data.
The above image is the result of my work. Some part of code I used for the diagram is following. Since the data is in csv format, the following is the sample data.
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
This is the scales I used for the diagram.
const x = d3.scaleTime().range([0, vis.WIDTH])
const y = d3.scaleLinear().range([vis.HEIGHT, 0])
const z = d3.scaleOrdinal(d3.schemeCategory10);
I used d3.nest to make data more convenient to use.
const covidData = d3.nest()
.key(d => d.location)
.entries(data)
I used the below code for making single series.
const line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.case_per_date); });
The following codes are used to draw the diagram.
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))
Since my doubt is regarding the big differences among series, I posted only few part of my code.
发布评论
评论（1）
您可以设计轴以具有多数尺度：
yscale = d3.scalelinear（）。域（[[0，50000，200000]）。范围（[vis.height，vis.height/2，0]
）您的停止值（可能会增加值的否）和所需的图形
，或者如果您只想显示趋势，请使用日志或SQRT量表
d3.scalesqrt（）或d3.scalelog（）
这些量表将比上述用户更好地表示，因为用户将需要与轴tick相关以了解图形。您还需要以较小的间隔提供刻度值，以便在以前的方法中更好地展示它
You can design your axis to have polylinear scale:
yScale = d3.scaleLinear().domain([0, 50000, 200000]).range([ vis.height, vis.height/2, 0])
you can change based on your stop values( can increase the no of values) and desired graph
Or if you want to show just the trend, use log or sqrt scales
d3.scaleSqrt() or d3.scaleLog()
https://observablehq.com/@d3/introduction-to-d3s-scales
These scales will be a better representation than using above as user will need to relate to axis ticks to understand the graph. You will also need to provide ticks values at smaller intervals to present it better in the former approach