Published
Edited
Dec 29, 2021
1 fork
area = d3
.area()
.x((d, i) => x(data[i].Date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
data[1]
x = d3
.scaleUtc()
.domain(d3.extent(dates, (d, i) => d))
.range([margin.left, width - margin.right]).nice()
y = d3
.scaleLinear()
.domain([
d3.min(series, d => d3.min(d, d => d[0])),
d3.max(series, d => d3.max(d, d => d[1]))
])
.range([height - margin.bottom, margin.top])
// color = d3.scaleOrdinal().range(d3.schemeSet1)
rawDates = d3.timeDay.range(new Date(2021, 1, 20), new Date(2021, 12, 18)) //此数据中的总日期范围
data[0]
//Object.keys(rawData[0]).slice(11)
//rawData = d3.csv(
// "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_US.csv"
// )
rawDeathData = d3.csv(
'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_US.csv'
)
data = Object.assign(d3.csvParse(await FileAttachment("typenum@4.csv").text(), d3.autoType))
data
data.Date
data.columns.slice(1,data.columns.length)
series = d3.stack()
.keys(data.columns.slice(1,data.columns.length)) //关键词（按关键词堆叠
.order(d3.stackOrderDescending) // 将最大的系列放在底部
.offset(d3.stackOffsetSilhouette) //将流图以零为中心
(data)
series[0].key
truncatedseries = {
const data = series.map(d => d.slice(dateRange[0], dateRange[1]));
data.forEach((d, i) => (d.key = series[i].key));
return data;
}
//进度条截出来的数据
keys = ["AAPL", "AMZN", "FB", "GOOG", "MSFT", "NFLX", "TSLA"];
colorScale = d3.scaleOrdinal()
.domain(keys)
.range(d3.schemeTableau10); //括号里的是10中分类颜色的数组
//根据各关键词来设置河流颜色，一个关键词一个颜色
-------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
Use 1 Pie in bubble
newstype
chart1 = {
const svg = d3_1.create("svg")
.attr("font-size", "10pt")
.style("cursor", "default")
.attr("viewBox", [0, 0, width_1, height_1]);
const g = svg.selectAll("g")
.data(bubbles(chartData).leaves())
.join("g")
.attr("opacity", 1)
.attr("transform", d => `translate(${d.x},${d.y})`)
.on("mouseenter", e => {
e.currentTarget.parentElement.appendChild(e.currentTarget);
legend.node().parentElement.appendChild(legend.node());
})
.on("mouseover", (e, d) => {
g.transition().duration(500).attr("opacity", a => a === d ? 1 : 0.3)
g.selectAll(".ctext").transition().duration(500).attr("opacity", 0.5);
showLegend(legend, d);
})
.on("mouseout", () => {
g.transition().duration(500).attr("opacity", 1);
g.selectAll(".ctext").transition().duration(500).attr("opacity", 1);
legend.attr("opacity", 0);
});
g.append("g")
.call(g => g.append("circle").attr("r", d => d.r).attr("fill", d => bubbleColor(d.value)))
.call(g => g.append("g").attr("fill", d => invertedColor(d.value)).call(g => bubbleText(g, true, "ctext")));
g.append("g")
.attr("class", "pie")
.call(g => g.append("g")
.attr("font-weight", "bold")
.attr("transform", d => `translate(0,${d.r + 10})`)
.call(bubbleText)
)
.selectAll("path")
.data(d => d3_1.pie()(d.data.values).map(p => ({pie: p, data: d})))
.join("path")
.attr("d", drawPie)
.attr("fill", (d, i) => pieColor(years[i]));
const legend = svg.append("g").attr("font-weight", "bold").attr("opacity", 1);
return svg.node();
}
bubbles = data => d3_1.pack()
.size([width_1, height_1-50])
.padding(3)(
d3_1.hierarchy({children: data})
.sum(d => d.total)
)
drawPie = d => d3_1.arc()
.innerRadius(0)
.outerRadius(d.data.r)
.startAngle(d.pie.startAngle)
.endAngle(d.pie.endAngle)()
bubbleText = (g, short, className) => {
g.append("text")
.attr("class", className)
.attr("text-anchor", "middle")
.text(d => short ? d.data.code : d.data.state);
g.append("text")
.attr("class", className)
.attr("text-anchor", "middle")
.attr("dy", "1em")
.text(d => short ? d3_1.format(".2s")(d.value) : toCurrency(d.value));
}
showLegend = (legend, d) => {
legend.selectAll("g").remove();
legend
.selectAll("g")
.data(years)
.join("g")
.attr("transform", (d, i) => `translate(0,${15 * i})`)
.call(g => g.append("rect")
.attr("width", 15).attr("height", 12)
.attr("rx", 3).attr("ry", 3)
.attr("fill", y => pieColor(y)))
.call(g => g.append("text")
.attr("dx", 20)
.attr("dy", "0.8em")
.text((y, i) => {
const v = d.data.values[i];
return `${y} ${toCurrency(v)} (${(v / d.value * 100).toFixed(1)}%)`
}));
legend.attr("opacity", 1)
.attr("transform", `translate(${d.x + d.r + 10},${d.y - d.r})`);
}
pieColor = d3_1.scaleOrdinal()
.domain(years)
.range(["#4e79a7","#f28e2c","#e15759","#76b7b2","#59a14f","#edc949","#af7aa1","#ff9da7","#9c755f","#bab0ab"])
bubbleColor = d3_1.scaleSequential(d3_1.interpolateOrRd)
.domain(d3_1.extent(chartData.map(d => d.total)))
invertedColor = d3_1.scaleSequential(d3_1.interpolateCubehelixDefault)
.domain(d3_1.extent(chartData.map(d => d.total)))
toCurrency = (num) => d3_1.format(".2f")(num)
data1 = d3_1.csvParse(await FileAttachment("type_key_words.csv").text(), d3_1.autoType)
final_data={
if(chart_river=="ALL"){
let data2=data1;return data2;}
else{
let data2=data1.filter(d => d.Code==chart_river);return data2}
}
years = data1.columns.slice(2)
chartData = final_data.map(d => {
const values = years.map(y => d[y])
return {
state: d["State"],
code: d["Code"],
values: values,
total: values.reduce((a, b) => a + b)
}
})
width_1 = 1024
height_1 = 600
d3_1 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
