updateMap = {
// Highlight the circles on the map that we just selected
d3.select(viewof map).selectAll("circle")
.filter(d => {return tree.map(d => d.name).includes(+d.OBJECTID)})
.transition()
.attr("opacity", 1)
.attr("r", 20)
// Return the unselected circles on the map to their original state
d3.select(viewof map).selectAll("circle")
.filter(d => {return !tree.map(d => d.name).includes(+d.OBJECTID)})
.transition()
.attr("opacity", .5)
.attr("r", 5);
// Set the labels (school names) and colors for the terminal nodes
const chart = d3.select(viewof mychart);
chart.selectAll("text").filter(d => d.depth == 3).text(d => schoolNames.get(d.data.name.toString()));
chart.selectAll("circle").filter(d => d.depth == 3).transition().attr("fill", "crimson");
}
map
import {viewof chart as tree} with {width as width} from "77ce9578be89bb86"
schoolNames = {
// Create a map from OBJECTID to Name -- used for labels
const mymap = new Map();
schools.forEach(d => { mymap.set(d.OBJECTID, d.Name) });
return mymap;
}
schools // We do a little filtering so these should be only the universities
viewof schools = Inputs.table(schools_csv, {
value: schools_csv.filter(d => d.Name.includes("iversity")),
multiple: true
})
schools_csv = FileAttachment("Maine_Schools_GeoLibrary.csv").csv()
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.
