Skip to main content
SimilarExport ZIP
100%

BC Offsite Species

✓ Published1🌍 Public
JJane Wang
Last edited Apr 26, 2020
Created on Apr 26, 2020

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.

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 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
92% 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
72% match
Loading thumbnail…

Optimized React w/ Brushing

A choropleth of missing migrant incidents combines a world map with a filterable timeline. Geographic data from the World Atlas TopoJSON renders via `d3.geoPath` and `d3.geoGraticule` in an SVG, overlaid with circles sized by `d3.scaleSqrt`. A date histogram below, built with `d3.scaleTime` and `d3.histogram`, uses `d3.brushX` to select a date range. This brushing interaction filters the bubble map circles, revealing temporal patterns in the dataset.

PPadoSensei
67% match
Loading thumbnail…

a

This visualization combines a world bubble map with a time-series bar chart to explore missing migrant incidents by location and date. Circles sized proportionally to the total dead and missing count are projected using `d3.geoNaturalEarth1` and `d3.geoPath`, overlaid on land features and graticules from TopoJSON. A linked brush on the histogram, built with `d3.brushX`, filters the map’s data by reported date. React’s `useMemo` optimizes rendering, and the data originates from the Missing Migrants Project CSV.

Bbigstonecompany
67% match
Loading thumbnail…

Brushing

This example links a bubble map and a date histogram to explore missing migrant incidents. The map projects circles sized by the total dead and missing using d3.geoNaturalEarth1 and d3.geoPath, while the histogram bins monthly counts with d3.bin and d3.scaleTime. Users can brush the histogram with d3.brushX, which dynamically filters the map's circles to show only incidents within the selected date range. Data comes from a CSV of reported migrant deaths, and the visualization is built with React and rendered as SVG.

Ccynichole
67% match
Loading thumbnail…

Multiple views with brushing

This visualization combines a bubble map and a time-series histogram to explore missing and dead migrants worldwide. The map uses a natural Earth projection with scaled circles to represent incident counts, while the histogram aggregates monthly totals. Users can brush over the histogram to filter the map’s displayed data in real time. The code uses React, D3 v5’s `geoNaturalEarth1`, `scaleSqrt`, `brushX`, and TopoJSON for world atlas data.

Aazharahmad0
67% match
Loading thumbnail…

Fork of Missing migrants map / histogram BRUSHING

This interactive visualization combines a bubble map and a histogram to explore data on missing migrants. Brushing over the time-series histogram filters the map’s circles by date range, dynamically updating the displayed incidents. The map uses an SVG projection via `geoNaturalEarth1` and `geoPath`, with circle radii scaled by `scaleSqrt`. The histogram uses `brushX` and `event.selection` to set the filter, while data loads from a CSV and world atlas TopoJSON.

LLewis Ward
67% match
Loading thumbnail…

Multiple Views (Brushing)

This interactive visualization combines a bubble map and a date histogram to explore missing migrant incidents. Brushing a time range in the histogram filters the map’s bubbles, which are scaled by total dead and missing using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath for land outlines, while the histogram employs d3.bin and d3.brushX. Data comes from the Missing Migrants Project CSV, rendered as SVG in React.

Bbsolomon103
66% match