Version two: Medal Count in Multiple Views with Fast Brushing

100%

Version two: Medal Count in Multiple Views with Fast Brushing

✓ Published0🌍 Public

Last edited Nov 17, 2021

Created on Nov 15, 2021

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.

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 one: Medal Count in Multiple Views with Fast Brushing

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.

RRuofan Chen

93% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a world map of bubble markers with a time-series histogram, linked through interactive brushing. The map displays the spatial distribution of migrant deaths and missing persons using proportional circles, while the histogram aggregates the same data by month. Users can brush over the histogram’s time axis to filter the map’s bubbles dynamically. The code uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for the brushing interaction, and d3.bin for histogram binning. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

BBen Brophy

78% match

Loading thumbnail…

Multiple View With D3 Brush

This interactive dashboard combines a world map and a time-series histogram to explore missing migrant incidents. A D3 brush on the histogram filters the map’s bubbles, which represent total dead and missing, using a square-root size scale. The map uses `geoNaturalEarth1` and `geoPath` for projection, while the histogram employs `scaleTime`, `histogram`, and `brushX`. Data comes from the Missing Migrants Global CSV, rendered as SVG within a React framework.

YYenTingWu

78% match

Loading thumbnail…

Multiple Views with Brushing

This example pairs a natural Earth bubble map with a time-series histogram, both rendered as SVG, to visualize global migrant deaths and disappearances. Brushing on the histogram filters the map’s circles in real time, showing only incidents within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projections and country boundaries from TopoJSON, while the histogram aggregates monthly totals with `d3.bin` and `d3.sum`. Data comes from the Missing Migrants Project, with circle sizing scaled by `d3.scaleSqrt`. React manages state, and D3’s `brushX` drives the interactive filtering.

ZZG

77% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a geographic bubble map with a time-series bar chart, linked through interactive brushing. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render world landmasses, with circle size encoding total dead and missing migrants. Brushing the histogram filters map points by reported date. Data comes from the Missing Migrants Project CSV, rendered via React with D3 v5, including `scaleSqrt`, `scaleTime`, `histogram`, and `brushX`.

Jjiangruofan

77% match

Loading thumbnail…

Multiple Views with Brushing

This example demonstrates linked brushing between a world bubble map and a time-series histogram, both rendered as SVG in React. The map plots migrant deaths and missing persons by location with circle radii scaled by d3.scaleSqrt, while the histogram aggregates the same metric monthly using d3.bin and d3.timeMonths. Brushing the histogram with d3.brushX filters the map’s displayed circles in real time. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map projection, and loads data from a CSV of the Missing Migrants Global 2019 subset.

RRajat Dangat

77% match

Loading thumbnail…

Multiple Views with Brushing

This example combines a bubble map and a date histogram to explore the Missing Migrants Dataset. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from World Atlas TopoJSON, with circle size scaled by the square root of deaths. The histogram below aggregates monthly totals using `d3.bin` and `d3.timeMonths`. Brushing the histogram with `d3.brushX` filters the map’s circles by date range, demonstrating linked views through React state.

Kkrandslam

77% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a bubble map of global migrant deaths and disappearances with a brushing-enabled time-series histogram. Users can brush over a date range in the histogram, which filters the data points displayed on the map, highlighting incidents within the selected period. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw country boundaries and graticules, while a square-root scale (`d3.scaleSqrt`) sizes the bubbles based on casualty counts. The histogram uses `d3.histogram` to bin data by month and `d3.brushX` to enable the linked selection. Data comes from the Missing Migrants Project, rendered in SVG within a React component.

EEevikettu

77% match