Published
Edited
Dec 30, 2021
1 fork
viewof dateRange = rangeSlider({
min: 1,
max: rawDates.length,
step: 1,
value: this ? this.value : [0, rawDates.length],
format: d => rawDates[d - 1].toDateString()
// title: 'Date Range',
// description: 'Move start and end sliders to adjust date range'
})
colorScale = d3.scaleOrdinal()
.domain(keys)
.range(d3.schemePastel1); //括号里的是10中分类颜色的数组
//根据各关键词来设置河流颜色，一个关键词一个颜色
viewof chart = {
const svg = d31
.create("svg")
.attr("viewBox", [0, 0, width, height])
.on("mouseover",reset);
// const regionSystem = RegionCatalog('cesus_1');
let currentWord = '';
let value = '清朗行动';
svg
.append("g")
.selectAll("path")
.data(series) //画河流所用数据（堆叠之后）
.join("path")
.on("mouseover", over)
.on("mouseout", out)
.on("mousemove", move)
.style("fill", (d) => { return colorScale(d.key); }) //设置颜色
.attr("opacity", .7) //初始透明度
.attr("stroke", 'black')
.attr("stroke-width", .3)
.attr("d", area)
.on("click", function(event,d) {
d31.select(this) //选中鼠标操作触发的事件对应的当前元素对象
.transition()
.attr("opacity", .9)//设置不透明度为0.9
const node = svg.node();
// console.log(d);
//获得对应key
node.value = value = truncatedseries[d].key;
node.dispatchEvent(new CustomEvent("input"));
});
//画x轴
svg.append("g").call(xAxis);
//画长线
const bigLine = svg
.append("line")
.attr("stroke", "black")
.attr("opacity", .2)
.attr("stroke-dasharray", 3, 4)
.attr("pointer-events", "none");
//画短线
const line = svg
.append("line")
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("pointer-events", "none");
const textArea = svg.append("g").attr("pointer-events", "none");
const stateLabel = textArea
// .attr("stroke", 'black')
.append("text")
.attr("font-size", 16)
.attr("text-anchor", "middle");
const caseLabel = textArea
.append("text")
.attr("font-size", 16)
.attr("text-anchor", "middle");
function over(d) {
d31.select(this).attr("opacity", 1);
currentWord = d.key;
d31.event.stopPropagation(); //停止传播？？？
}
function out(d) {
d31.select(this).attr("opacity", .7);
}
function move(d) {
const dateStamp =
x.invert(d31.event.offsetX).getTime() >
x.invert(d31.event.offsetX).setHours(12, 0, 0, 0)
? x.invert(d31.event.offsetX).setHours(24, 0, 0, 0)
: x.invert(d31.event.offsetX).setHours(0, 0, 0, 0);
// const dateStamp =
// new Date(x.invert(d3.event.offsetX));
// x.invert(d3.event.offsetX).setHours(12, 0, 0, 0)
// ? x.invert(d3.event.offsetX).setHours(24, 0, 0, 0)
// : x.invert(d3.event.offsetX).setHours(0, 0, 0, 0);
const index = d.findIndex(t => t.data.Date.getTime() == dateStamp);
const selectedData = d[index];
// const node = svg.node();
// // console.log(d);
// //获得对应state的名字并更新value的值
// node.value = value = index;
// node.dispatchEvent(new CustomEvent("input"));
const min = d31.min(truncatedseries, d => d[index][0]);
const max = d31.max(truncatedseries, d => d[index][1]);
line
.attr("x1", x(dateStamp))
.attr("x2", x(dateStamp))
.attr("y1", y(selectedData[0]))
.attr("y2", y(selectedData[1]));
bigLine
.attr("x1", x(dateStamp))
.attr("x2", x(dateStamp))
.attr("y1", y(min))
.attr("y2", y(max));
stateLabel
.attr("x", d31.max([d3.min([x(dateStamp), width - 120]), 120]))
.attr("y", d31.max([y(max) - 40, 20]))
// .attr("stroke", 'black')
.text(currentWord + ' ' + new Date(dateStamp).toLocaleDateString());
const stateMetric = selectedData.data[currentWord];
const nationalMetric = d31.sum(keys, k => selectedData.data[k]);
const percentage = Math.round((stateMetric / nationalMetric) * 100);
caseLabel
.attr("x", d31.max([d3.min([x(dateStamp), width - 120]), 120]))
.attr("y", d31.max([y(max) - 20, 40]))
.text(
`${'情感值——'}${Math.round(
stateMetric
)}`
);
d31.event.stopPropagation();
}
function reset() {
line
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", 0);
bigLine
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", 0);
stateLabel.text("");
caseLabel.text("");
}
return Object.assign(svg.node(), {value});
}
dataSetName=chart
styles = html`<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');
.star-background {
background: url('${backgroundUrl}');
background-repeat: no-repeat;
background-size: cover;
}
</style>`
backgroundUrl = FileAttachment("background-1.jpeg").url()
zongDates = d3.timeDay.every(15).range(new Date(2020,12,2), new Date(2021,11,31)) //此数据中的总日期范围
data0 = d3.csvParse(await FileAttachment("qinglang2-4.csv").text(), d3.autoType)
data2=d3.csvParse(await FileAttachment("zhongmei@1.csv").text(), d3.autoType)
data3 = d3.csvParse(await FileAttachment("yiqing@2.csv").text(), d3.autoType)
data4 = d3.csvParse(await FileAttachment("hewuran@1.csv").text(), d3.autoType)
data5 = d3.csvParse(await FileAttachment("xinjiangmian.csv").text(), d3.autoType)
data5
width2 = 470
height2 = 234
margin2 = 66
size = 2
d32 = require("d3@v6")
viewof size1 = html`<input type=range min="2" max="5" value="4">`
dates = rawDates.slice(dateRange[0], dateRange[1]) //进度条返回日期范围，以此完成与进度条的交互
// dates = [new Date(2020,0,1),new Date(2020,6,1)]
change = Object.assign(d3.csvParse(await FileAttachment("河流图 (3) - 副本-2.csv").text(), d3.autoType)).map(d => {d.Date = new Date(d.Date); return d;})
change.columns=data.columns
series = d3.stack()
.keys(data.columns.slice(1,data.columns.length))
.order(d3.stackOrderDescending) // 将最大的系列放在底部
.offset(d3.stackOffsetSilhouette) //将流图以零为中心
(change)
data = Object.assign(d3.csvParse(await FileAttachment("河流图 (6).csv").text(), d3.autoType))
rawDates=data.map(d => d.Date)
.map(d =>new Date(d))
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.
