Skip to main content
SimilarExport ZIP
100%

A9 - Geospatial visualization in D3

✓ Published1🌍 Public
DDuc Pham
Last edited Apr 8, 2024
Created on Apr 2, 2024

This gallery entry presents three distinct D3.js geospatial visualizations created by Duc Pham for a CS 360 assignment. The first is a choropleth map, followed by a proportional symbols map, and finally a world choropleth map that includes tooltips for all three parts and highlights the top 10 countries in part two. The visualizations use the D3 library to render geographic data, with interactive elements such as tooltips and highlighting. The code is structured within an HTML page using CSS and JavaScript, and each visualization is linked to its own VizHub instance for embedding and viewing.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Ddineshsingiri18@gmail.com
74% 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
74% match
Loading thumbnail…

A_8_PartB

This choropleth map visualizes population counts for a selection of twenty countries, shaded according to each nation’s total inhabitants. Built with D3.js v6 and the topojson-client library, the SVG map renders geographic boundaries using d3.geoPath. Country values from the external CSV are joined to the topology, and a continuous color scale encodes population magnitude. Hovering over a country triggers a tooltip displaying the nation’s name and its precise population figure. The map uses a white background, subtle stroke outlines, and a clean, centered layout for straightforward comparison.

BBalaji Dasari
74% match
Loading thumbnail…

Choropleth Map with interacti filtering D3.js

This choropleth map visualizes global income groups, with countries colored according to a categorical scale. Users can click legend items to filter the map, dimming countries that do not match the selected category. The visualization is built with D3.js v5, using `geoNaturalEarth1` and `geoPath` for map projections and SVG paths for rendering. Data is loaded from the World Atlas TopoJSON and TSV datasets, with the color legend implemented as an interactive SVG component.

Ddanhuijia
73% match
Loading thumbnail…

A9 World Map in D3

This D3.js world map visualization displays the population density of countries using a blue color scale on a Natural Earth projection. The SVG-based choropleth map retrieves country boundary data from a Natural Earth GeoJSON file, while population statistics come from the CSV dataset loaded with `d3.csv`. The code uses `d3.geoPath` with `d3.geoNaturalEarth1` projection to render country shapes, and maps each country's population density value to the color scale, with gray indicating missing data. Hovering over a country reveals its name and density value through the SVG `title` element. The implementation includes `d3.scaleSequential` and `d3.interpolateBlues` for the color gradient.

EEric Yao
73% match
Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury
72% match
Loading thumbnail…

Choropleth Map

This example presents an interactive choropleth map using a globe projection, where users can select a country from a dropdown list to rotate the globe and focus on that specific location. The visualization also shows a color legend built with custom D3 code, and it includes a tooltip that displays the country name on mouseover. The map is constructed with D3's geo projection and path functions, TopoJSON for geographic data processing, and static JSON and TSV files from the world-atlas package. The globe is rendered using the orthographic projection, with the styling defined in CSS.

DDolbyref113
72% match
Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham
72% match