Public
Edited
May 1, 2023
minutes = generateMinutesOfYear(2000)
// Plot.plot({
// height: 600,
// width: 400,
// x: {
// axis: null
// },
// y: {
// axis: null,
// // range: [1, 10]
// },
// color: {
// range: ["#FE7441"]
// },
// facet: {
// data: data,
// x: "year"
// },
// marks: [
// Plot.barX(data, {
// x: { reduce: null },
// y: "plot_date",
// fill: "age_group",
// mixBlendMode: "multiply"
// })
// ]
// })
Plot.plot({
height: 600,
width: 400,
x: {
axis: null
},
y: {
axis: null,
// range: [1, 10]
},
color: {scheme: "YlGnBu"},
facet: {
data: data,
x: "year"
},
marks: [
Plot.rect(data, Plot.binY({fill: "count"}, {y: "plot_date"})),
// Plot.barX(data, {
// x: { reduce: null },
// y: "plot_date",
// fill: "age_group",
// width: 100
// })
]
})
yearFormat = d3.timeFormat("%Y");
// Plot.plot({
// width: 1600,
// height: 1000,
// inset: 20,
// // facet: {
// // data: mapData,
// // x: "school_year"
// // },
// marks: [
// Plot.frame(),
// Plot.dot(map_data, {
// x: "longitude",
// y: "latitude",
// fill: "age_group",
// opacity: 0.8,
// r: 3,
// mixBlendMode: "multiply"
// }),
// // Plot.voronoiMesh(school_list, {
// // x: "longitude",
// // y: "latitude"
// // }),
// // Plot.dot(school_list, {
// // x: "longitude",
// // y: "latitude",
// // r: 1.5,
// // fill: "black"
// // }),
// Plot.axisY({
// label: null,
// ticks: 0,
// tickSize: 0,
// tickFormat: () => ""
// }),
// Plot.axisX({
// label: null,
// ticks: 0,
// tickSize: 0,
// tickFormat: () => ""
// })
// ]
// })
map_data
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
height: 400,
width: 2000,
marginLeft: 100,
marginBottom:200,
// facet: {
// data: map_data,
// y: "year"
// },
x: {
inset: xPadding,
axis: null
},
y: {
axis: null
},
marks: [
Plot.dot(
map_data.filter(d =>d.age_group=="youth"),
Plot.dodgeY({
x: "plot_date",
y: 1,
r: 3,
padding,
anchor: "bottom",
fill: "#FD7540"
})
)
]
})
import {pivot_wider_generalized} from "7875c58ee07851b6"
Plot.plot({
width: 1400,
height: 800,
x: {
align: 0,
round: false,
domain: waterfall_data.map((d) => d.month)
},
y: {
grid: true,
nice: true
// tickFormat: d3.format(".2s")
},
marks: [
Plot.barY(waterfall_data, {
x: "month",
y1: "value_from_2019",
y2: "value_from_2022",
fill: (d) => (d.increaseOrDecrease >= 0 ? "#FF7540" : "#A1B697"),
opacity: 0.2
}),
Plot.arrow(waterfall_data, {
x: "month",
y1: "value_from_2019",
y2: "value_from_2022",
stroke: (d) => (d.increaseOrDecrease >= 0 ? "#FF7540" : "#A1B697"),
strokeWidth: 2.5
})
]
})
raw_data
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
