Fork of Card D3

100%

Fork of Card D3

✓ Published1🌍 Public

Last edited Nov 30, 2022

Created on Oct 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Card D3

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.

PPLD3508A

92% 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

75% 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

73% match

Loading thumbnail…

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

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986

72% match

Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3

71% match

Loading thumbnail…

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

This map visualization displays world countries as filled green regions on a blue sphere, rendered entirely with SVG. It loads geographic data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries, then projects them with a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The code appends a sphere outline path and draws each country as a separate `path` element, with styling applied through CSS classes for fill and stroke.

Xxyang3672

71% match

Loading thumbnail…

sample

This example shows a choropleth map of global album counts by country, using a green color scale from light to dark to indicate higher totals. Clicking a country opens a modal with placeholder cards for genre, artist, and yearly album statistics, while hovering displays a tooltip with the country name and album count. The map is rendered with D3 v5’s `geoMercator` projection and `geoPath`, with data loaded from `world-atlas` TopoJSON and a local `data_map.json`. Zoom and pan are enabled via D3’s `zoom` behavior, and Bootstrap handles the modal interaction.

DDillu1991

71% match

Loading thumbnail…

D3js gab

This bar chart displays the popularity of 50 music genres, ranked by a sum of artist popularity. The visualization uses a standard vertical bar layout with an x-axis for genre names and a y-axis for the popularity sum. Built with D3.js v3, the code uses `d3.select`, `d3.json`, `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to fetch data from a remote API, create the scales, and render the SVG bars. The chart includes rotated axis labels and a grid.

DDevMoutarde

71% match