Published
Edited
Nov 3, 2020
1 star
DataLine = ({data,xScale,yScale,fill="#f00"}) => {
let areaGen = d3.area()
.x(d => xScale(d[0]))
.y0(d => yScale(0))
.y1(d => yScale(d[1]))
.curve(d3.curveStepAfter);
return `<path d="${areaGen(data)}" fill="${fill}"/>`
}
yScale = {
let yvals = data.map(d => d[1]);
console.log([Math.min(...yvals),Math.max(...yvals)]);
return d3.scaleLinear()
.domain([Math.min(...yvals),Math.max(...yvals)])
.range([height-PADDING.bottom,PADDING.top]).nice();
}
xScale = {
let xvals = data.map(d => d[0]);
return d3.scaleLinear()
.domain([Math.min(...xvals),Math.max(...xvals)])
.range([PADDING.left,width-PADDING.right]);
}
width = 800
height = 600
PADDING = {
return {
left:50,
right:20,
top:20,
bottom:40
}
}
data = [
[ 0, 100 ],
[ 1, 96.41011436626701 ],
[ 2, 90.22747436123964 ],
[ 3, 82.44833645243018 ],
[ 4, 79.46915384254999 ],
[ 5, 78.44578068941755 ],
[ 6, 71.74387194599785 ],
[ 7, 66.83699688774472 ],
[ 8, 60.976036936913275 ],
[ 9, 59.68601212064982 ],
[ 10, 59.0438206871926 ],
[ 11, 58.568342324955594 ],
[ 12, 56.29252700416161 ],
[ 13, 49.535761996841224 ],
[ 14, 46.47328303315478 ],
[ 15, 40.8077022370103 ],
[ 16, 33.80364606428908 ],
[ 17, 28.265758594027208 ],
[ 18, 23.954412685676196 ],
[ 19, 22.354842366861263 ],
[ 20, 16.59555166204629 ],
[ 21, 13.787100178130535 ],
[ 22, 8.830620632305786 ],
[ 23, 8.140012781447943 ],
[ 24, 7.094376924882573 ],
[ 25, 3.4593726308175015 ],
[ 26, 2.4228741287027233 ]
]
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.
