Published
Edited
Apr 13, 2021
4 forks
1 star
html`<svg> <path stroke="black" fill="none" d="M0 0 L 100 100 L 200 0 Q 300 100 400 0"></svg>`
line = d3.line()
generated = line([[0, 0], [100, 100], [200, 0]])
html`<svg> <path stroke="black" fill="none" d="${generated}"></svg>`
md`
`
swatches({ color })
svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`);
g.append("g").call(d3.axisLeft(y));
g.selectAll(".point")
.data(data)
.join("circle")
.attr("class", "point")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.price))
.attr("r", 2)
.attr("fill", d => color(d.symbol));
g.selectAll(".line")
.data(groupedData)
.join("path")
.attr("class", "line")
.attr("d", group => line2(group[1]))
.style("fill", "none")
.style("stroke", group => color(group[0]));
return svg.node();
}
groupedData = d3.groups(data, d => d.symbol)
line2 = d3
.line()
.x(d => x(d.date))
.y(d => y(d.price))
margin = ({ left: 50, top: 20, right: 20, bottom: 20 })
color = d3.scaleOrdinal(d3.schemeSet2)
x = d3
.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width - margin.left - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(data, d => d.price))
.range([ height - margin.top - margin.bottom, 0])
height = 300
fmt = d3.timeParse("%b %d %Y")
data = (await vegaDatasets["stocks.csv"]()).map(
d => ((d.date = fmt(d.date)), d)
)
vegaDatasets = require("vega-datasets@2")
d3 = require("d3@6")
import { swatches } from "@d3/color-legend"
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.
