Day 21: RasterDay 10: North AmericaDay 30: My favoriteDay 8: AfricaDay 14: EuropeDay 9: HexagonsTurkey vulture migrations in South AmericaDay 3: PolygonsDay 18: AtmosphereDay 29: PopulationDay 2: LinesDay 28: Is this a chart or a mapDay 23: 3DDay 11: RetroDay 20: OutdoorsDay 16: OceaniaDay 13: ChoroplethProjection importsDay 6: AsiaDay 7 - NavigationDay 17: FlowDay 1: Points
Day 4: Bad map
Plot.plot({
insetBottom: 40, insetTop: 20,
margin: 10,
projection: {
type: "mercator",
domain: {
type: "MultiPoint",
coordinates: [
[-139, 46], // Northwest corner (latitude, longitude)
[-110, 50], // Northeast corner (latitude, longitude)
[-139, 62], // Southwest corner (latitude, longitude)
[-110, 60] // Southeast corner (latitude, longitude)
]
}
},
width: 700,
marks: [
Plot.sphere({fill: "lightblue", opacity: 1}),
Plot.geo(land, {fill: "#001e00", fillOpacity: 1, stroke: "black", strokeOpacity: .7}),
Plot.density(bc_fires, {x: "longitude", y: "latitude", r:1, opacity: .1,stroke: "red", strokeWidth: 15, title: "longitude", filter: d=> d.Year == year}),
Plot.dot(bc_fires, {x: "longitude", y: "latitude", r:4, opacity: .3,stroke: "red", strokeWidth: 20, title: "longitude", filter: d=> d.Year == year}),
Plot.dot(bc_fires, {x: "longitude", y: "latitude", r:3, opacity:.3,stroke: "orange", strokeWidth: 10, title: "longitude", filter: d=> d.Year == year}),
Plot.dot(bc_fires, {x: "longitude", y: "latitude", r:2, opacity: .8,stroke: "yellow", strokeWidth: 4, title: "longitude", filter: d=> d.Year == year}),
Plot.text(bc_fires.slice(0,1),{x:-127, y: 61.5, dx: -20, fontSize: 19, text: d=>year.toString(), fill: "orange", opacity: 1, lineHeight: 1.2, textAnchor: "start", //filter: d=>d.Year == year
}),
Plot.text(['British Columbia wildfires, '],{x:-133, y: 61.5, fontSize: 19, fill: "orange", opacity: .7, lineHeight: 1.2, fontStyle: "italic"}),
//Plot.text(bc_fires,{x:-127, y: 61.5, fontSize: 19, text: year, fill: "orange", opacity: .01, lineHeight: 1.2, fontStyle: "italic"}),
Plot.text(['Canada'],{x:-114, y: 57, fontSize: 30, fill: "gray", opacity: .7, lineHeight: 1.2, fontStyle: "italic"}),
Plot.text(['Pacific\nOcean'],{x:-135, y: 50, fontSize: 30, fill: "gray", opacity: .7, lineHeight: 1.2, fontStyle: "italic"}),
Plot.text([`Data: gov.bc.ca | Design: Deepsha Menghani\nThreads: IandLoveandData | Mastodon: Deepsha`], {x:-123, y: 45, dx: 280, dy: -20, frameAnchor: "middle", fontSize: 14, fontStyle: "oblique", lineWidth: 70, textAnchor: "end", lineHeight: 1.2, clip: false, fill: "gray", opacity: 1}),
],
r: { range: [3, 20], legend: true},
})
bc_fires_2012_2017@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bc_fires_2012_2017
import {globe} from "ff0a83b495637684"
import {land} from "ff0a83b495637684"
import {Scrubber} from "@mbostock/scrubber"
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.
