Version one: Medal Count in Multiple Views with Fast Brushing

100%

Version one: Medal Count in Multiple Views with Fast Brushing

✓ Published1🌍 Public

Last edited Nov 17, 2021

Created on Oct 10, 2021

Two linked views show Olympic medal counts by country from 2000 to 2014. A world map uses d3.geoNaturalEarth1 and d3.geoPath to render triangular markers sized by total medals, colored by year, while a time histogram below bins medal counts by month using d3.histogram. A d3.brushX selection filters the map to the brushed date range. The visualization uses React with d3.v5, rendering as SVG, with data from a CSV of per-athlete medal counts.

AI-generated description

This is a multiple views about number of medals by country through years

Data and Description

It shows the number of medals for countries from 2000 to 2014. Besides is a sliding bar. It aims to show the difference among countries in one year in graphical view and the changes in the number of medals among 14 years. The data is collected by count medal country. The data is extracted from kaggle.

Note

All counts are based on athletes, not events. For example, if a country wins the swimming 4X100M freestyle relay, the number of athletes who have won medals for that event is 4. The goal is to measure how many athletes performed well in the Olympics, participated in various events, and won medals in the events.

MIT Licensed

Similar vizzes

Loading thumbnail…

Version two: Medal Count in Multiple Views with Fast Brushing

This interactive dashboard combines a bubble map and a time-series histogram to explore Olympic medal counts by country from 2000 to 2014. A brushed time window filters the map, showing only medals from that period as triangular marks scaled by count and colored by year. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, a brushX histogram for filtering, and CSV data from a gist.

RRuofan Chen

93% match

Loading thumbnail…

Multiple Views with Brushing

A world map displays cities with missing migrant fatalities, sized by death toll, alongside a brushing-enabled time histogram of monthly casualties. Dragging the histogram’s brush filters the map’s circles to the selected date range. The visualization uses React, D3 v5 (d3.geoNaturalEarth1, d3.geoPath, d3.brushX, d3.bin), and TopoJSON world-atlas data, with SVG rendering.

CChen Ding

77% match

Loading thumbnail…

Multiple Views with Brushing

A world map with proportional symbols shows the geographic distribution of reported migrant deaths and disappearances, while a linked time-series histogram displays the same data aggregated by month. Brushing a time range in the histogram filters the circles shown on the map, revealing temporal patterns in the spatial data. The visualization uses React for component structure, with d3.geoMercator and d3.geoPath rendering the map and d3.brushX enabling the interactive selection. Data comes from a CSV of incident reports, and country boundaries are drawn from TopoJSON world-atlas data.

XXiaoleiGuo

77% match

Loading thumbnail…

Multiple Views with Fast Brushing

A world map and a time-series histogram show the locations and monthly totals of missing migrants. Users brush a time interval in the histogram, instantly filtering the map’s circles to reflect the selected range. Built with React hooks, the visualization uses `d3-geo`’s `geoNaturalEarth1` and `geoPath` for map projection, `d3.brushX` for interactive selection, and `d3.bin` with `timeMonths` for aggregating data. The map’s point radii derive from `d3.scaleSqrt`, with data sourced from the Missing Migrants Project and world boundaries from World Atlas TopoJSON.

CChongho Lee

77% match

Loading thumbnail…

Multiple Views with Fast Brushing

A world map displays the global distribution of missing migrants, with circles sized by the total number of dead and missing. A linked time histogram below shows the same data aggregated by month, with a d3.brushX selection filtering the map’s circles in real time. Using React’s useState and useEffect, the example combines d3.geoNaturalEarth1, d3.geoPath, and d3.scaleSqrt with a TopoJSON world atlas, while the histogram uses d3.bin and d3.scaleTime. Data comes from the Missing Migrants Project.

AAnthony Ynami

76% match

Loading thumbnail…

Multiple Views with Brushing Faster

A world map displays migrant fatalities with scaled circles, while a time-series histogram below shows monthly death counts. Brushing across the histogram filters the map’s circles to the selected date range. The visualization uses React with D3 v5 for `geoNaturalEarth1` projection, `geoPath`, `scaleSqrt`, `brushX`, and `bin` APIs. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Ttharuta

76% match

Loading thumbnail…

Multiple Views with Brushing

A world map displays cities, with circle size encoding the total dead and missing; a time-series histogram below shows the same metric over time. Brushing a date range on the histogram filters the map’s circles to events within that span. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX`. Data comes from a CSV of missing migrants, rendered as SVG within a React app.

EEdward-Elric233

76% match

Loading thumbnail…

Multiple Views with Fast Brushing

A world map displays migrant deaths and missing persons by location, with circle size scaled to the count. A synchronized date histogram below supports brush selection, filtering the map’s circles in real time. Built with React, D3 v5, and SVG, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `useMemo` for performance. Data comes from the Missing Migrants Project and World Atlas TopoJSON.

Mmkt-ds

76% match