fernandotsurukawa

@fernandotsurukawa·12 public vizzes

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern as circles and labels enter, update, and exit with animated transitions. The example uses D3 v5's `selection.data`, `selection.enter`, `selection.merge`, and `selection.exit` to manage SVG groups. `d3.scaleOrdinal` maps fruit types to colors and radii, while chained `transition.duration` calls animate position, size, and fill over one second. The code mutates a fruits array at timed intervals—removing items, changing a type, and filtering—to show how the visualization responds. Rendering is SVG-based.

Oct 14, 2019

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion. The data is loaded from a JSON file containing nested nodes for regions and individual nations. The tree layout positions nodes horizontally, with curved links connecting parent and child elements. Users can pan and zoom using D3’s zoom behavior. The visualization is rendered as an SVG using `d3.tree`, `d3.hierarchy`, and `linkHorizontal` for path generation, with text labels sized by node depth.

Oct 14, 2019

Loading thumbnail…

Cheap Tricks for Interaction

This example displays an interactive world map that zooms and pans using a spinning globe metaphor. The visualization uses a D3 geo projection with d3.geoNaturalEarth1, rendered through d3.geoPath onto an SVG canvas. A dark blue sphere underlies light green country polygons with black outlines, which turn red on hover. Country names appear as tooltips, sourced from a world-atlas TSV file. The map’s zoom and pan interactions are handled by a custom d3.zoom function, with a topojson feature conversion for geographic data. The transformation updates the SVG group’s coordinates in response to user gestures.

Oct 14, 2019

Loading thumbnail…

Art Tree

This example shows a horizontal tree diagram of world regions and countries, using a hierarchical dataset that groups nations by continent and subregion. The code builds the layout with `d3.tree()` and `d3.hierarchy()`, then renders the parent-child connections as curved SVG paths via `d3.linkHorizontal()`. Each node represents a geographic entity, with the root labeled “World” and branches extending through continents like Asia. The visualization responds to the full browser viewport, with the SVG sized to the window dimensions.

Oct 14, 2019

Loading thumbnail…

making a canvas!

This example demonstrates how to create a full-screen interactive canvas using D3 v5 and SVG rendering. The visualization fills the browser viewport with a single rounded rectangle, responding to the window dimensions by setting the SVG width and height attributes dynamically. The code uses D3’s `select` function to target the SVG element and appends a `<rect>` element with a 40-pixel corner radius. The stylesheet ensures the body has no margins and prevents overflow, making the canvas occupy the entire display area.

Oct 14, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes a world map with dark blue oceans and light green countries, using a natural Earth projection. It renders SVG paths for the sphere and country borders, with semi-transparent black strokes on the countries. The code uses D3 v5 functions like `d3.select`, `d3.json`, `d3.geoPath`, and `d3.geoNaturalEarth1`, alongside the topojson library’s `feature` function to process GeoJSON data from the world-atlas package.

Oct 14, 2019

Loading thumbnail…

Bowl of Fruit - Hover to Select

This example shows a bowl of five apples, where hovering over a fruit selects it by giving it a black outline, while other fruits remain unstyled. The visualization animates changes over time—an apple is removed, an apple becomes a lemon, and another apple is deleted. The code uses the D3 v5 library, specifically importing `scaleOrdinal` and `select`, and renders SVG circles with `.transition().duration(1000)` for animated updates, while the dataset is a random array of fruit objects stored in memory.

Oct 11, 2019

Loading thumbnail…

Bowl of Fruit - Click to Select

Five pieces of fruit sit in a row inside an SVG bowl; clicking a fruit highlights its outline in black. The view updates when a piece is removed or one apple changes into a lemon. The code uses D3 v5 with a data join, `scaleOrdinal` for color and radius, and chained `transition()` calls to animate entering, exiting, and resizing circles. Clicking triggers a callback that re-renders the bowl via the exported `fruitBowl` function.

Oct 11, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A fruit bowl demonstrates the General Update Pattern for data joins. Apples and lemons enter, update, and exit with smooth transitions, changing shape, color, or position. The example uses d3-selection’s `data()`, `enter()`, `merge()`, and `exit()` methods, with `transition().duration()` animating circle radii and fills. A d3.scaleOrdinal maps fruit types to colors and sizes, while an SVG rect forms the bowl.

Oct 11, 2019

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a minimal approach to creating a face shape using D3.js, beginning with an empty SVG canvas. The code selects the SVG element and appends a single circle, setting its radius to 200 pixels. The rendering relies on D3 version 5’s `select`, `append`, and `attr` APIs to manipulate SVG elements directly, with styling provided by the accompanying CSS file. The visualization is static, showing only the basic geometric construction without additional facial features.

Oct 9, 2019

Loading thumbnail…

Hello VizHub

This example displays a simple, full-page text message, “Hello VizHub!”, centered on a dark blue background using an imported Ubuntu font. It demonstrates the basic structure of a D3.js v5 project within VizHub, showing how to modularize code by importing a message from a separate ES6 module and setting the text of an HTML element. The implementation uses D3’s `select` function to target the `#message` div and apply the text, with styling handled entirely by the external `styles.css` file.

Oct 9, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal text-rendering setup for a visualization gallery. It displays the static message “Hello VizHub!” in large, styled text against a dark background. The page uses D3 v5 for DOM manipulation, with an ES6 module (`myMessage.js`) exporting the message string, which is then injected into an HTML element via `document.getElementById`. Styling relies on Google Fonts’ Ubuntu typeface through CSS, while the HTML structure includes a preformatted element and a div for content.

Oct 8, 2019