jaowei

@jaowei·7 public vizzes

Working with time

This example visualizes temperature over time using a smooth line chart. The graph displays a week of San Francisco temperature data, with time on the x-axis and temperature on the y-axis. The code uses React to render SVG elements, with axes and marks created using custom components. It leverages d3’s `scaleTime`, `scaleLinear`, and `line` with curveNatural to generate the path, and `csv` to load the data from a provided URL.

Apr 20, 2021

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis. Each circle represents a flower sample, with a native SVG title element providing tooltip information on hover. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and `extent` to compute the domain from the data. Axis components are custom React components that generate SVG ticks and labels, with a clean design using Poppins typography and teal-colored marks.

Apr 20, 2021

Loading thumbnail…

Fork of making a bar chart with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using United Nations population data loaded via `d3.csv`. React renders SVG bars, axes, and labels, while D3 scales (`scaleBand`, `scaleLinear`) compute positions and the `format` API converts tick values to abbreviated strings like "1.4B". The code separates concerns into reusable components for axes and marks, with a custom `useData` hook managing asynchronous data fetching.

Apr 19, 2021

Loading thumbnail…

Rendering Data using React

A React application renders a pie chart of named CSS colors using SVG paths, with each slice colored according to its hex value from a CSV dataset. The code uses React hooks like `useState` and `useEffect` to manage asynchronous data loading, while D3’s `csv`, `pie`, and `arc` functions handle data parsing and shape generation. The chart is drawn inside a React component that returns SVG elements, demonstrating a hybrid approach where D3 handles computation and React handles rendering.

Apr 7, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of car data, with each point representing a vehicle. The visualization uses a circular mark with low opacity to show the distribution of horsepower across different regions of origin, with tooltips revealing the car’s name. The chart is built using the Vega-Lite API, which programmatically defines the visualization, while D3’s `csv` method loads the dataset. The rendering is handled by Vega and Vega-Lite, with a custom tooltip handler and styling to improve readability.

Apr 5, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a simple text summary of CSV data loaded from a remote URL, showing the file size in kilobytes, row count, and column count. The visualization uses D3.js v5 to fetch and parse the CSS Named Colors dataset from a GitHub gist, leveraging the `d3.csv` function to handle the asynchronous loading and parsing. The parsed data is then formatted back into a string with `d3.csvFormat` to calculate its memory footprint, and the resulting statistics are rendered as large text in an HTML `<pre>` element. The code demonstrates a straightforward data-loading workflow without any graphical charting.

Mar 31, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen identical yellow faces, each composed of SVG circles and an arc-based mouth, is rendered with randomized eye sizes. The React components build the face from reusable parts, while D3's `arc` generates the mouth path. D3's `range` and `Math.random()` populate the layout, and ReactDOM renders the result into the page.

Mar 31, 2021