Gist 40ca15ac0d6b9529e05fcfa15e22928d

100%

Gist 40ca15ac0d6b9529e05fcfa15e22928d

✓ Published0🌍 Public

Last edited May 17, 2018

Created on May 17, 2018

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.

AI-generated description

Similar vizzes

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

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

78% 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…

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

71% match

Loading thumbnail…

Gist e6fd5e60c1a06a14607e7c8cecae680f

This example maps the geographic distribution of oil and gas activity in British Columbia, showing well locations and facility sites as points over a basemap of the province. The visualization uses R’s `httr` library with `GET()` and `set_cookies()` to fetch a CSV dataset from the BC Oil and Gas Commission’s reporting portal, then renders the spatial data as a static plot. While the code does not specify a particular plotting package, the structure suggests base R graphics or a simple map layer, with coordinates derived directly from the parsed CSV content. It emphasizes raw data retrieval and immediate plotting without interactive elements.

MMbrownshoes

70% 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

70% match

Loading thumbnail…

Gist 206fe25c8c762e30421c93a23e8a5d01

This visualization charts the share of income held by different income groups across British Columbia and Vancouver from 1982 onward, comparing measures like market, total, and after-tax income. The display uses d3.scaleOrdinal for color encoding and d3.axisLeft/axisBottom for scaling, rendering lines or paths with d3.line to trace trends across years. Income groups are distinguished by hue, while the y-axis shows percentage shares, making it easy to compare the relative earnings of top, bottom, and middle percentiles over time.

MMbrownshoes

69% match

Loading thumbnail…

Gist 5e36771400038b0c861c6617c622c5f7

A map of Canada visualizes interprovincial migration flows for 2017 Q2 and Q3, using animated, arrow-headed routes and scaled circles to show the net movement of people between provinces and internationally. Provincial boundaries are rendered from a TopoJSON file via `d3.geoPath` with a conic conformal projection, while migration data from a CSV file drives the visualization. A dropdown menu lets users switch between time periods, and D3 v4 handles the SVG rendering and animations.

MMbrownshoes

68% match