Fish_wholesale_bc

100%

Fish_wholesale_bc

✓ Published0🌍 Public

Last edited May 17, 2018

Created on May 17, 2018

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Streamgraph

A streamgraph displays changes in wholesale values of fish species over time, using a layered area chart with a wiggle offset to show magnitude fluctuations. The visualization includes an interactive tooltip that appears on mouseover, revealing the species name, and a button that toggles the display between landings tonnage and wholesale values datasets. Built with D3 v4, the code uses `d3.stack`, `d3.stackOffsetWiggle`, `d3.area`, and `d3.scaleTime` to construct the animated SVG paths, fetching data from the BC Data Catalogue API via jQuery’s AJAX.

MMbrownshoes

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

72% match

Loading thumbnail…

Stacked-to-Grouped d3 v4

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

MMbrownshoes

71% match

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

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

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

67% match

Loading thumbnail…

Follow the money

A hierarchical tree diagram visualizes British Columbia gaming grant distributions, aggregating payments by grant type, sector, and subsector. Built with D3.js, the interactive visualization uses a collapsible tree layout where nodes represent categorical rollups and leaf nodes correspond to individual organizations. Payment amounts are summed through D3's nest and rollup operations, with a tooltip displaying details. The SVG rendering animates transitions when expanding or collapsing nodes, allowing viewers to trace funding flows from broad categories down to specific community recipients.

MMbrownshoes

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

66% match