Humanistic Quality Management

Stylized Line Chart

This stylized line chart visualizes San Francisco temperature data over a week, using a smooth natural curve to connect individual data points. The chart is rendered with React and D3 v5, using `scaleTime` and `scaleLinear` to map the temporal and temperature axes, while the `line`, `curveNatural`, and `extent` APIs generate the path. The SVG output uses a teal color scheme with circular markers that include tooltips for hourly timestamps, and the plot is framed by custom tick marks from the `AxisBottom` and `AxisLeft` components.

Jun 19, 2023

8: Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, showing sepal length against sepal width for individual iris specimens. The visualization is built with React and D3 v7, using `scaleLinear`, `extent`, and CSV data loading via `d3.csv`. Renderered as SVG, the chart features styled axes with tick marks, a rotated y-axis label, and teal circular marks that display tooltips on hover through SVG `<title>` elements. The Poppins font and custom CSS styling give the plot a clean, modern appearance.

Jun 19, 2023

7: Stylized Bar Chart

This stylized bar chart displays the populations of the top 10 countries from the UN Population 2019 dataset for the year 2020. Horizontal bars are rendered as SVG rectangles using React, with axes created through custom components. The visualization utilizes D3 v7's `scaleBand` and `scaleLinear` for positioning, while `format` from D3 converts large numbers into abbreviated labels with "B" for billions. The Poppins font and muted colors give the chart its distinctive, polished appearance.

6: Refactored Bar Chart

This example shows a horizontal bar chart of population data for the top 10 countries, sourced from the UN Population 2019 dataset loaded via d3.csv. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear mapping country names and population values to positions. The AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component draws the bars, demonstrating a refactored separation of chart elements into reusable React functions.

5: Axes with React & D3

This example uses React 16.9 to render a horizontal bar chart of the top ten countries by 2020 population, sourced from a CSV file of UN population data. The chart displays axes with tick marks and labels, built using D3 v7’s `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. D3 `max` calculates the domain, and the bars are drawn as SVG rectangles within a transformed `<g>` group.

4: The Margin Convention (From Bar Chart)

This example visualizes the top 10 countries by 2020 population as a horizontal bar chart, with bars colored using default SVG styling. The chart applies the margin convention by offsetting the plotting area using a `<g>` transform, then scales the data with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Data is loaded asynchronously via `d3.csv` from a GitHub gist. React manages state and renders the SVG, while D3 v7 handles the data parsing and scale computations.

3: Bar Chart

This bar chart displays the populations of the ten most populous countries in 2020, using data from a UN population CSV file. The visualization is rendered as an SVG via React components, with horizontal bars scaled by population values. The code leverages d3’s `csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. React’s `useEffect` and `useState` manage data fetching and state, while `ReactDOM.render` mounts the chart into the DOM.

2: Rendering data with React and D3

A radial burst chart displays CSS named colors as a full circle of pie slices, each colored by its corresponding RGB hex value, with data loaded from a GitHub CSV file. Built with React and D3 v7, the visualization uses the `csv` function to fetch and parse data, `pie` to compute angles, and `arc` to generate SVG paths. React manages the loading state and renders the SVG, while D3 handles the geometry and layout.

1: Rendering Data With React

This example uses React to render a horizontal stacked bar chart from a CSV file of CSS named colors. The app fetches the data with d3.csv, displays a brief loading message, then maps each row to a colored div based on the RGB hex value. The chart uses fixed dimensions of 960 pixels wide by 5 pixels tall per color row, creating a striped spectrum. React’s useState and useEffect manage the asynchronous data loading and rendering state.

Loading Data with React & D3

This example demonstrates how React state manages data loaded asynchronously with D3. It fetches a CSV file of CSS named colors from a GitHub gist using `d3.csv` and stores the result in state via `useState` and `useEffect`. Once loaded, the app displays a text summary of the dataset, including file size in kilobytes, row count, and column count, computed with `d3.csvFormat`. While loading, it shows a “loading…” placeholder. The visualization is purely textual, highlighting the integration of D3’s data-loading utilities with React’s component life cycle.

Parsing CSV Data with D3

This example parses a CSV file of CSS named colors using D3 and displays the file’s size, row count, and column count as large text. It fetches the remote CSV via `d3.csv`, which returns a parsed data object, then uses `d3.csvFormat` to measure the data’s length and the `columns` property to count columns. The visualization renders the resulting statistics in an HTML `<pre>` element, demonstrating D3’s CSV parsing capabilities without any graphical chart.

Loading and Parsing CSV Data

This example demonstrates how to load a remote CSV file and print its raw contents to the browser console. It uses the `fetch` API to request a CSS named colors dataset hosted as a GitHub Gist, then calls `response.text()` to parse the response as a string. The program defines an async `fetchText` helper that returns the CSV text, and the console output reveals the data structure. No additional parsing or visualization libraries are used; the example focuses solely on the initial data-loading step.

Finished smiley faces

A grid of eighteen smiley faces demonstrates how D3 and React can compose modular SVG components. Each face uses randomized parameters for stroke width, eye position and radius, mouth width and radius, generating varied expressions. The code imports `arc` from D3 to draw the mouth path, while React components structure the face, background circle, eyes, and face container. The rendering is purely SVG, with all faces centered in their own viewport.