Skip to main content
SimilarExport ZIP
100%

2020/W4: Bridges for Prosperity - Rwanda

✓ Published0🌍 Public
PPatrick Wojda
Last edited Feb 6, 2020
Created on Feb 6, 2020

The visualization presents a choropleth-style overview of bridge projects by Bridges to Prosperity across multiple countries, with each country displayed as an individual SVG map. D3.js v5 is used with the `d3.geoPath` and `d3.geoCylindricalStereographic` projection to render the geographic outlines. Project locations are plotted as circles, with color-coding indicating project stage: yellow for completed and red for those under construction. Country-level data from a CSV file is grouped with `d3.group`, and the maps are filtered and fitted to the container size using `projection.fitSize`.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/d4998a41ed766e635bcaf964be1273c0'>2020/W4: Bridges for Prosperity - Rwanda</a>

mit Licensed

Similar vizzes

Loading thumbnail…

2020/W4: Bridges for Prosperity - Rwanda

This visualization maps completed and in-progress trail bridges built by Bridges to Prosperity across multiple countries, using an SVG-based D3 view. Each bridge is positioned by GPS coordinates, with point size encoding the number of individuals directly served and color indicating the bridge type—suspended versus suspension. The chart highlights geographic clustering, particularly the concentration of projects in Rwanda’s Southern Province, and uses tooltips to show details like bridge name, country, and span. Data is sourced from a gist and rendered with d3.v5 under an MIT license.

PPatrick Wojda
94% match
Loading thumbnail…

Project | last part

This visualization is a choropleth map of world countries colored according to a color scale derived from a categorical attribute, with a legend allowing interactive filtering of highlighted countries. The map uses the D3 geo projection API (`geoEquirectangular` with `geoPath`) to render country boundaries as SVG paths from TopoJSON data merged with CSV attributes. The legend, built with D3's ordinal color scale and the `schemeYlOrRd` color scheme, responds to clicks to toggle a selected category, which dims non-matching countries. The map also implements a zoom interaction via D3's `zoom` event.

MMukund Khandelwal
67% match
Loading thumbnail…

Gist d6e714e97e5e937623a7

This visualization plots each country as a point positioned by latitude and longitude, with circle size representing total population and color indicating HIV/AIDS prevalence. The chart uses D3’s `d3.geoPath` and a geographic projection to place points over a world map background. Data is loaded from a CSV containing country statistics, and hover interactions reveal specific country details. The rendering relies on standard SVG elements with scales for sizing and color encoding, following a scatterplot-over-map approach.

LLTymn
67% match
Loading thumbnail…

20 - choropleth map - dataviz 2018

A choropleth map of the world colors each country according to its economic classification, with a color legend on the left. The map uses a natural Earth projection rendered with `d3.geoPath`, and country data comes from the `world-atlas` TopoJSON and TSV files. A sequential color scale based on `d3.scaleOrdinal` and `schemeSpectral` assigns hues, and hovering turns a country red via SVG CSS. The visualization is built with D3 v5 and the `topojson` library's `feature` function, with zoom capability via a custom `zoom` callback.

Zzach b.
67% match
Loading thumbnail…

Project | Interaction | Re-submit

This visualization presents a choropleth map of national fiscal metrics, with an interactive legend for filtering by economic category. Users click legend items to highlight matching countries and dim others. Built with D3 v5, it uses `d3.geoEquirectangular` and `d3.geoPath` to render world shapes from TopoJSON, with `d3.zoom` for panning and scaling. Data comes from CSV files joined to country IDs via `d3.csv`, with `d3.scaleOrdinal` mapping categories to the `schemeYlOrRd` color scheme.

MMukund Khandelwal
67% match
Loading thumbnail…

d3 choropleth map

This animated choropleth map visualizes hypothetical country-level data across the years 2008–2013. Built with D3 v3 and rendered in SVG, the map uses a color scale to encode numeric values from a CSV dataset, with each country's fill transitioning as users step through time. The visualization includes a year selector and animated transitions, allowing viewers to observe changing patterns across countries over time. The map is accompanied by a tooltip displaying the country name and its value for the currently selected year.

AAjar06
66% match
Loading thumbnail…

Gapminder Data in React and D3 - world map colored rebuild

This example presents Gapminder data from 1950 onward, displaying country-level metrics as colored circles over a world map. A dropdown menu selects the y-axis attribute, while the x-axis shows the year, with each circle’s color representing its World Bank region. The visualization uses React for state management and rendering, D3’s `scaleLinear`, `scaleOrdinal`, `geoNaturalEarth1`, and `geoPath` for projections, and `topojson` for country boundaries. The map is colored by country, and a color legend explains the region assignments.

Llakalia@wpi.edu
66% match
Loading thumbnail…

Choropleth World Map w/ D3.js

A choropleth world map colors countries by income group using a spectral color scale, with a legend showing the categorical mapping. The visualization is built with D3.js v5 and rendered as SVG paths projected via `d3.geoNaturalEarth1` and `d3.geoPath`. Country boundaries come from TopoJSON data (world-atlas), enriched with income attributes from a TSV file. Zooming is supported through `d3.zoom`, and the legend’s circles and labels are generated using a reusable `colorLegend` function.

Ppeterjchan
66% match