Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited Aug 18, 2020

Created on Aug 17, 2020

Forked from Shapes and Colors with SVG and CSS

A world map rendered with SVG paths, where countries are filled with a light green color and the ocean appears blue. Hovering over any country instantly changes its fill to red, while a natural Earth projection and zoom interaction let viewers pan and scale the map. Built with D3 v5, the example uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` to project and manipulate the geometry, with country names loaded from a TSV file and shapes from TopoJSON data.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Map With D3.js !

This example shows an interactive world map rendered with SVG, where each country is colored light green and turns orange on hover, with a dark background and a blue ocean sphere. The map supports pan and zoom through D3’s zoom behavior, which applies a transform to the group containing all country paths. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON. Country names are joined from a separate TSV file, and the hover effect is implemented via CSS styling on the `.country` class.

GGino Dzin

84% match

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes the countries of the world as an SVG map using D3.js. It first renders a blue sphere as the ocean background, then projects country boundaries onto it using the Natural Earth dataset and a geoNaturalEarth1 projection. The map is constructed with the `geoPath` and `geoProjection` APIs, with `topojson.feature` processing the loaded GeoJSON data. Country shapes are filled in light green with a subtle black stroke, and the map is interactive only in the sense that it renders static geographic data.

JJordan Chiu

83% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries in light green and the ocean in blue. It uses D3.js v5’s `geoNaturalEarth1` projection and `geoPath` to generate geographic shapes, while the TopoJSON library’s `feature` function converts the world-atlas 110m GeoJSON data into features. A sphere outline and country boundaries are drawn with stroke styling, and the map is projected onto a 960 by 500 canvas.

RRubens

83% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG using D3.js, with countries filled in turquoise and the ocean depicted as a blue sphere. It uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and TopoJSON’s `feature` method to convert country boundaries from the world-atlas 110m dataset. The code appends a sphere path and then country paths, with styling from CSS for fill and stroke.

DDi Zhen

83% match

Loading thumbnail…

Let's make a world map with D3.js!

A simple world map renders countries as filled brown shapes on a blue ocean sphere, using D3.js v5 with a Natural Earth projection from `d3.geoNaturalEarth1`. The SVG paths are generated by `d3.geoPath` and features are extracted from a TopoJSON dataset (world-atlas countries-110m) via topojson's `feature` function. Countries are styled in CSS, with ocean fill applied to the initial sphere path.

Yylzami40

83% match

Loading thumbnail…

World Map with D3.js!

This example displays a world map as an SVG, with pink countries outlined in red against a blue spherical backdrop. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate paths from TopoJSON data loaded from the world-atlas package. A sphere path is drawn first, followed by country features from the dataset. Hovering over a country changes its fill color, demonstrating basic interactivity within a D3 v5 workflow.

DDINESH SAI BOPPANA

83% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram

83% match

Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing

82% match