Public
Edited
Jun 18, 2023
Plot.plot({
width: 500,
height: 400,
inset: 0,
projection: ({ width, height }) =>
d3
.geoConicEquidistant()
.rotate([-86, -129.5, -170])
.translate([width / 2, height / 2])
.scale(width * 1.1),
color: {
type: "log",
scheme: "YlOrRd",
legend: true,
tickFormat: "d",
label: "Size (Hectares)"
},
marks: [
Plot.frame(),
Plot.geo(canada, {
stroke: "black",
fill: "#f5f5f5"
}),
Plot.dot(data, {
filter: (d) => d.YEAR === currYear,
x: "LONGITUDE",
y: "LATITUDE",
r: "SIZE_HA",
fill: "SIZE_HA",
fillOpacity: 0.9,
stroke: "SIZE_HA",
strokeWidth: 1,
strokeOpacity: 1
})
]
})
maxYear = d3.max(data, (d) => d.YEAR)
minYear = d3.min(data, (d) => d.YEAR)
canada = FileAttachment("canada_provinces.geojson").json()
// source: https://cwfis.cfs.nrcan.gc.ca/datamart
data = FileAttachment("NFDB_point_20220901_large_fires.csv")
.csv({
typed: true
})
.then((data) =>
data
.filter((d) => d.YEAR !== -999)
.map((d) => ({ ...d, Date: new Date(d.YEAR, d.MONTH, d.DAY) }))
)
NFDB_point_20220901_large_fires.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import { rangeSlider } from "@mootari/range-slider"
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.
