Public
Edited
Mar 12, 2023
1 fork
Plot.plot({
x: { tickFormat: "d" },
y: { type: "point", tickFormat: (d) => `#${d}` },
marks: [
Plot.line(genesis, {
x: "year",
y: "rank",
sort: "year",
curve: "monotone-x"
}),
Plot.dot(genesis, { x: "year", y: "rank", fill: "black", title: "title" }),
Plot.ruleX([1974.5], { strokeDasharray: 4 }),
Plot.text([1974.5], {
x: Plot.identity,
frameAnchor: "top",
text: ["← Peter Gabriel leaves"],
dx: 4,
textAnchor: "start"
})
]
})
genesis = d3.csvParse(
`rank,title,year
15,"CALLING ALL STATIONS",1997
14,"WE CAN’T DANCE",1991
13,"FROM GENESIS TO REVELATION",1969
12,"TRESPASS",1970
11,"WIND & WUTHERING",1976
10,"INVISIBLE TOUCH",1986
9,"…AND THEN THERE WERE THREE…",1978
8,"GENESIS (MAMA)",1983
7,"NURSERY CRYME",1971
6,"ABACAB",1981
5,"DUKE",1980
4,"A TRICK OF THE TAIL",1976
3,"SELLING ENGLAND BY THE POUND",1973
2,"THE LAMB LIES DOWN ON BROADWAY",1974
1,"FOXTROT",1972`,
d3.autoType
)
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.
