Public
Edited
May 3, 2023
PointMap = {
const svg = d3.create("svg")
.attr("viewBox", [-75, -75, 1200, 610]);
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.states_simple))
.attr("fill", "#d9d9d9")
.attr("d", path_basemap);
svg.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.states_simple, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "#969696")
.attr("stroke-linejoin", "round")
.attr("d", path_basemap);
svg.append("g")
.selectAll("circle")
.data(points.features
.map(d => (d.value = (points.features, d)))
.sort((a, b) => b.value - a.value))
.join("circle")
.attr("r", d => radius)
.attr("fill", d => "#fc9272")
.attr("fill-opacity", 1)
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.append("title")
.text(d => "name")
return svg.node();
}
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 260,
tickFormat: ".1f"
})
);
svg.append("g")
.selectAll("path")
.data(state_features.features)
.join("path")
.attr("stroke", "gray")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", d => color(data.get(d.properties.STATE_NAME)))
.attr("d", path)
.append("title")
.text(d => "Trans Legislation Status" + data.get(d.properties.STATE_NAME));
return svg.node();
}
state_features = topojson.feature(basepolygons, basepolygons.objects.states_simple)
HCAHPS-National.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.
