Public
Edited
Apr 29, 2023
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

svg.append("text")
.attr("x", 700)
.attr("y", 120)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.text("Income and Employment Disparity");
// the above code creates the tital
svg.append(legend)
.attr("transform", "translate(700,200)");
// the above code moves the legend.
svg.append("g")
.selectAll("path")
.data(topojson.feature(polygons, polygons.objects.ireland31).features)
.join("path")
.attr("fill", d => color(data.get(d.properties[idAttribute])))
.attr("d", path)
.append("title")
.text(d => `${d.properties[COUNTYNAME]}, ${format(data.get(d.properties[idAttribute]))}`);
// the above code creates a title when a county is hovered over. To add the county name, [COUNTYNAME] is defined in a // cell below.
return svg.node();
}
Insert cell
Insert cell
Insert cell
labels = ["low", "", "high"]

Insert cell
n = Math.floor(Math.sqrt(colors.length))
Insert cell
x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))
Insert cell
y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
//Rotate the map sets the longitude of origin for our UTM projection.
projection = d3.geoTransverseMercator().rotate([90,0]).fitExtent([[10, 10], [width, height]], polygon_features);
Insert cell
polygon_features = topojson.feature(polygons, polygons.objects.ireland31)
Insert cell
data = Object.assign(new Map(d3.csvParse(await FileAttachment("ireland_pop2.csv").text(), ({ESRI_OID,TotalPop, NumHouseholds}) => [+ESRI_OID, [+TotalPop, + NumHouseholds]])), {title: ["Total Pop", "Number of Households"]})
Insert cell
COUNTYNAME= "GEOGDESC"
Insert cell
idAttribute = "ESRI_OID"
Insert cell
Insert cell
polygons = FileAttachment("ireland31.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more