Published
Edited
Sep 10, 2019
Also listed in…
uncertainty: templates
md`# line`
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "50%")
.style("height", "auto")
.style("font", "10px sans-serif");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "2")
.attr("d", line)
;
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "2")
.attr("d", horLine)
;
return svg.node();
}
xScale = d3.scaleTime()
.domain([
d3.min(data, function(d) { return d.date; }),
d3.max(data, function(d) { return d.date; })
])
.range([0, width])
;
yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.close; })])
.range([height, 0])
;
line = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.close); })
;
horLine = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(1514.68); })
;
rowConverter = function (d) {
return {
date: new Date(d.Datee),
close: parseFloat(d.Close)
}
}
width = 300
height = 300
data = d3.csv("https://gist.githubusercontent.com"
+ "/aaronxhill/baffd3e35d09430eb9ba6bd06b42d893"
+ "/raw/bea5e50fef3442eb52769f5302fe3f8ad774675e"
+ "/yahoosnp500.csv", d => { return rowConverter(d) })
//https://gist.github.com/aaronxhill/baffd3e35d09430eb9ba6bd06b42d893/raw/bea5e50fef3442eb52769f5302fe3f8ad774675e/yahoosnp500.csv
d3 = require("d3@5")
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.
