jhofang

Let's make a map with D3.js!

This example shows how to load and inspect a world map dataset using D3.js version 5 and TopoJSON. It fetches geographic data from the world-atlas package via `d3.json` and logs the parsed TopoJSON object to the browser console. The code initializes an SVG canvas with fixed dimensions and prepares it for future map rendering, though no visual output is drawn at this stage. The example demonstrates the fundamental workflow of fetching and handling geospatial data with `d3.json` and the TopoJSON library.

Bowl of Fruit - General Update Pattern

Five circles representing fruit enter an SVG with zero radius and grow into apples. The example demonstrates D3’s general update pattern, animating exits by shrinking circles to zero and modifying existing fruits via the data join. Using `d3.scaleOrdinal` for color and radius, it transitions enter, update, and exit selections over one second. Hovering highlights a circle with a black stroke via mouse events. Over three seconds, `setTimeout` removes a fruit, changes a type to lemon, and filters another element, showing joins and transitions.

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing how data joins handle enter, update, and exit selections with animated transitions. Circles representing apples enter with a radius of zero, expand to full size, change color and stroke when clicked, and shrink away when removed from the data array. The code uses d3.scaleOrdinal for color and radius mappings, selection.data with a key function, and chained transition.duration calls to animate updates over one second. Data changes occur at timed intervals, modifying the fruit array through pop, filter, and property mutation.

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the general update pattern in D3. Five apples initially render as red circles, then transition through a sequence of updates: one apple is removed, a lemon turns yellow, and another apple is deleted. The example uses d3-selection's select and merge operations, along with d3.transition to animate shape attributes like radius and fill over one-second durations. The data is a simple in-memory array of fruit objects, rendered as SVG groups containing circles and text labels.

Cars Scatter Plot

A scatter plot displays the population of the top ten most populous countries, using a linear scale for the x-axis and a point scale for the y-axis. Circles are positioned by population and country, with a title and axis labels. The visualization is built with D3 v5, using `csv` to load data, `scaleLinear` and `scalePoint` for scaling, and `axisBottom` and `axisLeft` to render axes. SVG is used for rendering.

Jan 6, 2020

Scatter Plot

This example shows the ten most populous countries, plotting each country’s population along a horizontal linear scale. Using d3.scaleLinear and d3.scalePoint, the SVG circles represent countries, with a formatted axis displaying population values. The code loads data from a CSV file using d3.csv, applies a d3.axisBottom and d3.axisLeft with tick lines, and styles the chart via external CSS.

Jan 6, 2020

Customising Axes

A horizontal bar chart shows the ten most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for the scales, and d3.axisBottom and d3.axisLeft for the axes. The x-axis labels are formatted with d3.format, and the y-axis gridlines and domain line are removed, while the x-axis domain is also removed. A custom axis label and title are added as SVG text elements.

Jan 6, 2020

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, with horizontal bars ordered by country name and sized proportionally to each nation’s population in thousands. The visualization uses D3 v5’s `csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and `axisLeft`/`axisBottom` to render ticks. Bars are drawn as SVG rectangles filled with steel blue, while margins frame the chart on a 960×500 canvas.

Jan 5, 2020

Let's make a face

This example uses D3.js to construct a simple, smiling face from basic geometric shapes. A large yellow circle forms the head, and two smaller black circles serve as eyes. A path element, drawn using D3's `arc` function, creates the mouth. The composition is centered using an SVG group with a transform, and the entire graphic is rendered into the `svg` element within a React framework.

Jan 2, 2020

HTML Starter

This example shows a minimal HTML page that renders the text “Hello HTML” at a very large font size in the center of the browser window. The page uses plain CSS within a `<style>` tag to set the body’s text alignment and font size, requiring no external libraries or JavaScript. The rendering approach is a static, unstyled document, serving as a bare-bones starting point for HTML-focused visualizations. It demonstrates the simplest possible web page structure with `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` elements.

Jan 1, 2020

POI Category Tree

This interactive tree diagram visualizes the hierarchical structure of ArcGIS point-of-interest (POI) categories, showing broad parent categories like Food and Travel and Transport branching into many specific child values such as "Sushi" or "Airport." The visualization uses a horizontal tree layout where nodes represent categories and connecting paths illustrate the parent-child relationships. It relies on D3 v5 APIs including `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal`, with zoom functionality enabled via `d3.zoom` and event handling. The SVG rendering displays category names as text labels with varying font sizes based on depth in the hierarchy. Data comes from the provided CSV file, which is processed and transformed into a hierarchical structure for display.

Dec 31, 2019

Car Report

This gallery example presents a static car report as an HTML page titled "Cars Report," listing three vehicles with their model years and prices. The page uses plain HTML with an unordered list to display each car entry, while a linked CSS stylesheet applies a monospace font at a large font size and highlights the first car (a 2012 Nissan Leaf) in red. No JavaScript or data libraries are involved; the rendering relies solely on static markup and CSS styling rules.

Dec 26, 2019

Cars Report

This example demonstrates a simple asynchronous data-loading workflow that displays a filtered list of cars under a specified price. It shows how JavaScript ES modules, Promises, and array methods like `filter` and `map` combine to generate a text report. The app uses `getCars()` with a `setTimeout` to simulate fetching hardcoded JSON data, then `generateReport` formats each car into a year-make-model-price string. The final output is rendered into a `<pre>` element using the DOM API `textContent`, with a loading message shown initially.

Cars Report

This example demonstrates an asynchronous data-loading pattern for a car inventory report. It displays a list of five car objects, each containing year, make, model, and price fields, rendered as plain text in a large HTML `<pre>` element. The code uses a custom `getCars()` function that returns a Promise, resolving the parsed JSON data after a simulated two-second delay. The implementation relies on native JavaScript features: `JSON.parse` for parsing the embedded JSON string, `export` and `import` for module structure, and `setTimeout` inside the Promise to mimic network latency. The report itself is static text without any visual chart or interactive elements, focusing purely on demonstrating asynchronous data retrieval and module organization.

React Starter

This example displays the make of the first car in a small dataset as large text on a page. It uses React 16.10 and ReactDOM to render content, though the visible output is achieved by directly setting the textContent of a DOM element. The data comes from a local `cars.js` file containing a JSON array with year, make, model, and price fields. The code parses this JSON and accesses `cars[0].make` to show “Honda”.

Cars Report

This example displays a single, large "Hello World" message on a blank page, serving as a minimal demonstration of the VizHub environment. The visualization is rendered as plain HTML text within a `<pre>` element, populated by JavaScript code that selects the element by its ID and assigns a string to its `textContent` property. It imports a second message from an ES6 module to illustrate basic module usage. The project uses D3 v5 solely through its library inclusion, though no D3-specific functions are invoked in this static output.