Skip to main content
Log in
吴

吴昊

@whaosss·8 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example builds a world map from TopoJSON data using D3 v5 and the geoMercator projection, rendering country boundaries as SVG paths via `d3.geoPath`. It loads the world-atlas 110m dataset, extracts country features with TopoJSON’s `feature` method, and appends each path to an SVG. The code demonstrates basic data join and shape generation, creating a static geographic visualization that reveals country outlines on a blank canvas. No interactivity or animation is present, focusing solely on spatial encoding through projection and path construction.

Apr 8, 2019
Loading thumbnail…

Hello VizHub

This example displays a single, large "Hello VizHub!" message in the center of a dark page, styled with white Ubuntu font. It demonstrates the basic workflow of a D3.js v5 project using embedded HTML and CSS, along with modular JavaScript. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module, `myMessage.js`, which exports the greeting string. The page loads D3 from a CDN and uses a Google Fonts import for typography.

Apr 3, 2019
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtering a list to show only those priced under $2,000 and formatting each entry as a line with the year, make, model, and price. It relies on JavaScript modules and Promises, with `getCars` simulating an asynchronous API call via `setTimeout` and returning parsed JSON data. The `generateReport` function chains array methods like `filter` and `map`, while `formatCar` handles string interpolation for output. The final result is displayed in a `<pre>` element in the DOM.

Apr 3, 2019
Loading thumbnail…

Cars Report

This example demonstrates a simple report generator that filters a list of cars by price and displays the results in a large, styled text format. It uses JavaScript with ES6 modules and the Promise API, fetching car data asynchronously from a hardcoded JSON array with a simulated two-second delay, then filtering and formatting the output. The data includes fields for year, make, model, and price, with results rendered in a `<pre>` element using Ubuntu font, highlighted by a dark background and light text color.

Apr 3, 2019
Loading thumbnail…

Hllo VizHub

This example presents a simple, full-screen message that reads “Hello VizHub!” using the D3.js library. The page is rendered through an HTML document that loads D3 and attaches a CSS stylesheet for visual styling. The JavaScript code imports the `select` function from D3 and a custom message module, using `select('#message').text(message)` to display the text. The design uses a dark background and large Ubuntu font to create a bold, minimal visual statement.

Apr 3, 2019
Loading thumbnail…

Hllo VizHub

This example displays a large, centered "Hello VizHub!" message in white text against a dark background. The visualization uses D3.js version 5 to set the text content of a designated HTML div element. The page employs a custom Ubuntu font via CSS and relies on D3’s `select` API to target the DOM node. A separate JavaScript module exports the static string, which is then injected into the page through the main script.

Apr 3, 2019
Loading thumbnail…

Hello VizHub

This example displays a single, large "Hello VizHub!" message in the center of a dark page, styled with white Ubuntu font. It demonstrates the basic workflow of a D3.js v5 project using embedded HTML and CSS, along with modular JavaScript. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module, `myMessage.js`, which exports the greeting string. The page loads D3 from a CDN and uses a Google Fonts import for typography.

Apr 3, 2019
Loading thumbnail…

Hello VizHub

This example displays a single, large "Hello VizHub!" message in the center of a dark page, styled with white Ubuntu font. It demonstrates the basic workflow of a D3.js v5 project using embedded HTML and CSS, along with modular JavaScript. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module, `myMessage.js`, which exports the greeting string. The page loads D3 from a CDN and uses a Google Fonts import for typography.

Apr 3, 2019