Description

Aggregation by Country + Dropdown

This visualization displays the number of video views for HarvardX/MITx online courses in 2013, with circles sized by view count on a world map. A dropdown menu filters the displayed data by course. The map uses a Mercator projection via `geoMercator` and `geoPath`, with geographic features from the World Atlas TopoJSON. View data comes from a CSV file loaded with `d3.csv`. The visualization is built with React components and D3 scales (`scaleSqrt`) for circle sizing.

From Chen Ding: Aggregation by Country using Excel + Dropdowns!

This example visualizes the number of video views for HarvardX/MITx online courses in the 2013 academic year. Circles, sized by total views, are positioned on a world map according to viewer location, with a dropdown menu to filter by specific course. A tooltip reveals the country and view count for each circle. The visualization uses a Mercator projection via `geoMercator`, renders map features with `geoPath`, and calculates the circle sizing using `scaleSqrt` from D3 v5. The map data comes from the World Atlas TopoJSON, while view data is loaded from a CSV file.

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.

Aggregation by Country using Map

This example visualizes the geographic distribution of video views for Harvardx and MITx online courses in 2013. Circles positioned using a Mercator projection show total views per location, with a tooltip revealing the country name and view count. The visualization combines React for component rendering with D3’s `geoMercator`, `geoPath`, and `scaleSqrt` for sizing. It overlays aggregated view data from a CSV dataset onto land and graticule shapes generated from TopoJSON world atlas data.

Ok, what about a color legend

This example displays a Mercator projection world map using d3.geoPath and TopoJSON world-atlas data, overlaid with circles representing video views from the Harvardx/MITx online course dataset. An ordinal color scale identifies courses, and a d3.scaleSqrt sizes points by view count. The React component renders an SVG with interactive hover states: a color legend built with React elements allows filtering and fading of map circles to highlight specific courses through d3.csv-loaded data.

From Chen Ding: Aggregation by Country using Excel + Dropdowns!

This example visualizes the number of video views for Harvardx/MITx online courses in 2013, with circles sized proportionally to view counts and positioned by geographic coordinates on a world map. A dropdown menu filters the view by specific course, and hovering over a circle reveals the country and total views. The map uses a Mercator projection via D3’s `geoMercator` and `geoPath` for landmasses and graticules, while `scaleSqrt` determines circle sizes. Data is loaded as CSV and TopoJSON, with the view rendered as React-driven SVG elements.

JJoker-tr

D3 course - World Map

This example displays a world map rendered as an SVG, using a natural Earth projection to show countries, graticules, and a stylized globe with colored landmasses and ocean. It loads GeoJSON data from the world-atlas TopoJSON file, converting it with `feature` and `mesh` from topojson. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` for projections, React hooks for data fetching, and CSS to style the map elements.

JJames Rhodes

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.