BC Offsite Species

100%

BC Offsite Species

✓ Published0🌍 Public

Last edited Apr 26, 2020

Created on Apr 26, 2020

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.

AI-generated description

The final installment from the online course Datavis 2020.

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

This iteration is optimized for performance using React's useMemo hook.

MIT Licensed

Similar vizzes

Loading thumbnail…

BC Offsite Species

This visualization combines a bubble map with a linked time-series histogram to explore offsite species trial data. The map projects geographic coordinates using `d3.geoAlbers` and `d3.geoPath`, with circle sizes scaled by area via `d3.scaleSqrt`. A `d3.brushX` on the histogram filters the map’s displayed points by biogeoclimatic zone. Data comes from a CSV of BC offsite trials, rendered with React and D3 v5 using SVG.

JJane Wang

92% match

Loading thumbnail…

Fish_wholesale_bc

This example visualizes British Columbia fish landings and wholesale values over time using a streamgraph. Toggle buttons switch between the two variables, and hovering reveals species-specific details. Built with d3.v4, it uses `d3.nest` for data grouping, `d3.stack` with the `d3.stackOffsetWiggle` offset, and `d3.area` for rendering. Data is loaded via jQuery AJAX from the BC Data Catalogue API, and an SVG path is drawn for each species layer with tooltips.

MMbrownshoes

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

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

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

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

69% match

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

68% match

Loading thumbnail…

Offsite tree species

This visualization displays the count of offsite tree species across different biogeoclimatic zones, using a bar chart with a Viridis color scale. The view aggregates species counts per zone and includes species names in tooltips. Built with the vega-lite-api and d3.csv, it loads data from a GitHub-hosted CSV file and renders through Vega-Lite’s SVG output, customizing axis and label styling via a separate config object.

JJane Wang

68% match