// circleSizeKey = "Max Discharge (Cubic Ft/Second)"
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, 960, 600])
.style("background-color", "#efeeed");
const dateLabel = svg
.append("text")
.attr("x", 960 / 2)
.attr("y", 30)
.attr("text-anchor", "middle")
.attr("font-size", 32)
.attr("font-weight", "bold")
.attr("font-family", "Inter");
// const totalCountLabel = svg
// .append("text")
// .attr("x", width / 2 - 20)
// .attr("y", 50)
// .attr("font-size", 24)
// .attr("font-weight", "bold")
// .attr("font-family", "helvetica");
// const yearCountLabel = svg
// .append("text")
// .attr("x", width / 2 - 20)
// .attr("y", 50)
// .attr("font-size", 16)
// //.attr("font-weight", "bold")
// .attr("font-family", "helvetica");
svg
.append("path")
.datum(topojson.merge(us, us.objects.states.geometries))
.attr("fill", "#ddd")
.attr("d", d3.geoPath());
svg
.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", d3.geoPath());
const rivers = svg
.selectAll("path.river")
.data(us_rivers.features)
.join("path")
.classed("river", true)
.attr("d", d3.geoPath(projection))
// .attr("opacity", 0.3)
.attr("fill", "none")
// .attr("stroke", "#adcae6")
.attr("stroke", "#ccc")
.attr("stroke-width", 0.5);
const g = svg.append("g").attr("fill", "#c60101").attr("stroke", "none");
const dot = g
.selectAll("circle")
.data(data, (d, i) => {
//return d.properties["NID ID"];
return i;
})
.join("circle")
.attr("transform", (d) => `translate(${d})`)
.attr("r", 2.5)
.attr("opacity", 0)
.attr("stroke", "white")
.attr("stroke-width", 0.25);
let previousDate = -Infinity;
return Object.assign(svg.node(), {
update(date) {
dot // enter
.filter((d) => d.date > previousDate && d.date <= date)
.transition()
.duration(3000)
.attr("r", (d) => circleSizeScale(d.properties[circleSizeKey]))
.attr("opacity", 0.82);
//.attr("r", 2.5);
// .attr("r", 25);
dot // exit
.filter((d) => d.date <= previousDate && d.date > date)
.transition()
.attr("r", 2.5)
.attr("opacity", 0);
previousDate = date;
dateLabel.text(d3.utcFormat("%Y")(date));
// yearCountLabel.text(filteredData.length);
}
});
}
// filteredData = _.cloneDeep(data).filter(
// (d) => d.date > -Infinity && d.date <= date
// )
us_rivers = FileAttachment("us_rivers.json").json()
circleSizeScale = d3
.scaleSqrt()
.domain(
d3.extent(data, (d) => {
if (!d) return;
else return d.properties[circleSizeKey];
})
)
.range([1, 22])
update = chart.update(date)
parseDate = d3.utcParse("%Y")
data = hydroelectricDams.features
.filter((d) => {
// filter out dams without year completed
if (!d.properties["Year Completed"]) return false;
else return true;
})
.map((d) => {
const p = projection(d.geometry.coordinates);
if (!p) return false;
// p.rawDate = d.properties["Year Completed"];
const date = d.properties["Year Completed"];
// p.rawDate = date;
p.date = parseDate(date);
p.properties = d.properties;
return p;
})
.sort((a, b) => a.date - b.date)
hydroelectricDams = await FileAttachment("hydroelectric-dams.geojson").json()
projection = d3.geoAlbersUsa().scale(1280).translate([480, 300])
geoPath = d3.geoPath(projection)
states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
nation = topojson.feature(us, us.objects.nation)
counties = topojson.mesh(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))
us = {
const us = await d3.json(
"https://cdn.jsdelivr.net/npm/us-atlas@1/us/10m.json"
);
us.objects.lower48 = {
type: "GeometryCollection",
geometries: us.objects.states.geometries.filter(
(d) => d.id !== "02" && d.id !== "15"
)
};
return us;
}
topojson = require("topojson-client@3")
import { Scrubber } from "@mbostock/scrubber"
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.
