美国 COVID-19 确诊数曲线
md`# 美国 COVID-19 确诊数曲线`
md`
US COVID-19 Confirmed Cases
本线状图用于显示每天美国 COVID-19 的总计感染用户曲线。我们使用的是在线 JSON 数据，数据是通过 AWS 进行读取的。
你可以直接访问下面的链接来获得我们处理上传的数据。
https://cdn.ossez.com/dataset/json/covid19/covid19-confirmed-daily-us.json
虽然我们每天都会自动上传一些数据，但是你可能的更新数据每次都不一样。
我们主要也是希望通过这个平台来学习 D3 图表的使用。`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
return svg.node();
}
parseTime = d3.timeParse("%Y%m%d");
line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(parseTime(d.date)))
.y(d => y(d.value))
x = d3.scaleUtc()
.domain(d3.extent(data, d => parseTime(d.date)))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
margin = ({top: 20, right: 30, bottom: 30, left: 40})
height = 500
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.