Sophia Chiao

@ssdrsv·9 public vizzes

Fork of Stylized Line Chart

This line chart visualizes hourly temperature readings from the Data Canvas Sense Your City Dataset, emphasizing the curve’s continuous form with a smooth natural spline and no individual data points. The React-based application uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, while d3.line with curveNatural generates the stylized path. It renders as SVG with shared axis components, and the visualization omits circles in the marks layer to focus purely on the temperature trend across the week.

May 24, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

May 24, 2022

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as a horizontal bar chart with custom axes. It uses React hooks (useState, useEffect, and useCallback) to load data from the United Nations World Population Prospects 2019 via d3.csv, then renders SVG bars and axes. The chart builds axes manually with d3.scaleBand and d3.scaleLinear, using d3.ticks for x-axis tick values and computed positions for y-axis labels, rather than using d3.axisBottom or d3.axisLeft.

May 23, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a radial burst visualization of CSS named colors as an SVG, with each color occupying a slice of a circle. It loads color data from a CSV file using `d3.csv`, computes arc angles with `d3.pie`, and draws the paths with `d3.arc`. React manages the component state and lifecycle, using `useState` and `useEffect` to fetch the data asynchronously, while `ReactDOM` mounts the SVG into the DOM. The visualization fills each slice with the corresponding RGB hex value from the dataset.

May 23, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-screen yellow smiley face using SVG, with the face centered and scaled to the browser window. The face includes two black eyes and a yellow circular head with a thick black stroke, though it omits a mouth. The code computes dimensions from `window.innerWidth` and `window.innerHeight`, then uses React DOM to inject SVG elements like `<circle>` into the page. The implementation relies on React 16.9 for component rendering and updates the visualization responsively based on viewport size.

May 23, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A smiley face is rendered as a set of reusable React components, each defined in its own file: a yellow background circle, two eyes, and a mouth. The face is drawn using SVG shapes within a React application, with the mouth created using D3's `arc` generator. The example demonstrates modular component composition and uses React fragments to group the eyes. The visualization is static, with all dimensions and positions defined as constants and applied via SVG transforms.

May 21, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces, each rendered as a yellow SVG circle with black stroke, eyes, and an arc-shaped mouth. Built with React components and D3’s `arc` generator for mouth paths, the example uses `Math.random()` to vary stroke width, eye offset and radius, and mouth dimensions per face. D3’s `range` creates the face count, while the `FaceContainer` wraps all SVG elements in a translated group. The visualization demonstrates component-driven composition and reusability, with each face rendered independently via `ReactDOM.render`.

May 21, 2022

Loading thumbnail…

Fork of Smiley Face Part V

May 21, 2022

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a completely blank HTML page—the `index.html` file contains only a `<title>` tag and an empty `<body>`. It serves as a minimal template, using plain HTML without any embedded scripts, styles, or third-party libraries. The example’s purpose is purely structural, showing the bare skeleton of an HTML document with no visible content or interactive elements. The rendering approach relies solely on the browser’s default parsing of the HTML standard, with no data processing or visualization logic present.

May 20, 2022