Skip to main content
SimilarExport ZIP
100%

My map

✓ Published0🌍 Public
Hhlkyt
Last edited Jun 9, 2020
Created on Jun 1, 2020

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

My map

A map of European and North African cities displays population data as small circles over a geographic projection of country boundaries. The visualization uses D3 v6 in a React framework, rendering as SVG with d3.geoMercator and d3.geoPath to draw the map. City coordinates from a CSV file are projected and plotted as circles, with labels showing each city’s name, all styled via a linked CSS file.

DDrJoNoble
89% match
Loading thumbnail…

My map

This example displays a map of Europe and North Africa with city locations marked by circles and labeled with their names. It uses a Mercator projection via `d3.geoMercator` and renders the country boundaries as SVG paths through `d3.geoPath`. City data from `cities.csv` is plotted as circles and text labels, with the map styled using custom CSS classes. The visualization loads both the GeoJSON country boundaries and the CSV data concurrently using `Promise.all`.

LLeo
88% match
Loading thumbnail…

My map

This map shows European and North African cities with their populations, plotted as points over country boundaries. Using D3 v5 within a React framework, the visualization loads GeoJSON country polygons and CSV city data via `Promise.all`, then renders them with `d3.geoPath` and a Mercator projection. City labels appear beside each point, with styling controlled by the map.css file.

DDrJoNoble
87% match
Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu
83% match
Loading thumbnail…

Europe_test

This map shows the countries of Europe as solid dark-gray polygons on a white background. The data comes from a GeoJSON file named `custom.geo.json`, which contains the administrative boundaries. The visualization uses the D3.js v4 library, employing `d3.geoConicConformal()` for the map projection and `d3.geoPath()` to render each country's path. The map is centered on coordinates 10, 46 and rendered as SVG within a fixed 700 by 580 viewport.

LLaippe
78% match
Loading thumbnail…

My map

This example presents a choropleth-style map of a single region, likely a state, rendered as a filled polygon in a light blue SVG container. The map uses the Mercator projection and d3.geoPath to draw geographic boundaries from a GeoJSON file, while d3.csv loads city data for potential point markers. The visualization is built with D3 v5 and styled as a responsive SVG using a viewBox, with a custom CSS class for layout. The code demonstrates loading external data files and projecting them onto a large canvas.

Aatree-rohit
76% match
Loading thumbnail…

Untitled

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

JJumblii
76% match
Loading thumbnail…

Untitled

This example visualizes six French cities on a Mercator map, encoding each location with a circle whose size corresponds to a numeric value and whose fill pattern distinguishes three categorical groups (A, B, C). The map uses `d3.geoMercator` and `d3.geoPath` to project and draw France from a GeoJSON source, while the textures library generates distinct striped patterns via `textures.lines()` for each group. Circles are positioned with the projection, sized via `d3.scaleLinear`, and styled with dashed black strokes and transparent fills to emphasize the pattern overlays.

Zzoniyac
76% match