Skip to main content
SimilarExport ZIP
100%

Fork of DTSC630-Assignment2-HJi

✓ Published0🌍 Public
YYukikaze
Last edited Mar 14, 2026
Created on Mar 14, 2026

This example visualizes a dataset imported through a CSV file, mapping data points onto a geographic map. It uses `d3.csv` to parse the data and `d3.geoPath` to render country borders, while plotting user-provided locations as colored circles based on their attributes. The visualization employs `d3.forceSimulation` for layout optimization of overlapping labels and includes interactive tooltips via `d3.select` to display detailed information on hover. The map background and styling are rendered using SVG paths generated from GeoJSON data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a world map colored by per-country values from a small CSV dataset, using a blue sequential color scale to encode the data. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths with a Mercator projection (d3.geoMercator). The visualization relies on d3.json for fetching, topojson.feature for conversion, and d3.geoPath to generate the map shapes.

Rrevanthdasari10@gmail.com
77% match
Loading thumbnail…

Fork of DataViz-Plot2

This example visualizes the locations of crimes from a CSV dataset as a scatter plot, mapping latitude and longitude coordinates to x and y positions. The code loads the data using `d3.csv`, filters out invalid entries, and renders each point as an SVG circle with tooltips. The visualization includes linear scales, axes with labels, and a title, all created with D3 v7. The source dataset is linked from Google Drive, and the chart is built exclusively with SVG elements.

Hharikrishnasair@gmail.com
77% match
Loading thumbnail…

Fork of HTML Starter

This example displays a world map colored by values joined from a CSV dataset, with a hover tooltip showing each country’s name and numeric value. It renders an SVG using D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath`, loading country boundaries from TopoJSON via `world-atlas`. Country colors are assigned through a sequential `d3.scaleSequential` interpolator, while the CSV is joined using a `Map`. The tooltip appears on mouseover events, positioned at the cursor.

Ssaiabhishekmunnangi@gmail.com
77% match
Loading thumbnail…

Fork of Let's make a map with D3 with popup.js!

This visualization displays a world map with color-coded countries, rendering geographic boundaries as SVG paths. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, with country data loaded from a CSV containing IDs and values. A tooltip appears on mouseover, showing the country code and its associated value. The example uses the `topojson` library’s `feature` function to convert TopoJSON to GeoJSON, and D3’s `select`, `geoPath`, and `csv` APIs for DOM selection, path generation, and data parsing.

991geethikaalwis
76% match
Loading thumbnail…

Fork of Let's make a map with D3 with popup.js!

This is a D3.js map of the world created with a Natural Earth projection, using `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines. Each country is joined with a CSV dataset by its numerical ID, and hovering over a country triggers a custom tooltip via `d3.select` and DOM `mouseover` events, displaying the country's ID and its associated value from the CSV. The visualization demonstrates basic interaction and data-binding on an SVG canvas, with countries colored light blue and highlighting red on hover.

991geethikaalwis
75% match
Loading thumbnail…

Fork of HTML Starter

This example plots U.S. state locations from a CSV dataset as labeled circles in an SVG. It uses d3.csv to load the data, then applies d3.scaleLinear for longitude and latitude mapping, and appends SVG circles and text elements to reveal the geographic distribution. The visualization summarizes row and column counts in a pre element before rendering.

Sson.sultan0602@gmail.com
75% match
Loading thumbnail…

Fork of ICE4 cat face

This example shows a scatter plot of country data loaded from a remote CSV file, with circles positioned by country and region values and colored steelblue. The code uses D3 v6’s `d3.csv` to fetch and parse the dataset, then applies `d3.scaleLinear` for both axes and appends circles via `d3.selectAll().data().enter()`. SVG rendering is used, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Ggaddamthanmayeereddy759@gmail.com
74% match
Loading thumbnail…

Fork of React & D3 Starter

This example displays a world map colored by sample population scores from a CSV file. The visualization uses an equirectangular projection via `d3.geoNaturalEarth1()` and renders country polygons with `d3.geoPath()`. Country colors are assigned using `d3.scaleThreshold()` with five color bins. A tooltip shows country names and values on hover, and a legend explains the color scale. The map uses TopoJSON data from the world-atlas package and processes features with the topojson-client library.

Kkarthikpavan1198@gmail.com
74% match