Haifan Li

@lihaifand·3 public vizzes

let's make a bar chart.js

This example displays a horizontal bar chart mapping categorical country labels to numeric values from a CSV file. The visualization uses D3.js v5 APIs including `scaleLinear` for the value axis and `scaleBand` for the country axis, with SVG rectangles rendered inside a 960×500 canvas. The data is loaded asynchronously via `csv`, and the chart is generated entirely from the provided data.csv dataset, showing one bar per country with widths proportional to the parsed value field.

Mar 15, 2020

Loading thumbnail…

Lets make a face

A smiling face constructed from D3 shapes animates its eyebrows upward and downward in a repeating cycle. The yellow circular head, black-outlined eyes, and arc-based mouth are drawn as SVG elements using D3's `select`, `append`, and `arc` APIs. The face’s components are positioned via translation transforms, while the eyebrow motion relies on D3’s `transition` with a two-second duration. This React-framework example demonstrates animated SVG composition with D3 v5.

Mar 15, 2020

Loading thumbnail…

Cars Report

This example displays a cars report by rendering the make of the first car in a dataset as large text on a webpage. The data is a hardcoded JSON array of five car objects, imported from a separate module and parsed with `JSON.parse`. The React-based code uses plain JavaScript DOM manipulation to set the `textContent` of a designated `<pre>` element, identified via `getElementById`, to the value "Honda". The visualization is minimal, showing only one data point rather than a chart or table of the full dataset.

Mar 12, 2020