format = d => `${d}%`
brevard = FileAttachment("BrevardBlocks.json").json()
block_features = topojson.feature(brevard, brevard.objects.BrevardBlocks)
csv_data = d3.csvParse(await FileAttachment("BrevardCensusData.csv").text(),({BLOCKA, TotalPop, Hispanic}) => [+BLOCKA, +Hispanic/TotalPop])
data = Object.assign(new Map(csv_data), {title: "% Hispanic By Block"})
his_rate = Array.from(csv_data.values(), d => d[1])
YlGnBu = [d3.color("#edf8e9"), d3.color("#bae4b3"), d3.color("#74c476"), d3.color("#31a354"),d3.color("#006d2c")]
clean_rates = his_rate.filter(d => typeof d === "number" && !isNaN(d)); // get rid of the nulls (blocks with no residents)
naturalbreaks = simple.ckmeans(clean_rates, YlGnBu.length).map(v => v.pop()) // visualize blocks with values
color = d3.scaleThreshold()
.domain(naturalbreaks)
.range(YlGnBu)
width = 975
height = 900
margin = 30
projection = d3.geoAlbers().fitExtent([[margin, margin], [width - margin, height - margin]], block_features)
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
data.get(1078)
color(data.get(1078))
color(40)
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.
