Gist 8393722

100%

✓ Published0🌍 Public

Last edited Jan 13, 2014

Created on Jan 13, 2014

This visualization maps Smithsonian Folkways album metadata from a GeoJSON file onto a world map, using colored points to represent individual recordings. It shows the geographic distribution of musical traditions by country, with each point positioned at a country’s centroid. The code uses D3’s `d3.geoPath` and `d3.geoMercator` to draw the map, while a `d3.forceSimulation` with collision detection spaces overlapping points. Hovering reveals album details via a tooltip, and the Vue framework manages the UI state.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8393709

This visualization displays a world map rendered from GeoJSON data using D3.js, with country polygons colored according to a categorical scale. The map focuses on named regions and includes a legend and hover interactions, allowing viewers to explore geographic boundaries and associated metadata such as country names and people listed in the properties.

Aadkatrit

76% match

Loading thumbnail…

WorldMap

This world map visualization displays the geographic distribution of music album counts, using a green color scale where darker shades represent higher numbers of albums per country. Users can zoom and pan the map, and hovering over a country reveals a tooltip with its name and album count, while clicking opens a Bootstrap modal showing detailed country statistics. The visualization is built with D3 v5, using `d3.geoMercator` for projection, `d3.geoPath` to render country shapes from TopoJSON data from world-atlas, and a linear scale for coloring. Country-specific album data is loaded from a local JSON file.

UUmarani Vemula

74% match

Loading thumbnail…

Sauvegarde 4-11-22

This data visualization is a choropleth map showing the number of music albums per country, rendered as an interactive SVG using D3 v5. The map uses a green color scale to represent album counts, and users can hover over countries to see details via a tooltip or click to open a modal with statistics. The code leverages D3’s `geoMercator` projection, `geoPath`, and `scaleLinear` for color mapping, and loads world map data from the `world-atlas` package alongside a local `data_map.json` file.

TToky R

73% match

Loading thumbnail…

TP 10-12-22

This map visualization displays the geographic distribution of music albums, with country colors shaded by count according to a green scale. It shows a choropleth of world data where users can hover to see precise album counts and click to open a modal with detailed statistics about genres, artists, and yearly totals. The implementation uses D3 v5 with d3.geoMercator projection, d3.geoPath, and a d3.scaleLinear color scale, pulling TopoJSON country boundaries from world-atlas and loading country album counts from a local JSON file. Zooming is enabled via d3.zoom, with Bootstrap modals and tooltips providing interactivity.

TToky R

73% match

Loading thumbnail…

Merged

This interactive choropleth map visualizes the global distribution of album counts by country, using a green color scale that darkens with higher values. Users can zoom and pan via D3’s `zoom` behavior, hover to see a tooltip with country name and album total, and click to open a modal displaying additional statistics like top genres and artists. The map is rendered with `d3.geoPath` and topojson world data, while country counts come from a local `data_map.json` file, with colors mapped through `d3.scaleLinear`.

TTEKMS

73% match

Loading thumbnail…

Gist e8914af0b0ac89f0bb63ab1ffa0d4f71

This example plots a single geographic point from a GeoJSON file, marking the Vanderbilt Library’s location with a yellow school symbol and a popup containing its title, tour date, and an external Wikimedia image. The visualization uses an SVG map rendered with D3’s `d3.geoPath` and `d3.forceSimulation` to place the marker, while the associated properties are bound to the feature for interactive display. The map’s basemap and styling are not specified in the code, only the one-point feature and its metadata.

CCliffordAnderson

72% match

Loading thumbnail…

Gist 0878d3d41c2f75ff5bd436411a3b725c

This visualization maps a music library organized by decade, showing how songs are distributed across eras. The code likely uses D3.js to render an interactive tree or partition layout, with each branch representing a decade folder and leaves as individual tracks. Hovering or clicking reveals artist and song titles, while the structure emphasizes the collection’s chronological range. The rendering approach relies on hierarchical data binding, possibly with `d3.hierarchy` and `d3.treemap`, to visually encode the folder hierarchy. The data source is the file system itself, parsed into a nested JSON structure for D3 to consume.

WWill Carter

72% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

71% match