scale = d3
.scaleLinear()
.domain(d3.extent(zip_code, (d) => d.properties.percent))
.range([0, 17])
{
const container = html`<div">
<style>
div.tooltip {
position: fixed;
display: none;
padding: 12px 6px;
background: #fff;
border: 1px solid #333;
pointer-events: none;
}
</style>
</div>`;
const height = 900;
const path = d3
.geoPath()
.projection(
d3
.geoConicConformal()
.parallels([33, 45])
.rotate([96, -39])
.fitSize([width, height], zip_code_040114)
);
const svg = d3
.select(container)
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "#fff")
.style("font", "10px sans-serif");
const div = svg.append("div").classed("tooltip", true);
const zipcodes = svg
.selectAll(".zips")
.data(zip_code)
.enter()
.append("path")
.style("fill", (d) => {
return "orange";
})
.attr("d", (d) => {
return path(d);
})
.style("stroke", "lightgrey")
.style("fill-opacity", 0.3)
.style("stroke-width", 0.7)
.style("stroke-opacity", 0.2);
const circle = svg
.selectAll("circle")
.data(zip_code)
.enter()
.append("circle")
.attr("transform", function (d) {
return "translate(" + path.centroid(d) + ")";
})
.attr("r", (d, i) => {
return scale(d.properties.percent);
})
.style("fill", "orange")
.on("mouseover", function (e, d) {
d3.select(this).style("fill", "red");
div
.style("top", e.clientY + "px")
.style("left", e.clientX + "px")
.style("display", "block");
})
.on("mouseout", function (e, d) {
d3.select(this).style("fill", "orange");
});
circle.append("title").text((d) => d.properties.ZIPCODE);
return container;
}
zip_code_040114 = FileAttachment("zip_code_040114-1.geojson").json()
zip_code = zip_code_040114.features
.map((d) => {
const zipcode = +d.properties.ZIPCODE;
const find = marshal_zips.find((i) => +i.evictionzip === zipcode);
d.properties.count = find?.count ?? 0;
d.properties.percent =
(d.properties.count / d.properties.POPULATION) * 1000;
return d;
})
.filter((d) => d.properties.percent < Infinity)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
output@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
