iascchwen

@iascchwen·10 public vizzes

Let's make an interactive map with D3.js!

This interactive map visualizes world countries with hover highlighting, displaying country names as tooltips. It uses the D3.js v5 library with the `geoNaturalEarth1` projection and `geoPath` for rendering map features. The visualization loads geographic data from the world-atlas package, combining TSV metadata and TopoJSON geometry, while `topojson.feature` processes the country boundaries. The map supports zooming through D3’s `zoom` event, and renders as an SVG with styling for the ocean sphere and landmasses.

Dec 3, 2019

Loading thumbnail…

Let's make a choropleth map with D3.js!

This choropleth map visualizes global suicide rates by country, with each nation colored and labeled to display its corresponding rate value across time. The map uses a Natural Earth projection rendered as SVG paths, with zoom and pan enabled through D3’s zoom behavior. Data is loaded from CSV and TopoJSON sources using d3.csv and d3.json, while d3.geoPath and the topojson feature method generate the country boundaries. Hovering highlights a country in red.

Nov 27, 2019

Loading thumbnail…

Bowl of General Update Pattern

This example demonstrates the general update pattern for animated data changes in D3. A bowl graphic holds a sequence of fruit symbols, with apples and lemons distinguished by color and size. The visualization uses a time-based script to remove items, replace an apple with a lemon, and filter out a middle element, showing how the enter, update, and exit states transition smoothly. The D3 v5 code leverages scaleOrdinal for color and radius mappings, while SVG rect and circle elements are animated via the .transition() API over one second.

Nov 26, 2019

Loading thumbnail…

Bown of fruit general update pattern - D3.js

This example demonstrates the D3.js general update pattern with a bowl of fruit visualization. Five red circles, representing apples, initially appear in a row across the SVG canvas. After one second, a fruit is removed from the array, and the `render` function re-executes, causing the exiting circle to be removed via `selection.exit().remove()`. The visualization uses D3 v5’s `select` and `range` methods, with data bound through `selection.data()`, and renders shapes as SVG circles with fixed positions based on their index.

Nov 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to create an interactive smiley face using D3.js, with eyebrows that move in response to data. It shows fundamental DOM manipulation and data-binding techniques by loading a CSV file and mapping its values to visual attributes. The code uses `d3.select` to target the SVG element, `d3.csv` to load the data, and then implicitly drives the face’s dynamic features. The rendering is done as inline SVG, with the face drawn directly through D3’s selection and attribute methods.

Nov 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG face is built using D3 selections to append a circle for the head, circles for the eyes, and an arc-generated path for the mouth. Two rectangles form the eyebrows, with the right eyebrow moving upward via a `transition` over two seconds. The code imports `select` and `arc` from the D3 v5 library and reads dimensions from the SVG attributes.

Nov 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by constructing a smiling face from SVG elements, with animated eyebrows that move independently. The code uses D3 v5 selection methods such as `select`, `append`, and `attr` to create a yellow circle for the face, while additional elements are styled via external CSS. The visualization renders in an SVG container with fixed dimensions, and the interaction is shown through a linked video tutorial. The approach highlights how D3 binds data to visual primitives without requiring a dataset, focusing instead on programmatic element creation and attribute updates.

Nov 26, 2019

Loading thumbnail…

Interaction

This visualization maps the worldwide distribution of cultural objects by function, using a natural Earth projection with colored circles to represent object counts per category. Users can pan and zoom the map via d3.zoom, while circles animate in with a bounce effect. The code employs d3.geoPath and topojson for geographic features, and retrieves live SPARQL data from the Netherlands Digital Heritage Network API. A categorical color scale distinguishes object types, with a legend and tooltips providing country names and category labels.

Nov 26, 2019

Loading thumbnail…

Shapws with SVG and CSS

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled and grouped using inline attributes, CSS, and SVG’s `g` element. It shows three sets of shapes, where the first two use individual `fill` properties and the third applies a shared `fill` and `stroke` to a group. The code directly uses SVG elements like `circle`, `rect`, and `g` within an HTML document, with external CSS defining a full-screen layout. It highlights the simplicity of SVG’s declarative structure for static vector graphics.

Nov 19, 2019

Loading thumbnail…

Hello VizHub

This example displays a static greeting message, “Hello VizHub!”, centered on a dark blue background with large, light-colored Ubuntu typography. It demonstrates the basic structure of a VizHub project, including separate HTML, CSS, and JavaScript modules. The code uses D3.js (v5) via `select` to set the text content of a div, while ES6 modules export the message string and import it into the main script. The styling relies on an external Google Fonts import for the Ubuntu typeface.

Nov 19, 2019