Skip to main content
SimilarExport ZIP
100%

Sophie's version: Aggregation by Country using Excel + Dropdowns!

✓ Published3🌍 Public
CCurran Kelleher
Last edited Oct 25, 2019
Created on Oct 25, 2019

This example displays a world map with points sized by the total views for each country, aggregated from viewer location data. A dropdown menu allows users to filter the visualization by course. The map uses a geoMercator projection and d3.geoPath to render land and graticules, while d3.scaleSqrt determines circle radii. The React app loads map data from TopoJSON and viewer statistics from a CSV file, with the dropdown implemented using the react-dropdown component.

AI-generated description

This fork was made to help show how to position the menu below the viz.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sophie's version: Aggregation by Country using Excel + Dropdowns!

This interactive map visualizes course viewership data by country, using a dropdown menu to filter between different courses and an "All" option for aggregated totals. It renders a world map with D3 geoMercator projection, drawing D3 geoGraticule lines, geoPath land masses, and sphere background. Data is loaded via D3's csv and json from external sources, with circle markers sized using scaleSqrt based on view counts and tooltips displaying country and view totals. The React frontend updates the map and circles when a course is selected from the dropdown menu.

CCarloGato
94% match
Loading thumbnail…

Sophie's version: Aggregation by Country using Excel + Dropdowns!

This interactive map visualizes aggregate course view counts by country using a Mercator projection rendered in SVG. Users filter the data by course category via a dropdown menu, which updates the circle sizes representing total views per nation. The visualization loads geographic boundaries from a TopoJSON world atlas and CSV data containing viewer locations and course enrollment metrics. Built with React, the example uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and react-dropdown for the selection interface.

EElora-dev
94% match
Loading thumbnail…

Sophie's version: Aggregation by Country using Excel + Dropdowns!

This example visualizes video views for HarvardX/MITx online courses in 2013, aggregated by country on a world map. Circles sized by `d3.scaleSqrt` represent total views per location, with a dropdown menu to filter by individual course. Data is loaded via `d3.csv` from a gist, while geographic boundaries come from World Atlas TopoJSON. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath`, with graticules and land masses rendered as SVG paths, and tooltips show course and view counts.

Ssophburke
90% match
Loading thumbnail…

Sophie's version: Aggregation by Country using Map

This interactive map visualizes video views from the Harvardx/MITx Course-Person Dataset for 2013, with circles sized using a square-root scale to represent view counts per location. Built with React and D3 v5, it uses d3.geoMercator and d3.geoPath to render world map boundaries from World Atlas Topojson, while data points are positioned by longitude and latitude. Hovering over a circle reveals the aggregated view count and country name.

Ssophburke
86% match
Loading thumbnail…

Curran's version: Aggregation by Country using Excel + Dropdowns!

This interactive map uses a geoMercator projection via d3.geoPath to display global course viewership data, with circle sizes proportional to aggregated view counts per country. Users select a course category from a React dropdown menu, which filters the dataset loaded from a CSV file containing viewer locations. The visualization combines topojson-derived land boundaries with graticules and sphere outlines, while hovering over circles reveals the country name and total views through SVG title elements. The map data comes from the World Atlas topojson source.

Ssophburke
86% match
Loading thumbnail…

Sophie's version: Aggregation by Country using Excel

This example visualizes the total video views for HarvardX and MITx online courses in 2013, aggregated by country and shown as circles on a world map. Circle size encodes view count, and hovering reveals the country and number of views. The map uses a Mercator projection built with D3’s `geoMercator`, `geoPath`, and `geoGraticule`, layered with land and interior boundaries from the World Atlas TopoJSON. Data is loaded from a remote CSV via D3’s `csv` function, and the circles are positioned using the projection, with their radius scaled by `scaleSqrt` in SVG.

Ssophburke
83% match
Loading thumbnail…

Aggregation by Country + Dropdown

This example visualizes video views from the Harvard/MITx online course dataset (academic year 2013) on a world map. A dropdown menu filters which course’s view counts are displayed as circles, with radius encoding the total views per country via `scaleSqrt`. Hovering reveals the country name and view count. The map uses a Mercator projection (`geoMercator`) with `geoPath` to render land and graticules from World Atlas TopoJSON, while the interface is built with React and the `react-dropdown` component.

Ssophburke
82% match
Loading thumbnail…

Menus with React -Aggregation by Country + Dropdowns!

This interactive map visualizes video view counts for Harvardx/MITx online courses in 2013, aggregating data by country. A dropdown menu lets users filter the displayed points by individual course. The visualization uses D3’s `geoPath` with a Mercator projection to render the world map and graticule, while `scaleSqrt` sizes circles representing views. Hovering over a point reveals the country name and view count. Data is loaded from a CSV using D3’s `csv` function, and the interface is built with React state management for the dropdown selection.

Ssophburke
81% match