BC School Districts

Gist 062e2198aa30fcbc94657e1e50de22e5

This interactive line chart uses D3.js to show grade-to-grade transition rates for British Columbia school students, with dropdown menus to select a demographic group and a comparison group. An animated slider scrubs through school years, triggering a brush interaction that updates the chart display. The visualization relies on D3’s time scale, linear scale for the slider, and SVG axes, while Bootstrap and Bootstrap Select handle the interface styling. The data appears to be sourced from the BC Ministry of Education’s public dataset on grade transitions.

Gist 40ca15ac0d6b9529e05fcfa15e22928d

This interactive map of British Columbia’s regional districts shows municipal solid waste disposal rates in kilograms per capita for 2014, with districts colored by a threshold scale. Hovering over a district reveals its exact rate, while a bar chart displays historical disposal trends for the selected region. The visualization uses D3.js with `d3.geo.path` and TopoJSON to render the map, and it dynamically updates a bar chart and line graph from the CSV dataset. Tooltips provide contextual population and tonnage figures on demand.

Gist 69526c10c61369e9ebc7f2479ab96375

This example renders a choropleth map of British Columbia’s regional districts from a TopoJSON file, coloring each polygon by its `FEATURE_AREA_SQM` property. The visualization uses a custom `d3.geoPath` projection to draw district boundaries and a sequential color scale to encode area. Hover effects are implemented through a `transition.attrTween` that animates the fill color on selection, while a tooltip displays the district name and area. The map is composed using D3’s topology and geometry APIs, with the data sourced from the province’s legal boundary records.

Mass School District Boundaries

This example visualizes the boundaries of Massachusetts school districts as a static SVG map. The geographic data, loaded as TopoJSON and converted to GeoJSON, is rendered using `d3.geoPath` with a `geoIdentity` projection that flips the y-axis for correct display. The map fills the canvas, with each district path stroked in teal and filled with a light gray, while React manages the loading state and overall layout.

CCurran Kelleher

map and bar charts

This visualization combines an interactive choropleth map of British Columbia’s regional districts with an animated bar chart. The map’s fill color encodes each district’s 2014 municipal solid waste disposal rate (kg per capita), using a threshold scale. Clicking a district updates the adjacent bar chart to display that region’s disposal rates and population trends over time. Built with D3.js, it uses `d3.geo.path` and TopoJSON for the map, while the chart is rendered with SVG bars and lines from CSV data.

Mass School District Boundaries

This example displays the school district boundaries of Massachusetts as an SVG map. The visualization uses a `geoIdentity` projection with `reflectY(true)` to correctly orient the geographic data, and `geoPath` to render the district polygons. Built with React and D3 v5, the map loads TopoJSON data from a local file and converts it to GeoJSON using the TopoJSON library's `feature` function. The map uses a gray fill with teal strokes for the district boundaries.

NNathion

70% match

Mass School District Boundaries

This example displays the boundaries of Massachusetts school districts as a static SVG map. The visualization renders geographic features using `d3.geoIdentity` and `d3.geoPath`, with TopoJSON data converted via the `feature` function. The map presents district outlines in a light gray fill with teal strokes, projecting the geographic coordinates to fit a 960 by 500 pixel viewport. The visualization is built with React and leverages `d3.json` to load the MassGeo dataset from a remote GitHub Gist.

CCurran Kelleher

69% match