Public
Edited
Feb 13, 2023
chart = UsStateChoropleth(unemployment, {
id: d => namemap.get(d.name),
value: d => d.rate,
scale: d3.scaleQuantize,
domain: [1, 7],
range: d3.schemeBlues[6],
title: (f, d) => `${f.properties.name}\n${d?.rate}%`
})
unemployment = FileAttachment("unemployment201907.csv").csv({typed: true})
namemap = new Map(states.features.map(d => [d.properties.name, d.id]))
function UsStateChoropleth(data, {
features = states,
borders = statemesh,
width = 975,
height = 610,
...options
} = {}) {
return Choropleth(data, {features, borders, width, height, ...options});
}
key1 = Legend(chart1.scales.color, {title: "Offers Rate"})
chart1 = UsStateChoropleth(chartData, {
id: d => namemap.get(d.state),
value: d => d.rate,
scale: d3.scaleQuantize,
domain: [1, 7],
range: d3.schemeBlues[6],
title: (f, d) => `${f.properties.name}\n${d?.rate}%`
})
chartData = statesData.map(s=> ({state: getStateFullName(s), rate: getRate(s), rank : Math.round(getRate(s) * 10) /10}))
function getRate(s) {
return (filteredData.filter(d => d['Pitchers State'] == s).length / filteredData.length) * 100
}
function getStateFullName(s) {
let arr = statesAbbr.find(st => st.includes(s));
if (!arr) return "District of Columbia"
return arr[0]
}
statesAbbr = [
['Arizona', 'AZ'],
['Alabama', 'AL'],
['Alaska', 'AK'],
['Arkansas', 'AR'],
['California', 'CA'],
['Colorado', 'CO'],
['Connecticut', 'CT'],
['Delaware', 'DE'],
['Florida', 'FL'],
['Georgia', 'GA'],
['Hawaii', 'HI'],
['Idaho', 'ID'],
['Illinois', 'IL'],
['Indiana', 'IN'],
['Iowa', 'IA'],
['Kansas', 'KS'],
['Kentucky', 'KY'],
['Louisiana', 'LA'],
['Maine', 'ME'],
['Maryland', 'MD'],
['Massachusetts', 'MA'],
['Michigan', 'MI'],
['Minnesota', 'MN'],
['Mississippi', 'MS'],
['Missouri', 'MO'],
['Montana', 'MT'],
['Nebraska', 'NE'],
['Nevada', 'NV'],
['New Hampshire', 'NH'],
['New Jersey', 'NJ'],
['New Mexico', 'NM'],
['New York', 'NY'],
['North Carolina', 'NC'],
['North Dakota', 'ND'],
['Ohio', 'OH'],
['Oklahoma', 'OK'],
['Oregon', 'OR'],
['Pennsylvania', 'PA'],
['Rhode Island', 'RI'],
['South Carolina', 'SC'],
['South Dakota', 'SD'],
['Tennessee', 'TN'],
['Texas', 'TX'],
['Utah', 'UT'],
['Vermont', 'VT'],
['Virginia', 'VA'],
['Washington', 'WA'],
['West Virginia', 'WV'],
['Wisconsin', 'WI'],
['Wyoming', 'WY'],]
statesData = [...new Set(filteredData.map(m=> m['Pitchers State']))]
filteredData = rawData.filter(d=> d['Total Deal Amount'] != null && d['Pitchers State'] != null)
rawData = FileAttachment("Shark Tank US dataset.csv").csv({typed: true})
import {howto} from "@d3/example-components"
import {us, states, statemesh, Choropleth, Legend} from "@d3/choropleth"
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.
