md`Goal`
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(365,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 260,
tickFormat: ".1%"
})
);
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[1]))
// return color(data.get(d.properties.FIPS)[1]);
// })
.attr("fill", d => color(data.get(d.properties.GISJOIN)))
.attr("d", path)
.append("title")
.text(d => " Hispanic Percentage: " + data.get(d.properties.GISJOIN));
return svg.node();
}
Florida_csv_data = d3.csvParse(await FileAttachment("Florida_Counties_Pop.csv").text(),({GISJOIN, Total_pop, White_alone, Black, Hispanic}) => [GISJOIN, Hispanic/Total_pop])
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
Florida = FileAttachment("florida_counties.json").json()
counties = topojson.feature(Florida, Florida.objects.florida_counties)
Hispanic_Pct = Array.from(Florida_csv_data.values(), d => d[1])
data = Object.assign(new Map(Florida_csv_data), {title: "Hispanic Percentage of Florida Counties"})
data.get("G1200860")
YlOrange = [d3.color("#ffffd4"), d3.color("#fed98e"), d3.color("#fe9929"), d3.color("#cc4c02")]
Quantile = d3.scaleQuantile()
.domain(Hispanic_Pct)
.range(["#ffffd4", "#fed98e", "#fe9929", "#cc4c02"])
color = d3.scaleQuantile()
.domain(Quantile)
.range(YlOrange)
width = 720
height = 560
margin = 150
projection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], counties);
color(40)
path = d3.geoPath().projection(projection);
//Florida_Features = topojson.feature(counties, counties.objects.florida_counties);
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.
