bingsen0806

@bingsen0806·9 public vizzes

Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, using horizontal bars scaled by population from the United Nations World Population Prospects 2019 dataset. The visualization employs React components with D3 v5 scales and axes, rendering SVG rectangles via the `Marks` component. Axis components create the bottom and left tick marks, while D3’s `scaleBand` and `scaleLinear` position bars and values. Text labels use Poppins typography, and the chart omits gridlines for a stylized, clean appearance.

Jun 16, 2021

Loading thumbnail…

Refactored Bar Chart

This visualization uses a refactored React and D3 v5 approach to display the top 10 most populous countries as horizontal bars, with the United Nations World Population Prospects 2019 data loaded via the `d3.csv` API. It shows a clean, axis-labeled bar chart generated through modular components: `AxisBottom` and `AxisLeft` create tick marks and labels using `scaleLinear` and `scaleBand`, while `Marks` renders each rectangle bar based on population values. The SVG output is rendered directly by React, with axes and bars drawn using explicit coordinate transformations.

Jun 16, 2021

Loading thumbnail…

Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, labels, or tick marks, making the bars appear oddly floating and "pathetic." It uses React hooks (`useState`, `useEffect`, `useCallback`) to fetch and sort data from the United Nations World Population Prospects 2019 CSV via `d3.csv`, then renders SVG `<rect>` elements using `d3.scaleBand` for the y-axis positions and `d3.scaleLinear` with `d3.max` for the widths. The chart updates asynchronously, showing a loading message until data arrives.

Jun 15, 2021

Loading thumbnail…

Loading Data with React and D3

This example shows a pie chart of CSS named colors, with each slice filled using the color’s RGB hex value from a CSV dataset loaded via D3’s `csv` utility. React’s `useState` and `useEffect` manage the asynchronous data loading, displaying a “Loading…“ message until the data arrives. The SVG pie chart is generated with D3’s `pie` and `arc` functions, and each segment is rendered as an SVG `path` element with a fill color taken directly from the dataset’s `RGB hex value` column.

Jun 15, 2021

Loading thumbnail…

Smiley Face Part III

A yellow smiley face with black-outlined eyes and a curved mouth is rendered as a static SVG chart. The React component constructs the face using D3's `arc()` generator for the mouth path, while positioning circles for the head and eyes through SVG attributes. The visualization uses hard-coded dimensions and coordinates, with React managing the DOM and D3 v5 providing geometric calculations for the arc.

Jun 15, 2021

Loading thumbnail…

Mouse Follower

This example displays a large-format text report of CSS named colors data loaded from a CSV file. The page uses React state to store the parsed data, which is initially set to "Loading..." and then updated once D3’s `csv` utility fetches and parses the remote dataset. A custom message function formats the information, computing file size in kilobytes from `d3.csvFormat`, row count, and column count. The application is built with React hooks (`useState`, `useEffect`) and rendered via `ReactDOM.render`.

Jun 15, 2021

Loading thumbnail…

Vega-Lite API Template

This visualization displays the Auto MPG dataset, showing the relationship between acceleration, horsepower, origin, and weight for various car models. Using the Vega-Lite API, the code constructs a scatter plot with a custom dark theme and tooltips, rendering through the vega and vega-lite libraries. Data is loaded asynchronously via the d3.csv function, and the visualization is configured to fit the viewport size, emphasizing interactive exploration of the data.

Jun 15, 2021

Loading thumbnail…

Loading and Parsing CSV

This example shows how to load and parse a CSV file with D3 v7, displaying a summary of the dataset’s size, row count, and column count. It fetches a CSV of CSS named colors from a GitHub gist, then uses `d3.csv` to parse the text and `d3.csvFormat` to measure the data’s file size in kilobytes. The results are written to a `<pre>` element on the page using vanilla JavaScript and the `fetch` API for the initial request.

Jun 15, 2021

Loading thumbnail…

Smiley Face Part I

This example shows a grid of 18 randomly generated smiley faces, each with distinct eye sizes and mouth shapes. Built with React and D3 v7, the visualization reuses modular SVG components—`Face`, `BackgroundCircle`, `Eyes`, and `Mouth`—to construct every face. The `Mouth` component uses the `d3.arc()` API to draw curved paths, while `d3.range()` generates the face array, and random properties for eye radius and mouth dimensions vary each rendering. All faces are drawn in a single SVG container using transformed coordinate groups.

Jun 15, 2021