Fork of A9-Proportional symbols

100%

Fork of A9-Proportional symbols

✓ Published0🌍 Public

Jjrcuster@dons.usfca.edu

Last edited Apr 14, 2025

Created on Apr 14, 2025

This proportional symbols map visualizes the global distribution of MOOC subscribers, using a choropleth color scheme where darker reds indicate higher subscriber counts. The map uses a Mercator projection, rendered via `d3.geoPath` and `d3.geoMercator`, with data loaded from a CSV file containing country codes and totals. A `d3.scaleThreshold` color scale maps subscriber ranges to a red color scheme, and a legend created with `d3.legendColor` explains the thresholds. The geographic boundaries come from a GeoJSON world map.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A9-Proportional symbols

This example shows a choropleth map of poverty rates by U.S. county, with color intensity indicating the poverty value for each county. It uses d3.geoPath to render the topojson-based county boundaries, while d3.scaleThreshold and d3.schemeGreens map the data values to a green color ramp. Interactive tooltips display the county name and poverty value on hover, and a color legend is added via the d3-legend library. The data is loaded from a CSV containing poverty attributes per county.

Jjrcuster@dons.usfca.edu

74% match

Loading thumbnail…

A9: D3 Proportional Symbol Map

This proportional symbol map shows the relative cost of living across US states using colored circles sized by each state’s cost index, with tooltips on hover. The visualization loads US state boundaries from a TopoJSON file via `d3.json` and `topojson.feature`, then plots the CSV data points using `d3.geoAlbersUsa` and `d3.geoPath`. Circle radius and fill color are scaled with `d3.scaleSqrt` and `d3.scaleLinear`, respectively. It uses D3 v7 with SVG rendering, a color legend, and animated opacity and stroke transitions for interactive highlighting.

Rronnieferrufino4908@gmail.com

72% match

Loading thumbnail…

Fork of Assignment 9: Choropleth Map

This choropleth map visualizes the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a blue sequential color scale with a legend. It renders SVG paths via `d3.geoPath` and TopoJSON data from `us-10m.v1.json`, while county values are loaded from `education.csv` and mapped with `d3.map`. The color scale employs `d3.scaleThreshold` and `d3.schemeBlues[9]`, with county tooltips showing exact percentages and state boundaries drawn as white strokes.

CChase Hall

72% match

Loading thumbnail…

Fork of Assignment 9: Choropleth Map

This choropleth map displays the percentage of adults with a bachelor’s degree or higher per U.S. county using a blue threshold color scale and a legend with tick marks. The code loads education data from a CSV and U.S. county boundaries from TopoJSON via `d3.json` and `d3.csv`, then renders paths with `d3.geoPath`. It uses `d3.scaleThreshold` and `d3.schemeBlues` for coloring, adds hover tooltips via SVG `<title>` elements, and overlays state boundaries with `topojson.mesh`. The visualization is built with D3 v5 and React, drawing to an SVG canvas.

CChase Hall

72% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes educational attainment across U.S. counties, using d3.scaleThreshold with a green color scale to encode the percentage of residents with bachelor’s degrees or higher. County boundaries are rendered as SVG paths via d3.geoPath and a geoAlbersUsa projection, with data loaded from FreeCodeCamp’s TopoJSON and JSON datasets. The map supports pan and zoom through d3.zoom, and includes a color legend built with reusable custom D3 components. Hovering highlights individual counties by changing their fill color.

IIvy Liu

71% match

Loading thumbnail…

A9- proportional symbols map

This example presents a proportional symbols map using React and D3, where the size of each circular marker corresponds to a data value. The visualization leverages a geographic projection to position symbols correctly over a map of a region, with an interactive tooltip displaying the underlying data for each point. The code uses `d3.geoPath` for rendering the map’s topography from GeoJSON data and `d3.scaleSqrt` to map values to circle radii. Hover interactions drive a tooltip component, while the map itself is rendered as SVG paths within the React component tree.

SShazil Taqi

71% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by a numerical score from a CSV dataset, displaying the values on a natural Earth projection. The visualization uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` to render the map, while a separate SVG color legend with circles and text labels indicates the color scale. Users can pan and zoom the map via D3's `d3.zoom` behavior, and hovering over a country highlights it in red and shows its name and score in a tooltip. The map data comes from TopoJSON, merged with the CSV by country codes.

Xxyang3672

71% match

Loading thumbnail…

A9 Proportional Symbols Map in D3

This visualization combines a U.S. state boundary map with red, green, and blue proportional circles to depict cost-of-living indices across states. Circle sizes scale linearly with each state's cost index using `d3.scaleLinear`, while positions are projected with `d3.geoAlbersUsa` and `d3.geoPath`. Data from `expstates.csv` is rendered in an SVG, and the ten highest-cost states are highlighted in green via a tooltip showing state names and indices.

EEric Yao

71% match