Jurian

@jurb·5 public vizzes

of Fruit - Animated Transitions

Animated fruit bowl circles transition smoothly between states as apples are eaten or replaced by lemons. Using D3 v5 with SVG rendering, circles enter and exit by animating their radius from zero to its final value, while updates transition both position and size. The d3 selection join pattern with object constancy via id tracks individual fruits across data changes. Color and radius are mapped through d3.scaleOrdinal with transition durations of one second.

Nov 15, 2018

Loading thumbnail…

Hello VizHub

A minimal starter example displays the text "Hello Blahub!" centered on a dark background in large Ubuntu type. The page uses D3 v5’s `select` to set the text content of a `div#message`, while an ES6 module exports the greeting string. The `index.html` loads D3 from a CDN, and `bundle.js` runs the main logic. Styling comes from `styles.css`, which imports Google Fonts and applies the color and typography. This demonstrates basic D3 DOM manipulation and modular JavaScript organization.

Nov 15, 2018

Loading thumbnail…

Hello VizHub

A simple D3.js v5 visualization displays the text "bla" inside an HTML div, styled with a large Ubuntu font on a dark background. The example uses the `d3.select` API to target the `#message` element and set its text content. The page structure is defined in `index.html`, with styling from `styles.css` and the main logic in `index.js`, which imports D3 as a module. The visualization demonstrates a minimal setup for an interactive web-based data graphics framework.

Nov 15, 2018

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The layout uses a tree diagram with horizontal links connecting parent nodes to their children, and text labels sized inversely to depth. The implementation leverages d3.hierarchy, d3.tree, and d3.linkHorizontal to compute positions and draw SVG paths, while d3.zoom enables panning and scaling of the entire tree. Data comes from a JSON file containing the geographic classification of nations.

Nov 14, 2018

Loading thumbnail…

Hello VizHub

This example displays a simple D3.js visualization that outputs a static text message and a list of numbers derived from a hard-coded array. The page uses the `d3.select` API to target HTML elements and bind the data, showing the results of mapping each value through multiplication by two. The visualization relies on D3 v5 and demonstrates basic DOM manipulation and data binding without any interactive or dynamic rendering.

Nov 9, 2018