The avatar for @tangramer
Runbang Tang
Published
Edited
Jan 15, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
width2 = document.body.clientWidth - margin.left - margin.right; //window size for streamgraph

Insert cell
height2 = 400 - margin.top - margin.bottom;
Insert cell
colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"]
Insert cell
strokecolor = colorrange[0]
Insert cell
format = d3.timeParse("%Y-%m-%d")
Insert cell
//data_text2 = Files.text(data_inMap)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import{chart as chart1} from "@tangramer/metoo-movement"
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
import{s as chart2} from "@tangramer/streamplot-for-metoo"
Insert cell
margin = {return {top: 20, right: 40, bottom: 30, left: 40}};
Insert cell
Insert cell
x = d3.scaleTime()
.range([0, width2])
.domain([new Date(2017,10,30),new Date(2017,11,31)]);
Insert cell
y = d3.scaleLinear()
.range([height2-10, 0])
Insert cell
Insert cell
Insert cell
Insert cell
yAxis = d3.axisRight(y)
Insert cell
yAxisr = d3.axisLeft(y)
Insert cell
Insert cell
Insert cell
Insert cell
match = function(d,i){
if (d===10){return 0}
else{ return i}
}
Insert cell
stack = d3.stack()
.offset(d3.stackOffsetSilhouette)
.order(d3.stackOrderAppearance)
//.value(function(d) { return d.values.value; })

.keys(["#believeyou","#nomore","#howiwillchange","#feminism","#mentoo","#himthough"])
Insert cell
layers = stack(nested2)
Insert cell
y.domain([-1300, 1300]);
Insert cell
svg2.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", d3.area()
.x(function(d, i) { return x(d.data.date); })
.y0(function(d) { return y(d[0]); })
.y1(function(d) { return y(d[1]); }))
.style("fill", function(d) { return z(d.key); });
Insert cell
Insert cell
Insert cell
Insert cell
svg2.append("g")
.attr("class", "y axis")
.call(yAxisr);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
title3 = svg2.append("text")
.attr("x", 105 )
.attr("y", 40)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more