map and bar charts

100%

map and bar charts

✓ Published0🌍 Public

Last edited Aug 30, 2017

Created on Aug 30, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

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.

MMbrownshoes

77% match

Loading thumbnail…

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.

MMbrownshoes

72% match

Loading thumbnail…

BC Offsite Species

This visualization displays British Columbia offsite species data on a world map, with bubble size reflecting area in square kilometers. Users can brush the time-series histogram below to filter the mapped points. The map uses d3.geoPath with Albers projection and country boundaries from the World Atlas TopoJSON. The histogram bins data by month using d3.histogram and d3.scaleTime, with brushX interactions syncing the view.

AAlan McConchie

71% match

Loading thumbnail…

BC School Districts

This interactive map of British Columbia school districts displays district boundaries as SVG paths within a React application. Each district is rendered as a clickable region, with a mouseover effect that highlights the area using CSS transitions. The visualization uses raw SVG path data from a locator map of the Bulkley-Nechako regional district, styled with a custom stylesheet that sets a blue background and white district fills with dark strokes. The page links to a separate chart (chart03.html) for additional district information.

MMohammad Shakirul Islam

71% match

Loading thumbnail…

Idempotent Reusable Barchart 101

This example presents an animated, reusable bar chart that visualizes the proportion of single-detached houses in Canada from 1986 to 2021. Built with D3.js (v7.8.4), it uses the `scaleBand` and `scaleLinear` functions to map census years and percentages, while `axisBottom` and `axisLeft` render the axes. The chart is implemented as an idempotent function, allowing it to be re-applied cleanly to an SVG canvas when parameters change, with bars rendered as SVG rectangles.

AAlex

70% match

Loading thumbnail…

BC

A horizontal bar chart displays population estimates for ten countries, showing values scaled in thousands. D3 loads the dataset via `csv`, converts population strings to numbers, and renders rectangles using `scaleLinear` for the x-axis and `scaleBand` for y-axis positioning. The SVG output is sized at 960 by 500 pixels, with bars styled by default and no axes or labels drawn. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from D3 v5.

Ppadmanabhan-rajendrakumar

70% match

Loading thumbnail…

Reusable Bar Chart

This reusable bar chart, built with D3 v3, visualizes CO2 emissions, education levels, and employment-to-population ratios across 24 countries, using an animated, multi-series dataset. It is implemented as a configurable D3 plugin via d3.svg.barchart, rendering to SVG with smooth transitions. The chart supports customization of margins, dimensions, scales, padding, animation duration, tick formatting, and accessor functions for the x- and y-values, as well as optional domain setters. A subtle animation introduces bars, which rise with a transition, and axes animate into place, including rotated x-axis labels. Hovering reveals values. This example was forked from Doug Dowson's reusable chart pattern.

AAdlopez2016

70% match