kzaiets

@kzaiets·7 public vizzes

Fork of Missing Migrants on a Map

This visualization displays the Missing Migrants dataset on a world map, with each circle representing a single event where migrants have died or gone missing. The circle radius encodes the total number of dead and missing using a square-root size scale. It renders geographic basemap features using `d3.geoPath` with a Natural Earth projection, including land polygons, graticules, and country interiors from the world-atlas TopoJSON source. The D3 `geoGraticule` and `geoNaturalEarth1` functions generate the map framework, while React manages the state and SVG rendering.

Oct 19, 2021

Loading thumbnail…

Fork of Polished World Map

This gallery example presents a world map displaying country boundaries from the World Atlas TopoJSON dataset, styled with distinct colors for land, oceans, and graticules. The visualization uses React with D3 v5's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render the map and its coordinate grid. It also employs the topojson library's `feature` and `mesh` functions to process the topology into land and interior boundaries, with all marks drawn as SVG paths in a single `<g>` element.

Oct 6, 2021

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors world countries by their economy category, using a natural Earth projection and an ordinal spectral color scale. Hovering highlights a country in red, while a zoom interaction pans and scales the map view. It loads TopoJSON and TSV data from the world-atlas package, rendering with SVG via d3.geoPath. A custom color legend, built with d3.scaleOrdinal, displays the categorical color scale, and topojson.feature processes the geographic data.

Sep 15, 2021

Loading thumbnail…

Fork of POI Category Tree

This tree visualization displays a hierarchical taxonomy of ArcGIS point-of-interest categories, branching from broad top-level groups like “Food” and “Travel and Transport” into detailed subcategories. The layout uses d3.tree() with linkHorizontal to position and connect nodes, rendering text labels at varying font sizes by depth. Implemented with d3.v5 and SVG, the view supports zooming via d3.zoom(). Data comes from data.csv, listing parent categories and their newline-separated children.

Aug 25, 2021

Loading thumbnail…

Fork of CO2 Emissions Over Time

A stacked area chart of global CO2 emissions from 1790 onward, segmented by fossil fuel types (gas, liquids, solids) and other sources like cement production and gas flaring. The visualization uses D3 v4 with SVG rendering, employing `d3.stack` for layering and `d3.area` with `curveBasis` for smooth paths. Labels are positioned via the `d3-area-label` library, while hover effects darken each segment. Data comes from a CSV of global emissions, scaled to gigatons, with responsive resizing and interactive axes.

Aug 25, 2021

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` for axes and animates circles with a 2-second transition when selections change. The chart includes axis labels and grid lines, rendered as SVG with opacity-styled red circles. Updates trigger a re-render that re-binds data and transitions circle positions, demonstrating dynamic visualization of multivariate car attributes like horsepower, weight, and acceleration.

Aug 5, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 with special cases for enter, update, and exit selections. It shows a bowl of fruit where apples are added, removed, and replaced with lemons over time, using a scaleOrdinal for colors and radii. The code imports scaleOrdinal from d3 and uses selection.merge() to handle overlapping enter and update logic, while exit().remove() cleans up removed elements. The visualization renders with SVG, using data joins on groups, circles, and text elements to reflect state changes.

Jul 16, 2021