25:["$","title",null,{"children":"Tornado alley analysis | Mitchell Thorson | Observable"}] 49:Tf92,timeline = { const width = 900; const height = 1000; const margin = 100; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("background", "#000"); let year_height = 20; let bar_width = 5; let max_bar_height = 100; let all_values = []; tornadoes_by_day_by_year.forEach(yearGroup => { let year_values = yearGroup[1].map(item => item.num_tornadoes); all_values = all_values.concat(year_values) }) // max of 207 in one day const extent = d3.extent(all_values); const bar_scale = d3.scaleLinear() .domain([0, extent[1]]) .range([0, max_bar_height]) const color_scale = d3.scaleThreshold() .domain([5, 10, 20, 35, 55]) .range(["#231151", "#5E177F", "#982C80", "#D3426E", "#F8765C", "#FEBB80"]); let yearScales = new Map(); tornadoes_by_day_by_year.forEach(year => { yearScales.set(year[0], d3.scaleTime() .domain([new Date(year[0], 0, 1), new Date(year[0], 11, 31)]) .range([0, width - (margin * 2)]) ) }) const monthAxis = d3.axisBottom(yearScales.get(1980)) .tickFormat(d3.timeFormat("%b")) .ticks(d3.timeMonth.every(1)); const yearGroups = svg .append('g') .attr('class', 'data-wrap') .attr('transform', `translate(${margin}, ${margin})`) .selectAll('.year-group') .data(tornadoes_by_day_by_year.map(d => d[0])) .enter() .append('g') .attr('class', 'year-group') .attr('transform', (d, i) => { return `translate(0, ${i * year_height + 10})` }) yearGroups.append('rect') .attr('height', 1) .attr('width', (width - (margin * 2))) .attr('fill', 'white') .attr("opacity", 0.25) .attr('x', 0) const dayEntry = yearGroups.selectAll(".day-entry") .data(d => {return tornadoes_by_day_by_year.filter(t => t[0] == d)[0][1]}) .join("g") .attr("class", "day-entry") // dayEntry // .append('rect') // .attr('class', 'data-rect') // .attr('transform', (d, i) => `translate(${yearScales.get(d.year)(d.date_real) - 1}, ${-bar_scale(d.num_tornadoes) - 1})`) // .attr("width", bar_width + 2) // .attr("height", d => { // return bar_scale(d.num_tornadoes) + 1 // }) // .attr('fill', "#000") // .attr('opacity', 0.75); dayEntry .append('rect') .attr('class', 'data-rect') .attr('transform', (d, i) => `translate(${yearScales.get(d.year)(d.date_real)}, ${-bar_scale(d.num_tornadoes)})`) .attr("width", bar_width) .attr("height", d => { return bar_scale(d.num_tornadoes) }) .attr('fill', d => color_scale(d.num_tornadoes)) .attr("opacity", 0.75) // .attr('opacity', d => { // const month = d.date_real.getMonth(); // if(month > 5 || month < 2) { // return .75 // } // return .1; // }); yearGroups.append('text') .text(d => d) .attr('x', -year_height/2 - margin/2) .attr('font-family', 'Unify Sans') .attr("fill", "white") svg.append("g") .attr("transform", `translate(${margin},${tornadoes_by_day_by_year.length * (year_height) + margin - 10})`) .call(monthAxis) let scale_swatch_size = 30; let scaleG = svg.append("g") .attr("transform", `translate(${width /2 - (scale_swatch_size * color_scale.range().length) /2}, 20)`) .attr("class", "scale-g"); scaleG.selectAll("rect") .data(color_scale.range()) .join("rect") .attr("width", scale_swatch_size) .attr("height", scale_swatch_size / 2) .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 0) .attr("fill", d => d) scaleG.selectAll("text") .data([1].concat(color_scale.domain())) .join("text") .text((d,i) => d.toString()) .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 28) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") return svg.node() }4a:Ta95,timeline_heatmap = { const width = 900; const height = 1000; const margin = 100; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("background", "#000"); let chartWidth = width - margin * 2; let year_height = 20; let max_bar_height = 100; let all_values = []; tornadoes_by_day_by_year.forEach(yearGroup => { let year_values = yearGroup[1].map(item => item.num_tornadoes); all_values = all_values.concat(year_values) }) const extent = d3.extent(all_values); const bar_scale = d3.scaleLinear() .domain([0, extent[1]]) .range([0, max_bar_height]) // const color_scale = d3.scaleSequential([0, extent[1] - 120], d3.interpolateInferno); const color_scale = d3.scaleThreshold() .domain([5, 10, 20, 35, 55]) .range(["#231151", "#5E177F", "#982C80", "#D3426E", "#F8765C", "#FEBB80"]); let yearScales = new Map(); tornadoes_by_day_by_year.forEach(year => { yearScales.set(year[0], d3.scaleTime() .domain([new Date(year[0], 0, 1), new Date(year[0], 11, 31)]) .range([0, width - (margin * 2)]) ) }) let bar_width = chartWidth/365; const monthAxis = d3.axisBottom(yearScales.get(1980)) .tickFormat(d3.timeFormat("%b")) .ticks(d3.timeMonth.every(1)); const yearGroups = svg .append('g') .attr('class', 'data-wrap') .attr('transform', `translate(${margin}, ${margin})`) .selectAll('.year-group') .data(tornadoes_by_day_by_year.map(d => d[0])) .enter() .append('g') .attr('class', 'year-group') .attr('transform', (d, i) => { return `translate(0, ${i * year_height + 10})` }) yearGroups .selectAll('.data-rect') .data(d => {return tornadoes_by_day_by_year.filter(t => t[0] == d)[0][1]}) .enter() .append('rect') .attr('class', 'data-rect') .attr('transform', (d, i) => `translate(${yearScales.get(d.year)(d.date_real)}, ${-year_height + 1})`) .attr("width", bar_width) .attr("height", year_height - 1) .attr('fill', d => color_scale(d.num_tornadoes)) .attr('opacity', 1); yearGroups.append('rect') .attr('height', 1) .attr('width', (width - (margin * 2))) .attr('fill', 'white') .attr("opacity", 0.25) .attr('x', 0) .attr("y", -year_height) yearGroups.append('text') .text(d => d) .attr('x', -year_height/2 - margin/2) .attr('font-family', 'Unify Sans') .attr("fill", "white") svg.append("g") .attr("transform", `translate(${margin},${tornadoes_by_day_by_year.length * (year_height) + margin - 10})`) .call(monthAxis) return svg.node() }4b:T999,tornado_path_map = { const width = 1010; const height = 700; const margin = { top: 50, right: 50, bottom: 50, left: 50 } const chartWidth = width - (margin.left + margin.right); const chartHeight = height - (margin.top + margin.bottom); const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]) const path = d3.geoPath() .projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const mapG = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) let state_features = topojson.feature(us, "states").features.filter(d => state_skips.indexOf(d.properties.name) < 0); mapG.selectAll('.state-path') .data(state_features) .join("path") .attr("class", "state-path") .attr('d', path) .attr('fill', 'black') mapG.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "rgb(150, 150, 150)") .attr("stroke-linejoin", "round") .attr("d", path); mapG.append('path') .datum(topojson.feature(us, us.objects.nation)) .attr('d', path) .attr('fill', 'none') .attr("stroke", "rgb(150, 150, 150)") let tornado_features = topojson.feature(tornadoes_topo, "1950-2019_actual_tornadoes_ef1").features; mapG.selectAll(".tornado-path") .data(tornado_features.filter(d => parseInt(d.properties.yr) >= 1950)) .join("path") .attr("d", path) .attr("class", "tornado-path") .attr("stroke", d => tornado_intensity_color_scale(+d.properties.mag)) let tornado_alley_feature = topojson.feature(tornado_alley_topo, "tornado_alley_shape").features mapG.selectAll(".tornado-alley") .data(tornado_alley_feature) .join("path") .attr("d", path) .attr("class", "tornado-alley") .attr("stroke", "white") .attr("stroke-width", 5) .attr("opacity", 0.25) .attr("fill", "none") // mapG.append("g") // .attr("class", "state-labels") // .selectAll("text") // .data(state_points.features) // .join("text") // .attr("x", d => projection(d.geometry.coordinates)[0] - 5) // .attr("y", d => projection(d.geometry.coordinates)[1]) // .text(d => d.properties.abbrev) // .attr("font-family", "Unify Sans") // .attr("fill", "#AFAFAF") // .attr("font-size", "12px") return svg.node() }4c:Tbfc,county_mobile_home = { const width = 1010; const height = 700; const margin = { top: 50, right: 50, bottom: 50, left: 50 } const chartWidth = width - (margin.left + margin.right); const chartHeight = height - (margin.top + margin.bottom); const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]) const path = d3.geoPath() .projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") // .style("background", "black"); const mapG = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) let state_features = topojson.feature(us, "states").features.filter(d => state_skips.indexOf(d.properties.name) < 0); let county_mobile_features = topojson.feature(county_density_mobile_home_pct,"cb_2020_us_county_500k").features // max percentage is 59.4 let county_color_scale = d3.scaleLinear() .domain([1,10,20,30,40]) .range(['#000000', '#2a0d16', '#541a2c', '#7f2842', '#a93558', '#d3426e']) mapG.selectAll(".county_mobile") .data(county_mobile_features.filter(d => state_skips.indexOf(d.properties.state) < 0)) .join("path") .attr("d", path) .attr("class", "county_mobile") .attr("stroke", d => county_color_scale(d.properties.mobile_home_pct)) .attr("fill", d => county_color_scale(d.properties.mobile_home_pct)) // mapG.selectAll('.state-path') // .data(state_features) // .join("path") // .attr("class", "state-path") // .attr('d', path) // .attr('fill', 'none') mapG.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "rgb(150, 150, 150)") .attr("stroke-linejoin", "round") .attr("d", path); mapG.append('path') .datum(topojson.feature(us, us.objects.nation)) .attr('d', path) .attr('fill', 'none') .attr("stroke", "rgb(150, 150, 150)") // mapG.append("path") // .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "rgb(150, 150, 150)") // .attr("stroke-linejoin", "round") // .attr("d", path); let scale_swatch_size = 30; let scaleG = svg.append("g") .attr("transform", `translate(${width /2 - (scale_swatch_size * county_color_scale.range().length) /2}, 20)`) .attr("class", "scale-g"); scaleG.selectAll("rect") .data(county_color_scale.range()) .join("rect") .attr("width", scale_swatch_size) .attr("height", scale_swatch_size / 2) .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 0) .attr("fill", d => d) scaleG.selectAll("text") .data([0].concat(county_color_scale.domain())) .join("text") .text((d,i) => d.toString() + "%") .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 28) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") return svg.node() }4d:Tc44,county_pop_density_map = { const width = 1010; const height = 700; const margin = { top: 50, right: 50, bottom: 50, left: 50 } const chartWidth = width - (margin.left + margin.right); const chartHeight = height - (margin.top + margin.bottom); const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]) const path = d3.geoPath() .projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") // .style("background", "black"); const mapG = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) let state_features = topojson.feature(us, "states").features.filter(d => state_skips.indexOf(d.properties.name) < 0); let county_mobile_features = topojson.feature(county_density_mobile_home_pct,"cb_2020_us_county_500k").features let county_color_scale = d3.scaleThreshold() .domain([25, 50, 100, 200, 500, 1000, 2000, 5000, 10000]) .range(['#000000', '#1c150e', '#382a1c', '#553e2b', '#715339', '#8d6847', '#a97d55', '#c69164', '#e2a672', '#febb80']) mapG.selectAll(".county_mobile") .data(county_mobile_features.filter(d => state_skips.indexOf(d.properties.state) < 0)) .join("path") .attr("d", path) .attr("class", "county_mobile") .attr("stroke", d => county_color_scale(d.properties.pop_dens)) .attr("fill", d => county_color_scale(d.properties.pop_dens)) mapG.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "rgb(150, 150, 150)") .attr("stroke-linejoin", "round") .attr("d", path); // mapG.append('path') // .datum(topojson.feature(us, us.objects.nation)) // .attr('d', path) // .attr('fill', 'none') // .attr("stroke", "rgb(150, 150, 150)") let scale_swatch_size = 30; let scaleG = svg.append("g") .attr("transform", `translate(${width /2 - (scale_swatch_size * county_color_scale.range().length) /2}, 20)`) .attr("class", "scale-g"); scaleG.selectAll("rect") .data(county_color_scale.range()) .join("rect") .attr("width", scale_swatch_size) .attr("height", scale_swatch_size / 2) .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 0) .attr("fill", d => d) scaleG.append("path") .attr("d", "M3.96447 20.6716L7.14645 23.8536C7.34171 24.0488 7.65829 24.0488 7.85356 23.8536L11.0355 20.6716C11.2308 20.4763 11.2308 20.1597 11.0355 19.9645C10.8403 19.7692 10.5237 19.7692 10.3284 19.9645L8 22.2929L8 2.5C8 2.22386 7.77615 2 7.5 2C7.22386 2 7 2.22386 7 2.5L7 22.2929L4.67158 19.9645C4.47631 19.7692 4.15973 19.7692 3.96447 19.9645C3.76921 20.1597 3.76921 20.4763 3.96447 20.6716Z") .attr("fill", "#FFF") .attr("transform", `translate(${scale_swatch_size}, ${40})rotate(-90)scale(1.5)`); scaleG.append("text") .text("denser population") .attr("x", scale_swatch_size) .attr("y", 45) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") return svg.node() }4e:T10c3,historical_tornadoes_by_state = { const width = 1010; const height = 600; const margin = { top: 50, right: 50, bottom: 50, left: 50 } const chartWidth = width - (margin.left + margin.right); const chartHeight = height - (margin.top + margin.bottom); const chart_years = tornado_historical_chart_year_start ? all_years.filter(d => d >= parseInt(tornado_historical_chart_year_start)) : all_years; const chart_max = tornado_historical_chart_year_start ? d3.max(tornadoes_by_state_by_year.filter(d => d.yr >= parseInt(tornado_historical_chart_year_start)), d => d[historical_variable]) : d3.max(tornadoes_by_state_by_year, d => d[historical_variable]) let chart_data = tornadoes_by_state_year_groups.map(([st, entries]) => tornado_historical_chart_year_start ? entries.filter(d => d.yr >= parseInt(tornado_historical_chart_year_start)) : entries) chart_data.forEach(state_data => state_data.sort((a,b) => a.yr - b.yr)) console.log(chart_max) const xScale = d3.scalePoint() .domain(chart_years) .range([0, chartWidth]) const yScale = d3.scaleLinear() .domain([0, chart_max]) .range([chartHeight, 0]) const xAxis = d3.axisBottom(xScale) .tickValues(xScale.domain().filter((yr, i) => i % 2 == 0)) // .tickSize(-chartHeight); const yAxis = d3.axisLeft(yScale) .ticks(6) const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") // .style("background", "black") svg.append("style") .html(chart_style) const chartG = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) const line = d3.line() .x(d => xScale(d.yr)) .y(d => yScale(d[historical_variable])) .curve(d3.curveBumpX); chartG.selectAll("path") .data(chart_data) .join("path") .attr("fill", "none") .attr("stroke", "rgba(100,100,100,0.33)") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); if (tornado_states) { // let state_data = chart_data.filter(d => d[0].st == tornado_state)[0]; // chartG.append("path") // .datum(state_data) // .attr("fill", "none") // .attr("stroke", "#D3426E") // .attr("stroke-width", 10) // .attr("opacity", 0.25) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", line); // let line_color_scale = d3.scaleSequential(d3.interpolateMagma) // .domain([0, tornado_states.length]) let line_color_scale = d3.scaleThreshold() .domain([2,3,4,5]) .range(["#5e177f", "#982c80", "#d3426e", "#f8765c", "#febb80"]) let state_hightlight = chartG.selectAll(".state-highlight") .data(tornado_states) .join("g") .attr("class", "state-highlight") state_hightlight.append("path") .datum(d => chart_data.find(s => s[0].st == d)) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 6) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); state_hightlight.append("path") .datum(d => chart_data.find(s => s[0].st == d)) .attr("fill", "none") .attr("stroke",(d,i) => line_color_scale((i + 2) % line_color_scale.range().length)) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // state_data.sort((a,b) => b.total_tornadoes - a.total_tornadoes) // let top = state_data[state_data.length - 1]; state_hightlight.append("text") .datum(d => chart_data.find(s => s[0].st == d)) .attr("x", d => xScale(d[d.length - 1].yr)) .attr("y", d => yScale(d[d.length - 1][historical_variable])) .attr("dx", 5) .attr("class", "state_label") .text(d => d[d.length - 1].st) } svg.append("g") .attr("transform", `translate(${margin.left},${height - margin.bottom})`) .call(xAxis) svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .call(yAxis) return svg.node() }4f:T11ef,state_tornado_change_map = { const width = 1010; const height = 700; const margin = { top: 50, right: 50, bottom: 50, left: 50 } const chartWidth = width - (margin.left + margin.right); const chartHeight = height - (margin.top + margin.bottom); const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]) const path = d3.geoPath() .projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") // .style("background", "white"); const mapG = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) // const graduated_color_scale = d3.scaleThreshold() // .domain([-200, -100, 0, 100, 200]) // .range(['#5e177f', '#9464aa', '#c9b2d4', '#ffe8d5', '#fed2aa', '#febb80']); // .range(['#5e177f', '#67387d', '#71597c', '#a6907c', '#d2a57e', '#febb80']); const graduated_color_scale = d3.scaleThreshold() .domain([0, 10, 25, 50, 100, 200]) .range(['#000000', '#190715', '#330f2b', '#4c1640', '#651d55', '#7f256b', '#982c80']); ; const solid_color_scale = d3.scaleThreshold() .domain([0]) .range(['#5e177f','#febb80']) const color_scale = scale_choice == "solid" ? solid_color_scale : graduated_color_scale; // const color_scale = d3.scaleDiverging(d3.interpolatePiYG) // .domain([-1, 0, 1]) mapG.selectAll(".state-path") .data(topojson.feature(us, us.objects.states).features.filter(d => state_skips.indexOf(d.properties.name) < 0)) .join("path") .attr("class", "state-path") .attr("fill", d => { let state_abbr = state_abbr_lookup[d.properties.name] if (state_abbr) { let data = tornadoes_by_era_by_state.find(d => d.st == state_abbr) if (data) { console.log(data.st) console.log(data.diff) return color_scale(data.diff) } else { return "#000000" } } }) .attr("stroke", "rgba(255,255,255,0.25)") .attr("stroke-linejoin", "round") .attr("d", path); // mapG.append("path") // .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "rgba(255,255,255,0.25)") // .attr("stroke-linejoin", "round") // .attr("d", path); let scale_swatch_size = 30; let scaleG = svg.append("g") .attr("transform", `translate(${width /2 - (scale_swatch_size * color_scale.range().length) /2}, 20)`) .attr("class", "scale-g"); scaleG.selectAll("rect") .data(color_scale.range()) .join("rect") .attr("width", scale_swatch_size) .attr("height", scale_swatch_size / 2) .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 0) .attr("fill", d => d) scaleG.append("rect") .attr("height", scale_swatch_size / 2) .attr("width", scale_swatch_size * color_scale.range().length) .attr("x", 0) .attr("y", 0) .attr("fill", "none") .attr("stroke", "#a7a7a7") scaleG.append("path") .attr("d", "M3.96447 20.6716L7.14645 23.8536C7.34171 24.0488 7.65829 24.0488 7.85356 23.8536L11.0355 20.6716C11.2308 20.4763 11.2308 20.1597 11.0355 19.9645C10.8403 19.7692 10.5237 19.7692 10.3284 19.9645L8 22.2929L8 2.5C8 2.22386 7.77615 2 7.5 2C7.22386 2 7 2.22386 7 2.5L7 22.2929L4.67158 19.9645C4.47631 19.7692 4.15973 19.7692 3.96447 19.9645C3.76921 20.1597 3.76921 20.4763 3.96447 20.6716Z") .attr("fill", "#FFF") .attr("transform", `translate(${25}, ${17.5})rotate(90)scale(1.5)`); scaleG.append("path") .attr("d", "M3.96447 20.6716L7.14645 23.8536C7.34171 24.0488 7.65829 24.0488 7.85356 23.8536L11.0355 20.6716C11.2308 20.4763 11.2308 20.1597 11.0355 19.9645C10.8403 19.7692 10.5237 19.7692 10.3284 19.9645L8 22.2929L8 2.5C8 2.22386 7.77615 2 7.5 2C7.22386 2 7 2.22386 7 2.5L7 22.2929L4.67158 19.9645C4.47631 19.7692 4.15973 19.7692 3.96447 19.9645C3.76921 20.1597 3.76921 20.4763 3.96447 20.6716Z") .attr("fill", "#FFF") .attr("transform", `translate(${scale_swatch_size + 2}, ${40})rotate(-90)scale(1.5)`); scaleG.append("text") .text("increase") .attr("x", scale_swatch_size + 4) .attr("y", 45) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") scaleG.append("text") .text("decrease") .attr("x", -30) .attr("y", 45) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") return svg.node() }50:T10a5,state_tornado_death_change_map = { const width = 1010; const height = 700; const margin = { top: 50, right: 50, bottom: 50, left: 50 } const chartWidth = width - (margin.left + margin.right); const chartHeight = height - (margin.top + margin.bottom); const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]) const path = d3.geoPath() .projection(projection); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") // .style("background", "black"); const mapG = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) const graduated_color_scale = d3.scaleThreshold() .domain([0, 2, 5, 10, 20, 50]) // .range(['#000000', '#2a1f15', '#553e2b', '#7f5e40', '#a97d55', '#d49c6b', '#febb80']); .range(['#000000', '#100415', '#1f082a', '#2f0c40', '#3f0f55', '#4e136a', '#5e177f']); // const graduated_color_scale = d3.scaleThreshold() // .domain([0, 100, 200]) // .range(['#e3e3e3', '#fdd1c9', '#faa492', '#f8765c']); const solid_color_scale = d3.scaleThreshold() .domain([0]) .range(['#5e177f','#febb80']) const color_scale = scale_choice == "solid" ? solid_color_scale : graduated_color_scale; // const color_scale = d3.scaleDiverging(d3.interpolatePiYG) // .domain([-1, 0, 1]) mapG.selectAll(".state-path") .data(topojson.feature(us, us.objects.states).features.filter(d => state_skips.indexOf(d.properties.name) < 0)) .join("path") .attr("class", "state-path") .attr("fill", d => { let state_abbr = state_abbr_lookup[d.properties.name] if (state_abbr) { let data = tornadoes_by_era_by_state.find(d => d.st == state_abbr) if (data) { return color_scale(data.death_diff) } else { return "#000000" } } }) .attr("stroke", "rgba(255,255,255,0.25)") .attr("stroke-linejoin", "round") .attr("d", path); let scale_swatch_size = 30; let scaleG = svg.append("g") .attr("transform", `translate(${width /2 - (scale_swatch_size * color_scale.range().length) /2}, 20)`) .attr("class", "scale-g"); scaleG.selectAll("rect") .data(color_scale.range()) .join("rect") .attr("width", scale_swatch_size) .attr("height", scale_swatch_size / 2) .attr("x", (d,i) => i * scale_swatch_size) .attr("y", 0) .attr("fill", d => d) scaleG.append("rect") .attr("height", scale_swatch_size / 2) .attr("width", scale_swatch_size * color_scale.range().length) .attr("x", 0) .attr("y", 0) .attr("fill", "none") .attr("stroke", "#a7a7a7") scaleG.append("path") .attr("d", "M3.96447 20.6716L7.14645 23.8536C7.34171 24.0488 7.65829 24.0488 7.85356 23.8536L11.0355 20.6716C11.2308 20.4763 11.2308 20.1597 11.0355 19.9645C10.8403 19.7692 10.5237 19.7692 10.3284 19.9645L8 22.2929L8 2.5C8 2.22386 7.77615 2 7.5 2C7.22386 2 7 2.22386 7 2.5L7 22.2929L4.67158 19.9645C4.47631 19.7692 4.15973 19.7692 3.96447 19.9645C3.76921 20.1597 3.76921 20.4763 3.96447 20.6716Z") .attr("fill", "#FFF") .attr("transform", `translate(${25}, ${17.5})rotate(90)scale(1.5)`); scaleG.append("path") .attr("d", "M3.96447 20.6716L7.14645 23.8536C7.34171 24.0488 7.65829 24.0488 7.85356 23.8536L11.0355 20.6716C11.2308 20.4763 11.2308 20.1597 11.0355 19.9645C10.8403 19.7692 10.5237 19.7692 10.3284 19.9645L8 22.2929L8 2.5C8 2.22386 7.77615 2 7.5 2C7.22386 2 7 2.22386 7 2.5L7 22.2929L4.67158 19.9645C4.47631 19.7692 4.15973 19.7692 3.96447 19.9645C3.76921 20.1597 3.76921 20.4763 3.96447 20.6716Z") .attr("fill", "#FFF") .attr("transform", `translate(${scale_swatch_size + 2}, ${40})rotate(-90)scale(1.5)`); scaleG.append("text") .text("increase") .attr("x", scale_swatch_size + 4) .attr("y", 45) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") scaleG.append("text") .text("decrease") .attr("x", -30) .attr("y", 45) .attr("fill", "white") .attr("font-size", "12px") .attr("font-family", "'Unify Sans', sans-serif") return svg.node() }51:T442,tornadoes_by_state_by_year = { let torn_year_st = tidy(tornadoes_ef1, groupBy(["st", "yr"], [ summarize({ total_tornadoes: n(), total_deaths: sum("fat_int"), fatal_tornadoes: sum("is_fatal") }) ])); let out = []; let years = d3.groups(torn_year_st, d => d.yr); years.forEach(([year, entries]) => { entries.sort((a,b) => d3.descending(a.total_tornadoes, b.total_tornadoes)).forEach((d,i) => { d.rank = i + 1; d.yr = parseInt(d.yr); out.push(d) }); }); let all_years = years.map(([year, entries]) => year); let all_states = d3.groups(torn_year_st, d => d.st).map(([state, entries]) => state); all_years.forEach(year => { all_states.forEach(state => { let entry = out.find(d => d.st == state && d.yr == year); if (!entry) { let replacement_entry = { st: state, yr: parseInt(year), total_tornadoes: 0, total_deaths: 0, fatal_tornadoes: 0, rank: null } out.push(replacement_entry) } }) }) return out; }52:Ta65,state_names_abbreviations = [ { 'full_name':'Alabama', 'postal': 'AL' }, { 'full_name':'Alaska', 'postal': 'AK'}, { 'full_name':'American Samoa', 'postal': 'AS'}, { 'full_name':'Arizona', 'postal': 'AZ'}, { 'full_name':'Arkansas', 'postal': 'AR'}, { 'full_name':'California', 'postal': 'CA'}, { 'full_name':'Colorado', 'postal': 'CO'}, { 'full_name':'Connecticut', 'postal': 'CT'}, { 'full_name':'Delaware', 'postal': 'DE'}, { 'full_name':'District of Columbia', 'postal': 'DC'}, { 'full_name':'States of Micronesia', 'postal': 'FM'}, { 'full_name':'Florida', 'postal': 'FL'}, { 'full_name':'Georgia', 'postal': 'GA'}, { 'full_name':'Guam', 'postal': 'GU'}, { 'full_name':'Hawaii', 'postal': 'HI'}, { 'full_name':'Idaho', 'postal': 'ID'}, { 'full_name':'Illinois', 'postal': 'IL'}, { 'full_name':'Indiana', 'postal': 'IN'}, { 'full_name':'Iowa', 'postal': 'IA'}, { 'full_name':'Kansas', 'postal': 'KS'}, { 'full_name':'Kentucky', 'postal': 'KY'}, { 'full_name':'Louisiana', 'postal': 'LA'}, { 'full_name':'Maine', 'postal': 'ME'}, { 'full_name':'Marshall Islands', 'postal': 'MH'}, { 'full_name':'Maryland', 'postal': 'MD'}, { 'full_name':'Massachusetts', 'postal': 'MA'}, { 'full_name':'Michigan', 'postal': 'MI'}, { 'full_name':'Minnesota', 'postal': 'MN'}, { 'full_name':'Mississippi', 'postal': 'MS'}, { 'full_name':'Missouri', 'postal': 'MO'}, { 'full_name':'Montana', 'postal': 'MT'}, { 'full_name':'Nebraska', 'postal': 'NE'}, { 'full_name':'Nevada', 'postal': 'NV'}, { 'full_name':'New Hampshire', 'postal': 'NH'}, { 'full_name':'New Jersey', 'postal': 'NJ'}, { 'full_name':'New Mexico', 'postal': 'NM'}, { 'full_name':'New York', 'postal': 'NY'}, { 'full_name':'North Carolina', 'postal': 'NC'}, { 'full_name':'North Dakota', 'postal': 'ND'}, { 'full_name':'Northern Mariana Islands', 'postal': 'MP'}, { 'full_name':'Ohio', 'postal': 'OH'}, { 'full_name':'Oklahoma', 'postal': 'OK'}, { 'full_name':'Oregon', 'postal': 'OR'}, { 'full_name':'Palau', 'postal': 'PW'}, { 'full_name':'Pennsylvania', 'postal': 'PA'}, { 'full_name':'Puerto Rico', 'postal': 'PR'}, { 'full_name':'Rhode Island', 'postal': 'RI'}, { 'full_name':'South Carolina', 'postal': 'SC'}, { 'full_name':'South Dakota', 'postal': 'SD'}, { 'full_name':'Tennessee', 'postal': 'TN'}, { 'full_name':'Texas', 'postal': 'TX'}, { 'full_name':'Utah', 'postal': 'UT'}, { 'full_name':'Vermont', 'postal': 'VT'}, { 'full_name':'United States Virgin Islands', 'postal': 'VI'}, { 'full_name':'Virginia', 'postal': 'VA'}, { 'full_name':'Washington', 'postal': 'WA'}, { 'full_name':'West Virginia', 'postal': 'WV'}, { 'full_name':'Wisconsin', 'postal': 'WI'}, { 'full_name':'Wyoming', 'postal': 'WY'} ];53:[{"id":"7cc2dc21df911f868527b2f316242fb43ddd2a7fdd34d4696ae7226dab0934b7d19ef4e3278aa58183ee70a1099a51e9cec818e818db72ae7d53d34dad83f3d6","href":"https://static.observableusercontent.com/files/7cc2dc21df911f868527b2f316242fb43ddd2a7fdd34d4696ae7226dab0934b7d19ef4e3278aa58183ee70a1099a51e9cec818e818db72ae7d53d34dad83f3d6","name":"1950-2019_actual_tornadoes_ef1_topo@3.json","type":"application/json","lastModified":1623249203263.491,"size":9157459},{"id":"502b97408adf7609c2afbf403e38afccfe6c2ee656a2085c0a01dd5a496b7d1a62e4b272c2a349e79973b55099a0e56ac9c2d7703009593add2e09dce3b34a03","href":"https://static.observableusercontent.com/files/502b97408adf7609c2afbf403e38afccfe6c2ee656a2085c0a01dd5a496b7d1a62e4b272c2a349e79973b55099a0e56ac9c2d7703009593add2e09dce3b34a03","name":"1950-2019_actual_tornadoes.csv","type":"text/csv","lastModified":1621883373266.48,"size":7196716},{"id":"009d0bac5c4f5943c9595260b8c47fdf1b2271aec16f9876ca7609d7184b61f34d666a3a3cced3033011799519e9195b2eb7639293f80356a92660f2ec93b5c2","href":"https://static.observableusercontent.com/files/009d0bac5c4f5943c9595260b8c47fdf1b2271aec16f9876ca7609d7184b61f34d666a3a3cced3033011799519e9195b2eb7639293f80356a92660f2ec93b5c2","name":"county_with_density_mobile_topo@3.json","type":"application/json","lastModified":1623690957019.96,"size":2125826},{"id":"75b9b610b52f4b1520b02d71f6d8239e8dbe9d1e31874a7900a60492b8c5d1c16ad4308881abddca2f7033da72a70568c2d24e61caa3f0354ee674cc0612de40","href":"https://static.observableusercontent.com/files/75b9b610b52f4b1520b02d71f6d8239e8dbe9d1e31874a7900a60492b8c5d1c16ad4308881abddca2f7033da72a70568c2d24e61caa3f0354ee674cc0612de40","name":"tornado_alley_topo.json","type":"application/json","lastModified":1623260896877.333,"size":918}] 29:{"id":"82cb928b89bcee11","slug":null,"title":"Tornado alley analysis","thumbnail":"b96db329c48670d62966c222fc60e795690442f9714868fee0fe86245bed3a53","access_level":"public","create_time":"$D2021-05-24T19:06:44.425Z","update_time":"$D2023-03-16T17:06:10.877Z","view_time":null,"first_public_time":"$D2023-02-18T22:39:42.209Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0960ff47f6bc85df","login":"mitchthorson","name":"Mitchell Thorson","avatar_url":"https://avatars-next.observableusercontent.com/e8365fa37d2b44588fea3209ea02b8038f73e927e25e21022a44d4c91f4de959","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1302,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5dbade09d97bf642","login":"mitchthorson","name":"Mitchell Thorson","avatar_url":"https://avatars-next.observableusercontent.com/e8365fa37d2b44588fea3209ea02b8038f73e927e25e21022a44d4c91f4de959","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5dbade09d97bf642","login":"mitchthorson","name":"Mitchell Thorson","avatar_url":"https://avatars-next.observableusercontent.com/e8365fa37d2b44588fea3209ea02b8038f73e927e25e21022a44d4c91f4de959","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tornado alley analysis","cells":[{"id":0,"value":"md`# Tornado alley analysis\n\n\nThis is an exploration of historical tornado data from [NOAA's Storm Prediction Center](https://www.spc.noaa.gov/wcm/). A description of the fields in the data can be found [here](https://www.spc.noaa.gov/wcm/data/SPC_severe_database_description.pdf). \n\nSome of these visualizations were published as part of a story for USA Today on 6/17/2021: ['Tornado Alley' is expanding: Southern states see more twisters now than ever before](https://www.usatoday.com/in-depth/graphics/2021/06/17/how-expansion-tornado-alley-affect-more-southern-states/7689547002/) by Dinah Voyles Pulver, Mitchell Thorson, Ramon Padilla, Stephen J. Beard, Doyle Rice, and Shawn J. Sullivan`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`## Timeline of tornadoes per day from 1980-2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`## All tornadoes EF1 or higher from 1950-2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"md`## Percentage of mobile homes by county\nMobile homes represent an additional risk factor when dealing with tornadoes. Southeastern states, which are seeing more tornadoes have many counties with larger percentages of mobile and manufactored housing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`## Population density by county\nDenser populated areas represent higher risk`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`## States with the largest increase in number of tornadoes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.link(tornadoes_by_era_by_state.slice(0, 10), {\n x1: 0,\n y1: \"total_80_99\",\n x2: 1,\n y2: \"total_00_19\",\n stroke: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state.slice(0, 10), {\n x: 1,\n y: \"total_00_19\",\n dx: 10,\n text: \"st\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md`## Change in state ranks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"Plot.plot({\n height: 800,\n y: {\n grid: true,\n domain: [50, 1],\n ticks: false\n },\n marks: [\n Plot.link(tornadoes_by_era_by_state, {\n x1: 0,\n y1: \"rank_80_99\",\n x2: 1,\n y2: \"rank_00_19\",\n stroke: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state, {\n x: 1,\n y: \"rank_00_19\",\n dx: 10,\n text: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state, {\n x: 0,\n y: \"rank_80_99\",\n dx: -20,\n text: \"st\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`## States with most nighttime tornadoes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"Plot.plot({\n y: {\n domain: d3.sort(tornadoes_by_era_by_state_since_1980, d => -d.total_night).map(d => d.st)\n },\n x: {\n grid: true\n },\n marks: [\n Plot.barX(tornadoes_by_era_by_state_since_1980, {y: \"st\", x: \"total_night\", fill: \"coral\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`## Shifts in nighttime tornadoes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"Plot.plot({\n y: {\n grid: true,\n // axis: null\n },\n x: {\n axis: null\n },\n marginRight: 30,\n marginLeft: 30,\n marginTop: 30,\n marginBottom: 30,\n marks: [\n Plot.link(tornadoes_by_era_by_state_since_1980.slice(0, 3), {\n x1: 0,\n y1: \"night_80_99\",\n x2: 1,\n y2: \"night_00_19\",\n stroke: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state_since_1980.slice(0, 3), {\n x: 1,\n y: \"night_00_19\",\n dx: 10,\n text: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state_since_1980.slice(0, 3), {\n x: 0,\n y: \"night_80_99\",\n dx: 5,\n dy: -5,\n text: \"st\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"Plot.plot({\n y: {\n grid: true,\n // axis: null\n },\n x: {\n axis: null\n },\n marginRight: 30,\n marginLeft: 30,\n marginTop: 30,\n marginBottom: 30,\n marks: [\n Plot.link(tornadoes_by_era_by_state_since_1980.slice(tornadoes_by_era_by_state_since_1980.length - 3), {\n x1: 0,\n y1: \"night_80_99\",\n x2: 1,\n y2: \"night_00_19\",\n stroke: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state_since_1980.slice(tornadoes_by_era_by_state_since_1980.length - 3), {\n x: 1,\n y: \"night_00_19\",\n dx: 10,\n text: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state_since_1980.slice(tornadoes_by_era_by_state_since_1980.length - 3), {\n x: 0,\n y: \"night_80_99\",\n dx: 5,\n dy: -5,\n text: \"st\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"Plot.plot({\n y: {\n grid: true,\n axis: null\n },\n x: {\n axis: null\n },\n marginRight: 30,\n marginLeft: 30,\n marginTop: 30,\n marginBottom: 30,\n marks: [\n Plot.link(tornadoes_by_era_by_state_since_1980.slice(39), {\n x1: 0,\n y1: \"night_80_99\",\n x2: 1,\n y2: \"night_00_19\",\n stroke: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state_since_1980.slice(39), {\n x: 1,\n y: \"night_00_19\",\n dx: 10,\n text: \"st\"\n }),\n Plot.text(tornadoes_by_era_by_state_since_1980.slice(39), {\n x: 0,\n y: \"night_80_99\",\n dx: 5,\n dy: -5,\n text: \"st\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"md`## Historical tornadoes by state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"md`Begining in year:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"viewof tornado_historical_chart_year_start = Inputs.select(all_years.map(yr => yr.toString()), {value: \"1980\", label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"viewof tornado_states = Inputs.select(state_names_abbreviations.map(st => st.postal), {label: \"State\", value: [\"AL\", \"MS\", \"KY\"], multiple: 3, size:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"viewof historical_variable = Inputs.radio([\"total_tornadoes\", \"total_deaths\"], {label: \"Variable\", format: x => x, value: \"total_tornadoes\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"md`## States that saw more or fewer tornadoes in recent decades`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"viewof scale_choice = Inputs.select([\"solid\", \"graduated\"], {label: \"Color\", value: \"graduated\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"md`## States that saw more or fewer deaths due to tornadoes in recent decades`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"chart_style = `\n svg {\n background: black;\n }\n .domain {\n stroke: #ADADAD;\n }\n .tick text {\n fill: #ADADAD;\n font-family: \"Unify Sans\", sans-serif;\n }\n .tick line {\n stroke: #ADADAD;\n }\n .state_label {\n fill: white;\n font-family: sans-serif;\n font-size: 12px;\n font-weight: bold;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`## Data and libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`Raw historical tornado data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"state_skips = [\"Alaska\", \"United States Virgin Islands\", \"Hawaii\", \"Puerto Rico\", \"Guam\", \"American Samoa\", \"Commonwealth of the Northern Mariana Islands\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"tornado_intensity_color_scale = d3.scaleOrdinal()\n .domain([1,2,3,4,5])\n .range([\"#5E177F\", \"#982C80\", \"#D3426E\", \"#F8765C\", \"#FEBB80\"]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"tornadoes = (await FileAttachment(\"1950-2019_actual_tornadoes.csv\").csv()).map(d => {\n let time_split = d.time.split(\":\");\n let hour_int = parseInt(time_split[0]);\n let night = hour_int > 21 || hour_int < 7 ? 1 : 0;\n let fatalaties = parseInt(d.fat);\n return Object.assign({}, d, {\n date_real: new Date(d.date),\n yr_int: parseInt(d.yr),\n mo_int: parseInt(d.mo),\n dy_int: parseInt(d.dy),\n hour_int,\n mag: parseInt(d.mag),\n night: night,\n time_of_day: night ? \"night\" : \"day\",\n fat_int: fatalaties,\n is_fatal: fatalaties > 0 ? 1 : 0\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"tornadoes_topo = await FileAttachment(\"1950-2019_actual_tornadoes_ef1_topo@3.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"tornadoes_by_day_by_year = tidy(\n tornadoes_by_day.filter(d => d.year >= 1980),\n groupBy('year', groupBy.entries())\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"tornadoes_by_day = tidy(\n tornadoes,\n groupBy('date', [\n summarize({ num_tornadoes: n() })\n ])\n).map(d => Object.assign({}, d, {date_real: new Date(d.date), year: new Date(d.date).getFullYear()}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"tornadoes_99_19 = tornadoes.filter(d => d.yr_int > 1998)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"tornadoes_80_99 = tornadoes.filter(d => d.yr_int >= 1980 && d.yr_int < 1999)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"tornadoes_with_split_counts = tidy(tornadoes_ef1, mutate({\n count_80_99: (d) => d.yr_int >= 1980 && d.yr_int < 2000 ? 1 : 0,\n count_00_19: (d) => d.yr_int >= 2000 ? 1 : 0,\n night_80_99: (d) => d.yr_int >= 1980 && d.yr_int < 2000 && d.night == 1 ? 1 : 0,\n night_00_19: (d) => d.yr_int >= 2000 && d.night == 1 ? 1 : 0,\n deaths_80_99: (d) => d.yr_int >= 1980 && d.yr_int < 2000 ? parseInt(d.fat) : 0,\n deaths_00_19: (d) => d.yr_int >= 2000 ? d.fat_int : 0,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"tornadoes_by_era_by_state = tidy(tornadoes_with_split_counts, groupBy(\"st\", [\n summarize({\n total_tornadoes: n(),\n total_night: sum(\"night\"),\n total_80_99: sum(\"count_80_99\"),\n total_00_19: sum(\"count_00_19\"),\n night_80_99: sum(\"night_80_99\"),\n night_00_19: sum(\"night_00_19\"),\n total_deaths: sum(\"fat_int\"),\n deaths_80_99: sum(\"deaths_80_99\"),\n deaths_00_19: sum(\"deaths_00_19\")\n }),\n mutate({\n diff: d => d.total_00_19 - d.total_80_99,\n death_diff: d => d.deaths_00_19 - d.deaths_80_99\n })]), \n arrange(desc(\"total_80_99\")),\n mutateWithSummary({\n rank_80_99: cumsum(d => 1)\n }),\n arrange(desc(\"total_00_19\")),\n mutateWithSummary({\n rank_00_19: cumsum(d => 1)\n }),\n arrange(desc(\"diff\"))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"tornadoes_by_era_by_state_since_1980 = tidy(tornadoes_with_split_counts.filter(d => d.yr_int > 1979), groupBy(\"st\", [\n summarize({\n total_tornadoes: n(),\n total_night: sum(\"night\"),\n total_80_99: sum(\"count_80_99\"),\n total_00_19: sum(\"count_00_19\"),\n night_80_99: sum(\"night_80_99\"),\n night_00_19: sum(\"night_00_19\"),\n deaths_80_99: sum(\"deaths_80_99\"),\n deaths_00_19: sum(\"deaths_00_19\")\n }),\n mutate({\n diff: d => d.total_00_19 - d.total_80_99,\n night_diff: d => d.night_00_19 - d.night_80_99,\n death_diff: d => d.deaths_00_19 - d.deaths_80_99\n })]), arrange(desc(\"diff\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"tornadoes_ef1 = tornadoes.filter(d => d.mag >= 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"tornadoes_by_state_year_groups = d3.groups(tornadoes_by_state_by_year, d => d.st)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"all_years = d3.range(1950, 2020)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"all_ranks = d3.range(d3.max(tornadoes_by_state_by_year, d => d.rank))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"tornadoes_for_analysis = tornadoes_ef1.filter(d => d.yr_int >= 1980)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"tornado_day_night_summary = tidy(tornadoes.filter(d => d.yr_int >= 1980), groupBy(\"time_of_day\", [\n summarize({\n total_tornadoes: n(),\n total_fatalaties: sum(\"fat\"),\n fatal_tornadoes: sum(\"is_fatal\")\n })\n]),\n mutate({\n pct_fatal: d => d.fatal_tornadoes / d.total_tornadoes,\n fatalaties_per_tornado: d => d.total_fatalaties / d.total_tornadoes\n}) \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"tornadoes_w_daynight = tidy(tornadoes_ef1, mutate({\n time_of_day: d => d.night ? \"night\" : \"day\",\n is_fatal: d => d.fat_int > 0 ? 1 : 0\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"state_points = await d3.json(\"https://gist.githubusercontent.com/mitchthorson/9b51e8aa45f062f97fa4c0e4302edb70/raw/ceb7d23821696e109d33a3c793d8c79b69e29f5a/us_state_points_geo.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"us = fetch(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {\n tidy,\n startsWith,\n groupBy,\n summarize,\n sum,\n mutate,\n select,\n n,\n mean,\n everything,\n arrange,\n desc,\n filter,\n rate,\n TMath,\n pivotWider,\n pivotLonger,\n leftJoin,\n count,\n map,\n complete,\n fill,\n cumsum,\n mutateWithSummary\n} from '@pbeshai/tidyjs' // observable import","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"county_density_mobile_home_pct = await FileAttachment(\"county_with_density_mobile_topo@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"tornado_alley_topo = await FileAttachment(\"tornado_alley_topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"state_name_lookup = {\n let lookup = {};\n state_names_abbreviations.forEach(d => {\n lookup[d.postal] = d.full_name\n })\n return lookup\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"state_abbr_lookup = {\n let lookup = {};\n state_names_abbreviations.forEach(d => {\n lookup[d.full_name] = d.postal\n })\n return lookup\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"topojson = require(\"topojson-client\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"import { gradientLinear } from \"@washpostgraphics/gradient-generators\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 24:null