D3. Part 1 - HTML, SVG and a Basic Bar ChartD3. Part 1 - Exercise: Bar Chart and Scatter PlotD3. Part 1 - Exercise SolutionD3. Part 2 - Click InteractionD3. Part 2 - Importing and combining ChartsD3. Part 2 - Animated Bar Chart RaceD3. Part 2 - Exercise: Interactive ChartsD3. Part 2 - Exercise SolutionD3. Part 3 - Brushing and LinkingD3. Essentials - selection.join explainedD3. Essentials - ColorD3. Essentials - Further Learning VideosD3. Advanced - Drawing custom Shapes
D3. Advanced - Maps
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg.append("path").attr("d", d3.geoPath(projection)(outlineShape)).attr("fill", "none").attr("stroke", "black")
svg.selectAll("path.country").data(allCountries.features)
.join("path")
.attr("class", "country")
.attr("stroke", "black")
.attr("fill", d => d.properties.name === clickedCountry? "steelblue" : "lightgrey")
.attr("d", mapPath)
.on("click", (event, d) => mutable clickedCountry = d.properties.name);
svg.selectAll("circle.name").data(allCountries.features)
.join("circle")
.attr("class", "name")
.attr("cx", d => mapPath.centroid(d)[0]) // get the center of the shape using geoPath.centroid
.attr("cy", d => mapPath.centroid(d)[1])
.attr("r", 3)
.attr("fill", "red");
return svg.node();
}
mutable clickedCountry = null
projection = d3.geoOrthographic()
mapPath = d3.geoPath(projection)
outlineShape = globe
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width/2, outlineShape)).bounds(outlineShape);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
globe = ({type: "Sphere"})
allCountries = topojson.feature(world, world.objects.countries)
germany = allCountries.features.find(d => d.properties.name === "Germany")
germanyStates = FileAttachment("bundeslaender_mittel.geo.json").json()
germanyLandkreise = FileAttachment("4_niedrig.geo.json").json()
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json")
accidents = d3.dsvFormat(";").parse(await FileAttachment("accidents-bundeslaender@1.csv").text())
topojson = require("topojson-client@3")
d3 = require("d3@6", "d3-geo@2", "d3-geo-projection@3")
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.
