Gist 69526c10c61369e9ebc7f2479ab96375

100%

Gist 69526c10c61369e9ebc7f2479ab96375

✓ Published0🌍 Public

Last edited Apr 23, 2018

Created on Apr 20, 2018

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist bea3b68601c5004145624bdb03eaa43e

This example maps oceanographic CTD (conductivity, temperature, depth) sampling locations along the British Columbia coast and offshore Pacific. A GeoJSON MultiPoint dataset feeds a D3 map using `d3.geoPath` with a TopoJSON basemap for landmasses. Points cluster tightly near the continental shelf and along a repeating offshore grid, while a supplementary CSV (`proflocations.csv`) suggests profile station coordinates. The visualization shows the spatial distribution of oceanographic measurements, highlighting dense nearshore sampling versus broader offshore transects, rendered as a static point-layer over geographic context.

MMbrownshoes

78% match

Loading thumbnail…

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.

MMbrownshoes

78% match

Loading thumbnail…

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.

MMbrownshoes

77% match

Loading thumbnail…

Canadian Province TopoJSON

This example displays a mesh of Canadian federal electoral districts from a 2011 TopoJSON file, highlighting each district boundary with a thin black stroke. Red dots mark the first coordinate of every arc in the topology, revealing the underlying data structure. The map uses a conic conformal projection and is rendered as SVG via `d3.geo.path`. The code employs `topojson.mesh` to extract boundaries and appends circles using each arc’s transformed starting point, based on the TopoJSON transform.

BBrideau

76% match

Loading thumbnail…

D3: Loading GeoJSON data and generating SVG paths

This example combines Canadian health data with geographic boundaries to create a choropleth map. It loads GeoJSON province outlines via `d3.json` and CSV health statistics via `d3.csv`, merging them by province name to color each region using a `d3.scale.quantize` color scale. The map uses a `d3.geo.conicConformal` projection and `d3.geo.path` for SVG rendering, with population circles from a third CSV overlaid using the same projection.

MMbrownshoes

76% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

75% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes Canada’s provinces as a choropleth map on a blue spherical background using a natural Earth projection. The map is rendered with SVG paths generated by `d3.geoPath` and `d3.geoNaturalEarth1`, while TopoJSON data is fetched and converted to GeoJSON via the `feature` method. Province boundaries appear as light green shapes with thin black strokes, and the sphere itself is drawn as a distinct path. The code loads data from a GitHub gist and relies on D3 v5 and TopoJSON v3.

SSeldomtimely

75% match

Loading thumbnail…

Untitled

This example displays a choropleth map of Canada using D3 v7, with provinces rendered as SVG paths via `d3.geoPath` and an Albers projection. Hovering over a province changes its fill color from green to red and triggers a tooltip div, positioned via mouse event coordinates, that shows the province name from the loaded GeoJSON data. The tooltip is shown and hidden by toggling a CSS class, and the map data is fetched from a GitHub-hosted GeoJSON file.

SSUSHMA CHIRRA

74% match