Day 21: RasterDay 10: North AmericaDay 30: My favoriteDay 8: AfricaDay 14: EuropeDay 9: HexagonsTurkey vulture migrations in South AmericaDay 3: PolygonsDay 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 4: Bad mapDay 17: FlowDay 1: Points
Day 18: Atmosphere
Plot.plot({
insetRight: 100,
margin: 20,
projection: {type: "equirectangular", domain: { type: "MultiPoint", rotate: [120,30], coordinates: [ [-130, 65], [-80, 70], [-60, 60], [-130, 25]]}},
marks: [
Plot.sphere({fill: "#002422"}),
Plot.geo(countries, {fill: "black", stroke: "gray", opacity: .75}),
Plot.text(wind_edited,{x:-118, y: 40, fontSize: 210, text: d=>d.yearchar, fill: "gray", opacity: .2, lineHeight: 1.2, textAnchor: "start", filter: d=>d.year == yearinput }),
Plot.image(wind_turbine, {x: "longitude", y: "latitude", dy:-20, rotate: 0, stroke: "blue", width: 10, strokeWidth: 2, length: 50, strokeOpacity: 1, filter: d=>d.commissioning_date <= yearinput, width: 70, src: "https://static.vecteezy.com/system/resources/previews/025/278/460/original/wind-turbine-png.png"}),
Plot.text(['Canada'],{x:-110, y: 56, fontSize: 30, fill: "#008080", opacity: 1, lineHeight: 1.2, dy: -50 }),
//Plot.text(['United States of America'],{x:-100, y: 36, fontSize: 30, fill: "#ccc", opacity: 1, lineHeight: 1.2, dy: -50 }),
Plot.text(['Canada\nwind turbine\nlocations'],{x:-70, y: 35, fontSize: 50, fill: "#008080", opacity: .8, lineHeight: 1.2, textAnchor: "start", fontFamily: "oblique", fontStyle: "italic", fontWeight: "bold"}),
Plot.text(['Data: open.canada.ca | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-50, y: 23.5, fontSize: 14, fill: "#008080", opacity: 1, lineHeight: 1.2, textAnchor: "end" })
],
insetBottom: 50,
width: 1200,
height: 700,
r: { range: [5, 20]},
})
Plot.plot({
insetRight: 100,
margin: 20,
projection: {type: "equirectangular", domain: { type: "MultiPoint", rotate: [120,30], coordinates: [ [-130, 65], [-80, 70], [-60, 60], [-130, 25]]}},
marks: [
Plot.sphere({fill: "lightblue"}),
Plot.geo(countries, {fill: "green", stroke: "#CCC", opacity: .75}),
Plot.dot(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", dx: -200, dy: 220, rotate: 10, stroke: "yellow",fill: "white", width: 10, strokeWidth: 5, length: 30, strokeOpacity: 1}),
Plot.dot(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", dx: -200, dy: 260, rotate: 10, stroke: "blue",fill: "green", width: 10, strokeWidth: 5, length: 30, strokeOpacity: 1}),
Plot.text(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", text: d=>"New", dx: -180, dy: 224, fill: "gray", fontSize: 20, strokeOpacity: 1, textAnchor: "start"}),
Plot.text(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", text: d=>"Existing", dx: -180, dy: 260, fill: "gray", fontSize: 20, strokeOpacity: 1, textAnchor: "start"}),
Plot.dot(wind_turbine, {x: "longitude", y: "latitude", r: 20, fill: "blue", width: 10, stroke: "white", strokeWidth: 2, length: 50, opacity: .4, filter: d=>d.commissioning_date <= yearinput}),
Plot.dot(wind_turbine, {x: "longitude", y: "latitude", r: 20, fill: "yellow", width: 10, stroke: "white", strokeWidth: 2, length: 50, opacity: .4, filter: d=>d.commissioning_date == yearinput+1}),
Plot.text(['Canada'],{x:-110, y: 56, fontSize: 30, fill: "#ccc", opacity: 1, lineHeight: 1.2, dy: -50 }),
Plot.text(['United States of America'],{x:-100, y: 36, fontSize: 30, fill: "#ccc", opacity: 1, lineHeight: 1.2, dy: -50 }),
Plot.text(['Canada\nwind turbine\nlocations'],{x:-70, y: 35, fontSize: 40, fill: "forestgreen", opacity: .8, lineHeight: 1.2, textAnchor: "start", fontFamily: "oblique", fontStyle: "italic"}),
Plot.text(wind_edited,{x:-70, y: 27.4, fontSize: 40, text: d=>d.yearchar, fill: "forestgreen", opacity: .8, lineHeight: 1.2, textAnchor: "start", filter: d=>d.year == yearinput }),
Plot.text(['Data: open.canada.ca | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-50, y: 23.5, fontSize: 14, fill: "forestgreen", opacity: 1, lineHeight: 1.2, textAnchor: "end" })
],
insetBottom: 50,
width: 1200,
height: 700,
r: { range: [5, 20]},
})
Plot.plot({
insetRight: 100,
margin: 20,
projection: {type: "equirectangular", domain: { type: "MultiPoint", rotate: [120,30], coordinates: [ [-130, 65], [-80, 70], [-60, 60], [-130, 25]]}},
marks: [
Plot.sphere({fill: "lightblue"}),
Plot.geo(countries, {fill: "green", stroke: "#CCC", opacity: .75}),
Plot.vector(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", dx: -200, dy: 220, rotate: 10, stroke: "yellow",fill: "white", width: 10, strokeWidth: 5, length: 30, strokeOpacity: 1}),
Plot.vector(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", dx: -200, dy: 260, rotate: 10, stroke: "blue",fill: "green", width: 10, strokeWidth: 5, length: 30, strokeOpacity: 1}),
Plot.text(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", text: d=>"New", dx: -180, dy: 224, fill: "gray", fontSize: 20, strokeOpacity: 1, textAnchor: "start"}),
Plot.text(wind_turbine.slice(0,1), {x: "longitude", y: "latitude", text: d=>"Existing", dx: -180, dy: 260, fill: "gray", fontSize: 20, strokeOpacity: 1, textAnchor: "start"}),
Plot.vector(wind_turbine, {x: "longitude", y: "latitude", rotate: 90, stroke: "blue", width: 10, strokeWidth: 2, length: 50, strokeOpacity: 1, filter: d=>d.commissioning_date <= yearinput}),
Plot.vector(wind_turbine, {x: "longitude", y: "latitude", rotate: 90, stroke: "yellow", width: 10, strokeWidth: 2, length: 50, strokeOpacity: 1, filter: d=>d.commissioning_date == yearinput+1}),
Plot.text(['Canada'],{x:-110, y: 56, fontSize: 30, fill: "#ccc", opacity: 1, lineHeight: 1.2, dy: -50 }),
Plot.text(['United States of America'],{x:-100, y: 36, fontSize: 30, fill: "#ccc", opacity: 1, lineHeight: 1.2, dy: -50 }),
Plot.text(['Canada\nwind turbine\nlocations'],{x:-70, y: 35, fontSize: 40, fill: "forestgreen", opacity: .8, lineHeight: 1.2, textAnchor: "start", fontFamily: "oblique", fontStyle: "italic"}),
Plot.text(wind_edited,{x:-70, y: 27.4, fontSize: 40, text: d=>d.yearchar, fill: "forestgreen", opacity: .8, lineHeight: 1.2, textAnchor: "start", filter: d=>d.year == yearinput }),
Plot.text(['Data: open.canada.ca | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-50, y: 23.5, fontSize: 14, fill: "forestgreen", opacity: 1, lineHeight: 1.2, textAnchor: "end" })
],
insetBottom: 50,
width: 1200,
height: 700,
r: { range: [5, 20]},
})
wind_turbine.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
wind_yearly_counts
wind_yearly_counts.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import {countries} 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.
