Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth again

✓ Published0🌍 Public
Ss_cural@coloradocollege.edu
Last edited May 13, 2024
Created on May 3, 2024
Forked from Choropleth

This example shows the spatial distribution of Airbnb listings across Chicago neighborhoods by overlaying red point markers onto a light blue choropleth map. A Mercator projection is created with `d3.geoMercator` and fitted to the map data using `fitSize`, while `d3.geoPath` renders the GeoJSON neighborhood boundaries. The listings are loaded from a CSV file and plotted as SVG circles, with their positions computed via the projection function. The visualization uses D3 v6 and relies on `Promise.all` to load both the GeoJSON and CSV data concurrently.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth

This fork of the choropleth example combines a geographic map with a scatter plot. It uses D3.js v6 to render two SVG elements side-by-side, with the map using `d3.geoEqualEarth` projection and `d3.geoPath` to draw country borders. The map is colored by urban rate, while the scatter plot shows life expectancy against GDP per capita, with point size encoding population and color distinguishing continents. The visualization includes an interactive tooltip that appears on hover, and data is loaded from external sources.

HHOURPRIMERA@GMAIL.COM
78% match
Loading thumbnail…

Fork of Choropleth

This example combines a choropleth map and an animated scatter plot to explore country-level statistics. The map uses `d3.geoPath` with an Equal Earth projection to color countries by urban population rate, while the scatter plot encodes variables like life expectancy and birth rate. Users can switch axes between linear and log scales via `d3.scaleLog` and `d3.scaleLinear`, with transitions updating both axes and circle positions. Data comes from CSV and GeoJSON sources, with missing countries rendered in grey.

Oocasfre@gmail.com
77% match
Loading thumbnail…

Fork of Choropleth

This interactive dashboard combines a choropleth map with a linked scatter plot to explore country-level data. Users can select attributes for the x- and y-axes of the scatter plot and toggle between linear and logarithmic scales, while the map’s color encodes a chosen variable. The visualization uses D3 v6 with a `d3.geoEqualEarth` projection, `d3.geoPath` for map rendering, and `d3.scaleOrdinal` for categorical colors. A tooltip provides details, and transitions animate axis updates.

Ooliverkendall99@gmail.com
76% match
Loading thumbnail…

Fork of Choropleth

A linked choropleth map and scatter plot visualize country-level demographic and economic indicators. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render world countries colored by urban population rate, while the scatter plot encodes life expectancy, birth rate, and population using `d3.scaleLinear` and `d3.scaleOrdinal`. Users can switch axes between attributes and toggle linear/log scales, triggering transitions that redraw axes and reposition points. Data is parsed from CSV and GeoJSON, with missing values handled during preprocessing.

Kkaijavanzante@gmail.com
75% match
Loading thumbnail…

Fork of Portland Map

This example displays a choropleth map of Portland neighborhoods, rendering geographic boundaries as green SVG paths. The map uses a conic equal-area projection configured with `d3.geoConicEqualArea` and `d3.geoPath` to project and draw the shapes. Data is loaded from a TopoJSON file via `d3.json` and converted to GeoJSON features using `topojson.feature`. The visualization is built with React, where the `Marks` component maps each feature to a path element, and styling is applied through CSS to highlight the neighborhood borders.

RRamakanth771
75% match
Loading thumbnail…

Fork of ICE-6 (airbnb)

This interactive scatter plot displays Airbnb listings based on distance to the city center and metro distance, with point color encoding species (Adelie, Gentoo, or other). Built with D3 v5, it loads CSV data and maps values to an SVG canvas using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes. Each point uses `circle` elements with a fixed radius, while custom labels, tick styling, and explicit axis titles highlight the plot. The visualization emphasizes geographic proximity patterns against guest satisfaction metrics from the Airbnb dataset.

Pprathyusha-reddy-arch
75% match
Loading thumbnail…

Fork of Choropleth

This example presents a dual-panel visualization of global country data: a choropleth map colored by urbanization rate and an adjacent scatter plot showing life expectancy against GDP per capita, with point size encoding population and color encoding continent. Hovering reveals a tooltip. Built with React and D3 v6, it uses `d3.geoEqualEarth` and `d3.geoPath` for map projection, alongside `d3.scaleLinear`, `d3.scaleOrdinal`, and SVG rendering for both panels.

Bblanchestora@gmail.com
75% match
Loading thumbnail…

Fork of Fork of Chloropleth

This example displays a choropleth map of the world, coloring countries based on their "Birth Rate" from a 2023 world-data CSV. A blue-to-red linear color scale encodes the data range, with grey indicating missing countries. The visualization renders two separate SVG canvases side-by-side, each showing the same map. The code loads GeoJSON map data, country statistics, and continent data using `Promise.all` and `d3.json`, `d3.csv`, then draws the map with `d3.geoEqualEarth` and `d3.geoPath`.

Gg_ivaska@coloradocollege.edu
75% match