Michelle Mac (@mathematicianmusician), VizHub

Make a Bar Chart with D3.jh

This bar chart displays the ten most populous countries using horizontal bars, with population values in thousands. The visualization is built with React and D3 v5, using `d3.csv` to load data from `data.csv`, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisLeft` and `d3.axisBottom` for axes. Country names appear on the left, bars in steel blue, and a labeled population axis at the bottom. SVG rendering is used throughout.

Sep 29, 2020

Loading thumbnail…

Make a Face with D3.jh

A yellow circle becomes a face with animated eyebrows, eyes, and a mouth rendered in SVG. The example uses D3 v5 selections and transitions to build the facial features, with `transition().duration()` moving the eyebrows up and down in a repeating loop. The mouth is drawn using the `d3.arc()` path generator, while the face's structure relies on nested groups and coordinate offsets. The code imports `select` and `arc` from D3 and runs inside a React framework setup with bundled JavaScript.

Sep 29, 2020

Loading thumbnail…

Make a Face with D3.jh

A yellow circle becomes a face with animated eyebrows, eyes, and a mouth rendered in SVG. The example uses D3 v5 selections and transitions to build the facial features, with `transition().duration()` moving the eyebrows up and down in a repeating loop. The mouth is drawn using the `d3.arc()` path generator, while the face's structure relies on nested groups and coordinate offsets. The code imports `select` and `arc` from D3 and runs inside a React framework setup with bundled JavaScript.

Sep 29, 2020

Loading thumbnail…

React Starter

This React starter demonstrates a minimal data-visualization setup, rendering a static "Hello React!" message centered on the page. The example uses React 16.13.1 and ReactDOM to mount a functional `App` component into a root div, with CSS styling controlling the font size and alignment. It serves as a template for integrating React with visualization libraries, showing the basic structure for building interactive charts or graphs. The rendering approach relies on React’s virtual DOM and the `ReactDOM.render` method, with no external data sources or advanced visualization APIs employed.

Sep 28, 2020

Loading thumbnail…

Cars Report

This example shows a simple text-based report of cars, filtering a list by price and formatting each entry as a line of year, make, model, and price. It loads car data asynchronously via a promise from `getCars.js`, displays a “Loading…” message, then uses `generateReport` to filter cars under $3000 and join them with newlines. The page updates a `<pre>` element using plain DOM `textContent`, with the data embedded as JSON in the source and modules imported via ES6 `import`/`export`.

Sep 28, 2020

Loading thumbnail…

Cars Report

This example displays a loading message followed by a text report of cars priced under $3,000. It fetches car data from a local JSON array wrapped in a Promise via `getCars`. The `generateReport` function filters the cars, formats each with `formatCar` (which outputs like “2009 Ford F150: $3000”), and joins the strings. The React starter code renders the final report into a `<pre>` element using `textContent`.

Sep 27, 2020

Loading thumbnail…

React Starter

This React starter demonstrates a minimal data-visualization setup, rendering a static "Hello React!" message centered on the page. The example uses React 16.13.1 and ReactDOM to mount a functional `App` component into a root div, with CSS styling controlling the font size and alignment. It serves as a template for integrating React with visualization libraries, showing the basic structure for building interactive charts or graphs. The rendering approach relies on React’s virtual DOM and the `ReactDOM.render` method, with no external data sources or advanced visualization APIs employed.

Sep 27, 2020

Loading thumbnail…

Making a Face with D3.js

This example uses D3.js v5 within a React framework to render a static SVG visualization. It imports car data from a local JSON file, formats each entry with a helper function, and filters the dataset to generate a text report of vehicles under a specified price. The visualization colors the entire SVG background red using D3’s selection API, while the report is displayed as plain text. The code demonstrates data parsing, asynchronous promise-based data retrieval, and SVG styling, but does not include any interactive or animated face-drawing behavior.

Aug 17, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes—circles, rectangles, lines, and paths—stylized with CSS and grouped via SVG transforms. It renders a report of car listings fetched asynchronously from a JSON array using a Promise, filtering by price and formatting with custom JavaScript functions. The visualization uses raw SVG elements with attributes like `fill`, `stroke`, and `stroke-width`, alongside CSS for global styling and highlighting.

Aug 17, 2020