Public
Edited
Nov 9, 2023
Insert cell
Insert cell

Plot.plot({
// margin: 0, insetLeft: -10, insetBottom: 20,
projection: {
type: "mercator",
domain: {
type: "MultiPoint",
coordinates: [[ -107.6456, 24.8371 ],
[ -92.5083, 24.8371 ],
[ -107.6456, 37.5007 ],
[ -92.5083, 37.5007 ]]}
},
marks: [
//Plot.frame({fill: "#ccc"}),
Plot.geo(states.features, { stroke: "black", strokeWidth:24, dx: -11, dy:10, opacity: .5, filter: d=>d.properties.name == "Texas"}),
Plot.geo(states.features, { fill: "black", stroke: "gray", strokeWidth:.6, opacity: 1, title: d=>d.properties.name}),
Plot.geo(states.features, { fill: "#483c32", stroke: "black", strokeWidth:5, opacity: 1, filter: d=>d.properties.name == "Texas"}),
Plot.dot(tornadoes, Plot.hexbin({fill: "count", r:"count"}, {x: "elon", y: "elat", opacity: 1, filter: d=>d.st == "TX" & d.yr >=2011 & d.yr <= 2020, binWidth: 22, fill: "mag"})),
Plot.text(['Tornadoes\n2011-2020'],{x: -92.5083, y:37.5007, dx:-360, dy: 480, fontSize: 40, fill: "#795c32", opacity: 1, lineHeight: 1.2, textAnchor: "end", fontFamily: "oblique", fontStyle: "italic", fontWeight: "bold"}),
Plot.text(['Texas\nThe\nLone\nStar\nState'],{x: -92.5083, y:37.5007, dx:-430, dy: 160, fontSize: 34, fill: "red", opacity: .8, lineHeight: 1.2, textAnchor: "end" }),
Plot.text(['spc.noaa.gov | Design: Deepsha Menghani | Threads: IandLoveandData | Mastodon: Deepsha'],{x: -92.5083, y:37.5007, dx:-10, dy: 570, fontSize: 14, fill: "gray", opacity: 1, lineHeight: 1.2, textAnchor: "end" }),

],
color: {type: "sequential", legend: false,
label: "Frequency of tornadoes",
range: ["black", "red"],
//scheme: "Reds", reverse: false,
//range: ["white", "black"],
style: {fontSize: 15}, width: 600, ticks: 4},
width: 600,
})
Insert cell
1950-2021_all_tornadoes.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
import {states} from "ff0a83b495637684"
Insert cell
import {Scrubber} from "@mbostock/scrubber"
Insert cell

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.
Learn more