Skip to main content
Log in
J

jakirst

@jakirst·4 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG elements appears centered on a dark canvas. D3.js constructs the face using fundamental DOM manipulation: circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using `d3.select` and `transition.attr`, the eyebrows animate up and down over repeated two-second intervals. The example demonstrates basic data binding and SVG attribute updates with the d3.v5 library.

Aug 21, 2019
Loading thumbnail…

Hello VizHub

This example generates a text-based report from a hard-coded dataset of four car records. It fetches the data asynchronously through the `getCars` promise, formats each entry using `formatCar`, and joins the results with newlines. The display uses vanilla DOM manipulation (`textContent`) within a D3 v5 environment, rendering a styled, centered message against a dark background.

Aug 3, 2019
Loading thumbnail…

Hello VizHub

This example generates a text-based report from a hard-coded dataset of four car records. It fetches the data asynchronously through the `getCars` promise, formats each entry using `formatCar`, and joins the results with newlines. The display uses vanilla DOM manipulation (`textContent`) within a D3 v5 environment, rendering a styled, centered message against a dark background.

Aug 3, 2019
Loading thumbnail…

Hello VizHub

This example displays the make of the first car from a small embedded dataset, rendering the text “BMW” prominently on a dark background. It demonstrates basic VizHub capabilities, including ES6 module imports and JSON parsing. The page uses D3 v5’s `select` function, though the core visualization simply sets the `textContent` of a div element, while styling relies on Google Fonts’ Ubuntu and custom CSS. The data is hardcoded in a separate `cars.js` module as an array of car objects.

Aug 3, 2019