daanasma

@daanasma·7 public vizzes

Bowl of Fruit - Clicking is life

A dynamic scatterplot visualizes fruit data as colored circles representing types—apple, lemon, melon—with size encoding type and color encoding category. Users click or hover over circles to select or highlight them, which updates stroke, opacity, and triggers animated transitions via d3.transition. The example uses d3.scaleOrdinal for color mapping and d3.selection with .merge for incremental updates, rendering through SVG. Data originates from an in-memory fruit array, with interactions managed by event handlers for click and mouseover.

May 19, 2020

Loading thumbnail…

Dynamic Width & Height

This example shows a hierarchical tree visualization of world regions and countries, with text labels sized inversely to their depth in the hierarchy. The layout uses `d3.tree` and `d3.hierarchy` to position nodes and links, rendered as SVG paths via `d3.linkHorizontal`. Pan and zoom interactions are enabled through `d3.zoom`, applied to a containing group. The data comes from a nested JSON file, and the visualization fills the browser viewport by reading `document.body.clientWidth` and `clientHeight`.

May 8, 2020

Loading thumbnail…

Dynamic Width & Height

This example dynamically sizes a D3.js visualization to fit the full browser viewport. The visualization draws a single rounded rectangle that fills the entire window, with its width and height directly tied to the dimensions of the `document.body` element. The code uses D3's `select` function to grab the SVG element and append the rectangle, setting its `rx` attribute for rounded corners, while CSS positions the body to prevent scrolling. The rendering approach is purely SVG-based, with no external data source.

May 5, 2020

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

May 5, 2020

Loading thumbnail…

Asma Maps

This example displays a natural Earth projection of the world map, rendered as a dark blue sphere with green country polygons outlined in black. It loads world country boundaries from a TopoJSON dataset and converts them to GeoJSON using the `feature` method from topojson. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projection onto an SVG, while CSS styles define the fill and stroke colors for the sphere and countries.

May 2, 2020

Loading thumbnail…

Bowl of Fruit - Clicking is life

A bowl of fruit rendered as SVG circles changes over time: apples are eaten, one becomes a lemon, and a melon arrives. Clicking a fruit selects it with a black outline, while hovering highlights it with increased opacity. The animation uses d3 transitions to grow and shrink circle radii, with d3.scaleOrdinal mapping fruit types to colors and sizes. Data updates are driven by timed JavaScript events and user interactions through D3 event handlers.

May 1, 2020

Loading thumbnail…

Rabbitface with D3.js

This example shows a rabbit-like smiley face built with D3.js, featuring a yellow circular head, eyes, buck teeth, and raised eyebrows. The code demonstrates fundamental DOM manipulation by appending SVG shapes and applying chained transitions that animate the eyebrows upward and change their fill to red, then return them to their original position and color. It uses D3 v5 selections and the `arc` generator for the mouth, with a static SVG canvas and no external data source.

Apr 28, 2020