Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Dec 29, 2019

Created on Oct 28, 2019

Forked from Let's make a face with D3.js!

This visualization displays a choropleth map of Iran, coloring each province based on a selected dataset column. A dropdown menu lets users switch between different attribute values, triggering a white flash transition before the new colors settle. The map uses `d3.geoMercator` and `d3.geoPath` to render GeoJSON boundaries, with `d3.scaleLinear` mapping log-transformed data values to random generated colors. A custom `colorLegend` shows the most and least value range, while `d3.zoom` enables panning and scaling of the SVG output.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This interactive choropleth map displays global income groups using a natural Earth projection, with a linked color legend that filters highlighted countries on click and enables zooming via `d3.zoom`. It loads world topology from the World Atlas TopoJSON and tab-separated metadata, processing features through `d3.geoPath` and `d3.geoNaturalEarth1`. Colors are assigned with `d3.scaleOrdinal` and `d3.schemeSpectral`. The legend, built with custom SVG groups, toggles selection states and updates opacity, while the map’s sphere and country paths respond to hover and interactive filtering.

OOliverlee1003

77% match

Loading thumbnail…

Let's make a face with D3.js!

This example visualizes the world map as a set of orange countries on a steel-blue spherical background, with hover states that turn a country red. The shape data comes from the world-atlas TopoJSON and TSV files, which are joined to label each country with its name. The visualization uses the D3.js `geoPath` and `geoNaturalEarth1` projection to render the map, and the topojson `feature` function to convert TopoJSON topology into GeoJSON features. A zoom interaction is enabled through D3’s `zoom` event, which transforms the map group.

DDifan Gu

75% match

Loading thumbnail…

Circle on a Map

This interactive map of the world shows each country colored by its DegreeId value from the Iran dataset, using d3.geoPath with the geoNaturalEarth1 projection to render SVG paths. Users can pan and zoom via the d3.zoom API, while a color legend built with d3.scaleOrdinal and schemeSpectral displays the categorical color mapping. The visualization loads geographic data from TopoJSON and CSV, then binds the CSV attributes to country features.

MMiss-Programmer

74% match

Loading thumbnail…

Let's make a face with D3.js!

This visualization uses D3.js to construct a stylized face from geographic map data. It renders a world map projected using a Mercator projection, with country boundaries drawn via `d3.geoPath`, and then overlays facial features on top. The data comes from the world-atlas TopoJSON and TSV files loaded from jsdelivr. The code sets up an SVG canvas and uses `d3.geoMercator` for projection, though the facial feature construction is incomplete in the provided snippet.

Yylzami40

73% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to render a world map on an SVG canvas, with each country filled in light green and the globe projected using a Natural Earth projection. It displays country names as tooltips by merging data from the World Atlas TopoJSON and TSV files. The map supports zoom interaction through D3's zoom behavior, and hover states highlight countries in red. The code relies on d3.geoPath, d3.geoNaturalEarth1, topojson.feature, and d3.json/tsv for data loading.

Yylzami40

73% match

Loading thumbnail…

Let's make a face with D3.js!

This example renders a horizontal bar chart of population data for ten countries, loaded from a CSV file using D3.js v5. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map population values and country names to SVG rectangles, with axes generated by `d3.axisLeft` and `d3.axisBottom`. Bar widths are proportional to each country’s population, and the chart is styled with steel-blue rectangles. The code demonstrates basic data binding and SVG manipulation with D3’s `select` and `append` methods.

TTouha Zohair

73% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A world map rendered with D3.js displays countries as dark green paths with gold outlines on a gold sphere, using a Natural Earth projection and SVG. Hovering highlights a country in red, and zooming is enabled. The code loads geographic data from TopoJSON and country names from TSV files via Promise.all, then generates paths with d3.geoPath and applies pan/zoom through d3.zoom.

Llinyyyyyyyyy

73% match

Loading thumbnail…

Let's make a face with D3.js!

This example renders a hierarchical dataset of world regions and countries as a horizontal tree, using D3.js v5. The visualization groups countries under regions such as Southern Asia and Western Asia, with text labels sized by depth. The code builds the layout with `d3.tree` and `d3.hierarchy`, draws curved links via `d3.linkHorizontal`, and applies zooming through `d3.zoom`. Data loads from a JSON file, and SVG elements are styled with a custom font and blue stroke.

HHadi M Zadeh

73% match