Beer Reviews on a Map (old)

100%

Beer Reviews on a Map (old)

✓ Published0🌍 Public

Last edited Oct 21, 2024

Created on Oct 19, 2024

This interactive visualization presents a world map where individual points mark cities with populations greater than 50,000, using data from Simplemaps’ World Cities Database. The map uses a natural Earth projection with graticules, landmasses, and country boundaries rendered as SVG paths via d3.geoPath. Points are drawn as semi-transparent circles through React components, with the projection applied to each city’s longitude and latitude coordinates. Geographic data comes from the World Atlas TopoJSON, while styling defines muted fill colors for land, sphere, and graticule layers.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Beer Explorer

This example visualizes beer ratings and locations on an interactive world map, with each review shown as a colored dot. The dots range from red (low rating) to green (high rating) via `scaleLinear`, overlaid on country outlines from the `visionscarto-world-atlas` TopoJSON data. Users can pan and zoom using `d3.drag` and `d3.zoom`, while a `geoNaturalEarth1` projection and `geoPath` render the graticule and map shapes. The visualization is built with React state management, D3.js, and topojson-client, rendering geospatial data as SVG.

Mmilepore@gmail.com

86% match

Loading thumbnail…

Beer Reviews on a Map

The map displays beer reviews as colored dots overlaid on a world map, with each dot's hue indicating the review score on a red-to-green gradient. Users can pan and zoom interactively. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country outlines and graticules, while `d3.zoom` and `d3.drag` handle navigation. Review data comes from the `@milepore/beer_ratings_and_locations` package, with scores mapped via `d3.scaleLinear`.

Mmilepore@gmail.com

85% match

Loading thumbnail…

world ma Points on a Map

This visualization displays a world map with points marking cities whose population exceeds 50,000, sourced from the Simplemaps World Cities Database. It uses a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, interiors, and a sphere outline from World Atlas TopoJSON data. City points are projected and drawn as semi-transparent circles. The React-based implementation, using d3.v5 and SVG rendering, creates a clean, minimal aesthetic with light gray landmasses and teal city markers.

Ssagar limbu

79% match

Loading thumbnail…

Dataviz 10 - Points on map

This visualization displays a world map with points marking cities that have populations exceeding 50,000, using data from the Simplemaps World Cities Database. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, featuring graticules, land masses, and interior boundaries from the World Atlas TopoJSON. City locations are plotted as semi-transparent teal circles positioned via the projection function. The visualization is built with React and D3 v5, loading geographic and city datasets asynchronously through custom hooks before rendering.

RRyAlpha

79% match

Loading thumbnail…

Using Points on a World Map

This visualization displays a world map with points marking cities that have populations greater than 50,000, sourced from the Simplemaps World Cities Database. Using d3.geoNaturalEarth1 and d3.geoPath, it renders land masses, graticules, and country interiors as SVG paths, with city coordinates projected onto the map. The React-based code loads TopoJSON world atlas data via d3.json and mesh, while city data is fetched as CSV. Circles are drawn with low opacity to reveal dense urban clusters across continents.

SSushan Prajapati

79% match

Loading thumbnail…

Points on a Map

This interactive map displays over 7,000 cities as semi-transparent teal points, overlaid on a neutral world map with graticules and landmasses drawn using D3’s `geoNaturalEarth1` projection and `geoPath`. City locations come from the simplemaps World Cities Database, filtered to populations above 50,000, and are projected using `d3.geoPath` from a TopoJSON world atlas. The React app loads data asynchronously via custom hooks, rendering the SVG scene with D3’s `geoGraticule` for the coordinate grid and a sphere outline for context.

WWolfgang

79% match

Loading thumbnail…

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu

79% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

78% match