unidirectional data flow

100%

unidirectional data flow

✓ Published1🌍 Public

Last edited Oct 28, 2018

Created on Sep 27, 2018

This example shows a world map where clicking a country highlights it in pink, illustrating unidirectional data flow through a single render function that updates the visualization. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to draw country outlines from TopoJSON data (world-atlas 50m), and `d3.zoom` for panning and zooming. The code loads geographic data via `d3.json` and country names via `d3.tsv`, then binds click events to update the selected country state. SVG paths represent countries, with a blue sphere as the ocean backdrop.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

unidirectional data flow

This example shows a zoomable world map where clicking a country highlights it in pink, demonstrating unidirectional data flow through a simple render function. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw country boundaries from TopoJSON data loaded via `d3.json`, with country names from a TSV file. The view updates through an `onClick` handler that toggles a CSS class, while `d3.zoom` applies pan and zoom transformations to the map group.

NNTCHANG1289

96% match

Loading thumbnail…

Interaction

A world map renders countries in light green with black outlines on a blue sphere, using D3 v5 with a geoNaturalEarth1 projection. Users hover over any country to highlight it pink, while clicking a specific country isolates that selection and removes highlights from others. The visualization loads geographic data from a TopoJSON world atlas and merges it with a TSV file for country names. Code employs d3.geoPath, d3.zoom for panning, and CSS classes to toggle the selected country’s fill color.

NNTCHANG1289

86% match

Loading thumbnail…

ywontthiswork

This example shows an interactive world map where clicking a country turns it green while all other countries remain red, displaying a selected-country highlighting behavior. The visualization loads geographic data from the world-atlas TopoJSON dataset and country names from a corresponding TSV file, then renders the map using d3.geoPath with a d3.geoNaturalEarth1 projection. Click events trigger a re-render that updates fill colors based on the selected country’s ID. The code uses d3.json, d3.tsv, and d3.select to manage data loading and SVG elements.

Jjons288

86% match

Loading thumbnail…

Lets make a map with D3.js

This example demonstrates an interactive world map where each country is a clickable path element, with country names available as tooltips on hover. The visualization uses D3.js v5 with the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from the world-atlas TopoJSON and TSV datasets, which supply the country shapes and names. The map supports zooming and panning via the `d3.zoom` module, which updates the SVG group's transform attribute. Country hover states change fill color to red, highlighting the selected nation.

HHelenaShu

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

85% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani

85% match

Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey

85% match

Loading thumbnail…

simple map interactions

This example shows an interactive world map rendered as SVG, where each country displays its name as a tooltip on hover and the entire map can be panned and zoomed. It uses D3 v5’s `geoNaturalEarth1` projection with `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package, and country names are matched from a TSV file via ISO numeric codes. The zoom behavior is implemented with `d3.zoom`, applying the current transform to a group element, while CSS hover styles highlight countries and a sky-blue sphere path forms the ocean background.

AAndrew Fletcher

85% match