yungchiau

@yungchiau·17 public vizzes

Streamgraph

This streamgraph shows how species abundance varies with latitude, using a stacked silhouette layout. The code loads CSV data and applies `d3.stack` with `d3.stackOffsetSilhouette` to create the layered structure, then renders it with `d3.area` and `d3.scaleLinear` axes. A `d3.scaleOrdinal` assigns colors from `d3.schemeDark2`. Interactive hover effects, managed via mouseover, mousemove, and mouseleave events, highlight a layer and display its group name in a tooltip. The visualization is built with D3 v6 and rendered as an SVG.

Jan 22, 2022

Loading thumbnail…

Double circular barplot

A double circular barplot displays two related data series around a ring, with categories arranged radially and bar lengths extending outward. The first series, rendered in teal, uses a radial scale from an inner radius, while the second series, in blue, spans between two radial scales to show a range. The visualization reads data from a CSV and uses D3 v6 with `d3.scaleBand` for angular positioning, `d3.scaleRadial` for radii, and `d3.arc` to draw the bars as SVG paths. Category labels rotate around the chart for readability.

Jan 22, 2022

Loading thumbnail…

Untitled

This radial bar chart displays the distribution of sea surface temperatures across different climate classes, with each colored band extending outward from a central donut. The chart uses D3.js v6 with SVG rendering and React, loading CSV data from a GitHub gist. The code employs d3.scaleBand for angular positioning and d3.scaleRadial for radius values, while d3.arc constructs the annular bars with padded gaps. Labels are rotated and positioned around the perimeter, with text anchors adjusted to maintain readability. The inner radius is fixed at 90, and the outer radius scales up to the maximum data value of 39,999.

Jan 22, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes biodiversity records from Taiwan’s TaiBIF dataset, plotting counties against taxonomic classes as a scatterplot with semi-transparent circular marks. The visualization uses the Vega-Lite API, registered with Vega and Vega-Lite, to encode county, class, and a categorical field labeled “under the sea” onto the x-, y-, and color channels. Data is loaded asynchronously via d3.csv from a raw GitHub URL, with custom appearance configured through a Vega-Lite config object. The chart is rendered as SVG and fills the browser viewport, with a tooltip handler attached for interactivity.

Jan 22, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data (TaiBif)

This example displays a concise summary of a CSV dataset loaded from a GitHub gist containing TaiBif occurrence records. The page shows three numeric metrics: the file size in kilobytes, the total row count, and the number of columns, rendered in large text. It uses D3 v5's `d3.csv` promise-based method to fetch and parse the data, then `d3.csvFormat` to calculate the byte length. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`.

Jan 22, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates asynchronous data loading in a React component using D3’s `csv` function to fetch a named-color dataset from a GitHub gist. The app renders a text summary displaying the data size in kilobytes, row count, and column count once the CSV arrives, with a loading message before completion. It uses React hooks (`useState`) to manage state and invokes `d3.csv` within the component. The visualization is minimal, showing only a `<pre>` element with dynamic text, originally intended to accompany a "following circle" SVG sketch visible in the HTML comments.

Jan 15, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example loads a CSV file containing CSS named colors from a remote URL and displays summary statistics about the dataset, including its size in kilobytes, row count, and column count. It uses D3’s `d3.csv` method to fetch and parse the data, then computes metrics from the parsed array and the `data.columns` property. The visualization also demonstrates alternative approaches with the Fetch API and `d3.csvParse`, though those paths are commented out in the code.

Jan 15, 2022

Loading thumbnail…

Mouse Moving

A yellow circle follows the cursor as it moves over a blank SVG canvas, updating its position in real time. The visualization is built with React and uses the `useState` hook to track mouse coordinates from an `onMouseMove` event handler on the SVG element. The circle is rendered as an SVG `<circle>` with a fixed radius of 30 pixels, and its `cx` and `cy` attributes are bound to the current mouse position. The code relies on React's `ReactDOM.render` and imports the `arc` function from the d3 library, though the example does not apply any additional D3 data transformations.

Jan 15, 2022

Loading thumbnail…

Fork of Smiley Face Part V

This example renders a smiley face as a reusable set of React components, splitting the drawing across separate files for the background circle, eyes, and mouth. Each component receives its geometry through props, and the main SVG is assembled in `index.js` using React DOM. The mouth is generated with the `d3.arc()` generator, while the eyes and background are plain SVG circles. The code uses React 16.9.0 and d3 v5, with the face centered on a 960×500 viewport.

Jan 15, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors using the Fetch API with async/await syntax. The program fetches the remote CSV text and logs the raw data to the browser console, showing how to handle asynchronous data retrieval without D3’s built-in CSV parser. It uses `fetch()` with `response.text()` to access the file contents, echoing the text output directly. The code includes commented-out alternatives using `d3.csv` and `d3.csvParse`, but the active implementation purely relies on native JavaScript promises.

Jan 9, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A smiling face composed of a yellow circle with a black stroke, two black eyes, and a curved black mouth is rendered as an SVG. The React components BackgroundCircle, Eyes, and Mouth are split into separate files, using React Fragments to group the eye circles. The Mouth component builds its arc path with the d3.arc() API, while the overall layout is positioned with an SVG group transform. The example demonstrates modular React component composition for data visualization.

Jan 9, 2022

Loading thumbnail…

Fork of Smiley Face Part V

Jan 9, 2022

Loading thumbnail…

Fork of Smiley Face Part IV

This example renders a yellow smiley face as a static SVG graphic, built with a React component that uses D3’s `arc` generator to create the mouth path. The face consists of a yellow background circle with a black stroke, two black eye circles, and an open mouth, all positioned relative to the center of a 960×500 viewport. The code defines reusable React elements like `BackgroundCircle`, and uses inline styles via JSX attributes for stroke width and fill. The rendering approach combines React’s component structure with D3’s shape utilities, producing a fixed, non-interactive illustration.

Jan 8, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A cheerful yellow smiley face is rendered as a central circle with two eyes and a curved mouth, all drawn using SVG primitives within a React component. The visualization is built with React and D3, using D3’s `arc()` generator to create the mouth’s arc path, while the face’s geometry is defined by fixed coordinate offsets and radii. The code constructs a single SVG canvas, positioning the face at its center via a `translate` transform, and relies on React’s `ReactDOM.render` to inject the final graphic into the page.

Jan 8, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered to fill the browser window, with two black eyes and a yellow circular face outlined by a thick black stroke. The face is drawn using React components that generate SVG elements, with sizes and positions calculated from the window dimensions. It uses React 16.9 and ReactDOM to mount the SVG into the DOM, and positions the face using SVG `<g>` transforms. The mouth is not drawn, and all coordinates derive from the viewport size.

Jan 8, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face” shows a simple smiley face built from three SVG circles on a yellow head with a black outline. Two smaller circles form the eyes, positioned symmetrically around the center. The code uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside a 960-by-500 viewport. The rendering is entirely static SVG, with no JavaScript libraries or data sources involved, and the face remains incomplete, omitting a mouth.

Jan 8, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a single large yellow circle centered in a 960-by-500 SVG canvas, with a thick black outline. It is a minimal fork of a basic HTML page, demonstrating how raw SVG elements can be placed directly in a browser without any JavaScript libraries. The rendering uses the SVG `<circle>` element, styled via inline attributes for fill, stroke, and stroke width. The page's body has zero margin and hidden overflow, ensuring the circle fills the viewport without scrollbars. The code contains no data sources or interactive behavior, serving purely as a static visual.

Jan 6, 2022