Skip to main content
SimilarExport ZIP
100%

Stylized bar chart

✓ Published0🌍 Public
Ssultanmirzapydev
Last edited Aug 16, 2021
Created on Aug 11, 2021
Forked from Pathetic Bar Chart

This visualization shows the world’s countries as stylized filled regions, with a natural Earth projection and graticule. It overlays circles for major cities, sized by population using a square-root scale. The map is rendered in SVG, using React for component structure, and relies on d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule for geographic projection and paths. Data comes from the World Atlas TopoJSON and a clean CSV of world cities.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map

This example presents a stylized world map rendered as an SVG. It displays country boundaries, graticules, and the Earth’s sphere, with city locations plotted as translucent points. The visualization uses the D3.js `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs, along with React for component management. Geographic data is sourced from the World Atlas TopoJSON, and city coordinates are loaded from a CSV file. The map is styled with a clean, minimal aesthetic, highlighting land masses and interiors.

RRay Yang
84% match
Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Ssophievanderhorst
83% match
Loading thumbnail…

Fork of Stylized Line Chart

This example displays a world map rendered with a natural Earth projection, using SVG paths to show land masses, country borders, graticules, and a sphere outline. The visualization is built with React and D3 v5, where the `geoNaturalEarth1` and `geoPath` functions generate geographic paths from the World Atlas TopoJSON dataset. Country interiors are separated via `mesh` from the topojson library, while the styling applies a teal land fill and gray graticules for a clean, minimalist aesthetic. The map appears static, with data loaded asynchronously through a custom `useData` hook.

Wwhiteswallow87
83% match
Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, with countries rendered as filled shapes in teal against a light gray graticule and sphere background. The map shows landmasses and interior boundaries between adjacent countries. Built with React and D3 v5, the code uses `d3.geoNaturalEarth1()` for projection, `d3.geoPath()` to generate SVG paths, and TopoJSON’s `mesh()` to compute country interiors. Geographic data comes from the `world-atlas` package’s countries-50m.json file, and rendering is done entirely through SVG elements.

Rroc286
83% match
Loading thumbnail…

World Map

This example displays a natural Earth projection world map with graticule lines, country borders, and interior boundaries. City populations are plotted as semitransparent circles with radii scaled by the square root of population using `d3.scaleSqrt`. The visualization uses React hooks to load world atlas TopoJSON data and a CSV of global cities, converting them into GeoJSON features via `topojson.feature` and `topojson.mesh`. D3’s `geoNaturalEarth1` projection and `geoPath` render the SVG shapes.

Iiblub
83% match
Loading thumbnail…

World map

This example presents a world map with countries and landmasses rendered in a stylized SVG projection. The visualization uses a geoNaturalEarth1 projection and d3.geoPath to draw sphere, graticules, land, and interior boundaries, with data sourced from world-atlas. The React app fetches topology via d3.json, then processes it with topojson's feature and mesh functions. A Poppins font and teal color scheme distinguish land and interiors.

Llaplantalaplanta
83% match
Loading thumbnail…

Fork of Stylized Line Chart

This example shows a world map rendered with a natural Earth projection, displaying country boundaries as filled shapes and interior borders as distinct strokes. The visualization uses React to manage the component structure and d3-geo’s `geoPath` and `geoNaturalEarth1` for projection and path generation. TopoJSON data from the World Atlas is loaded via d3.json, with `feature` and `mesh` extracting land polygons and country interior lines. Styling with CSS defines a blue ocean sphere, graticule grid, and teal landmasses.

MMd Alif
83% match
Loading thumbnail…

World Map with City Points Sized

A world map with city points sized by population. The visualization uses a natural Earth projection with graticules and land boundaries rendered as SVG paths. City populations are scaled using a square root scale, mapping to circle radii with a maximum of 15 pixels. The chart is built with React, D3 v5's `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and loads city data as CSV and world atlas topology JSON.

SSam Hege
83% match