Skip to main content
SimilarExport ZIP
100%

Fork of Card D3

✓ Published0🌍 Public
PPLD3508A
Last edited Dec 2, 2022
Created on Dec 1, 2022
Forked from HTML Starter

This interactive map visualization displays European countries with colored circles marking each nation's location. The circles are color-coded by musical genre preference, with a legend explaining the color scheme. Users can zoom and pan the map, and hovering over a circle reveals a tooltip showing the country name and its associated music genre. The visualization uses D3.js v6 with geoMercator and geoPath for the map projection, SVG circles for data points, and d3-scaleOrdinal for color assignment based on the countriesEuropean.json dataset.

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 Card D3

This map of Europe shows the most popular music genre in each country, with genre indicated by colored dots and a legend. It uses D3 v4 to render the map with `d3.geoMercator` and `d3.geoPath` from GeoJSON data, projecting country centroids to position the circles. Hovering over a circle displays a tooltip with the country name and genre. The map supports zooming and panning via `d3.zoom`, while the legend and tooltip are built with D3 selections and SVG.

Ffkara09
92% match
Loading thumbnail…

Fork of ICE-8.2 - Europe Countries

This visualization displays a choropleth-style map of European countries rendered on an SVG element. It uses a D3 Mercator projection centered on Europe, with each country drawn as a path with a yellow fill and black borders against a blue background. The code loads GeoJSON data from a GitHub gist via `d3.json`, then generates the map using `d3.geoPath` and the topojson library. The example is built with D3 v5 in a React framework.

PPeter S
79% match
Loading thumbnail…

Fork of Card D3

This visualization displays a radar chart comparing music artists across five genre axes: hip hop/rap/R&B, electronic/dance, Latin pop, pop, and rock. Each artist is represented by a colored polygon showing their genre affinity values. The chart uses D3 v4 within a React framework, rendering SVG elements with animated transitions between levels. Tooltips appear on hover to show artist names and values.

AAnissa Belkelfa
76% match
Loading thumbnail…

Fork of Europe Map ICE8

This example displays a map of Europe using a Mercator projection centered on coordinates [13, 52], rendering country boundaries as grey strokes with white fill. The visualization uses React and D3 v5, with a `d3.geoPath` generator that converts GeoJSON features into SVG paths. Geographic data is loaded asynchronously from a GitHub-hosted GeoJSON file via `d3.json`, and the resulting paths are appended to an SVG element sized 600 by 500 pixels.

SSUSHMA CHIRRA
76% match
Loading thumbnail…

Fork of Map with Selectable Countries F

This interactive choropleth map colors countries by economic grouping from the visionscarto-world-atlas dataset, using a spectral ordinal color scale. Clicking a country highlights it and dims all others, while a color legend allows filtering by category. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Zooming via d3.zoom and interaction handlers are also included.

Ffsajedi22
75% match
Loading thumbnail…

Fork of Europe Map ICE8

This example displays a map of Europe as a set of white, grey-outlined SVG paths. A Mercator projection centered on the continent shapes the geographic regions from a remote GeoJSON file. The visualization uses D3.js v5, employing the `d3.geoMercator` and `d3.geoPath` APIs within a React framework to render each feature. Geographic data is fetched asynchronously via `d3.json`, and the resulting paths are drawn on a 600 by 500 pixel canvas.

GGogineni44
75% match
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
75% match
Loading thumbnail…

Fork of Fork of D3 Starter

This interactive map displays country boundaries with colors representing continents, using an orthographic projection that rotates as the user drags the globe. The visualization loads world-atlas data from TSV and TopoJSON files, then fixes specific country discrepancies before rendering. It uses `d3.geoPath`, `d3.geoOrthographic`, `d3.zoom`, and `d3.drag` for interaction, with continent colors assigned via `d3.scaleOrdinal` from the Tableau10 scheme. Hovering highlights a country in red, while the title element shows the country name and index.

IIgor Bojković
75% match