G

Gordon Yang

@kuankuan27·31 public vizzes

Loading thumbnail…

Ep 24 Bar Chart ReactD3 Styliazed

This example shows a horizontal bar chart displaying the top 10 countries by population for the year 2020, drawn using React and D3 v6. The SVG-based visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Population values are formatted using D3’s `format` function, converting values like "1.4B" for billions, and data is loaded from a CSV file via `d3.csv`. The chart features a Poppins font, styled gridlines, and tooltips showing the formatted population for each country on hover.

Loading thumbnail…

Ep 25 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width on the x-axis against petal length on the y-axis using a linear scale. The React-based visualization renders circles as SVG marks, with axes generated by custom React components that leverage d3’s scaleLinear and extent functions. Hovering over each circle reveals its value via a native SVG title tooltip. The chart is styled with Poppins font and muted colors, with axis labels and tick formatting applied through d3’s format function.

Loading thumbnail…

Ep23 Bar Chart ReactD3 Refactor

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG elements in a React component. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to map country names and population values to pixel coordinates, while React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the rendering of axes and bars. Data is loaded asynchronously from a CSV file using D3’s `csv` method. The code demonstrates a refactored pattern where D3 handles scales and data loading, while React manages the DOM updates.

Loading thumbnail…

Ep22 Margin Convention

A horizontal bar chart displays the top 10 countries by 2020 UN population estimates, using teal bars on a white background. The React app loads CSV data from a GitHub gist, parses the population column, and sorts by descending value. D3’s `scaleBand` positions the country categories on the y-axis, while `scaleLinear` maps population values to bar widths. SVG tick marks and labels are generated via `xScale.ticks()`, with axis lines and country names positioned relative to the fixed margins.

Loading thumbnail…

Ep21 Bar Chart with React/D3

This example displays a horizontal bar chart of the top ten countries by projected 2020 population, sourced from a UN population dataset (CSV). Built with React and D3 v6, the app fetches data via `d3.csv`, sorts it, and renders SVG `<rect>` elements. It uses `scaleBand` for the y-axis countries and `scaleLinear` for the x-axis population values, with bar widths mapped to population counts and heights set by the band’s `bandwidth`. React’s `useState` and `useEffect` handle data loading, while `ReactDOM.render` mounts the chart into the root div.

Loading thumbnail…

Fork of Ep20 Visualizing with React D3 tryPie

A pie chart displays the CSS named colors as equal-sized slices, each filled with its corresponding RGB hex value. The visualization loads color data from a CSV gist using `d3.csv` and renders slices with `d3.pie()` and `d3.arc()` inside a React component. The chart uses React hooks for state management and renders SVG paths within a centered group, with D3 v6 handling the data-to-geometry transformation.

Loading thumbnail…

Ep20 Visualizing with React D3 tryArc refactor

This example visualizes CSS named colors as a circular pie chart, with each wedge representing one color from a CSV dataset loaded via `d3.csv`. The React `App` component fetches the data asynchronously and renders SVG paths using `d3.arc` to compute the wedge geometries based on evenly divided start and end angles. The chart sits centered within a 960×500 SVG canvas, with each path filled by the color’s hex value from the data.

Loading thumbnail…

Ep20 Visualizing with React D3 tryArc

This example visualizes the CSS named colors dataset as a full pie chart, with each color represented as a single arc slice arranged around a central point. The React component loads CSV data via `d3.csv`, then uses the `d3.arc` generator to compute SVG path geometries for each slice, filling them with their corresponding hex values. The chart renders entirely as SVG within a React functional component, using hooks like `useState` and `useEffect` to manage asynchronous data loading. The arcs span from the center to the full chart radius, creating a simple yet comprehensive color wheel.

Loading thumbnail…

Fork of D3 and React Smiley

This example demonstrates a modular React component approach to rendering a smiley face using SVG. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` sub-components, with the mouth drawn using D3’s `arc` generator with specified inner and outer radii and start/end angles. The face is positioned within an SVG container via a `<g>` transform, and all visual properties—such as eye offset, radius, and stroke width—are passed as props from the top-level `App` component. React renders the SVG declaratively, while D3 handles the geometric path calculation.

Loading thumbnail…

ep16 Load data in React

This example demonstrates how to load and display a summary of a CSV dataset within a React application. The app fetches a CSV file of CSS named colors from a GitHub gist using the `d3.csv` function, then presents the file size in kilobytes, row count, and column count after the data loads. It uses React’s `useState` and `useEffect` hooks to manage the asynchronous data fetch and render the loading state. The visualization relies on React and ReactDOM, while D3 v6 handles CSV parsing and formatting.

Loading thumbnail…

ep15 Parsing CSV Data with D3

This example demonstrates how to fetch and parse CSV data using D3’s `d3.csv` method, displaying summary statistics about the dataset in a large text block. The code loads a CSV file containing CSS named colors from a GitHub gist, then computes and renders the file size in kilobytes, row count, and column count using `d3.csvFormat` and the parsed data’s `.length` and `.columns` properties. The visualization is minimal, showing only the parsed file’s metadata rather than a graphical chart, with the results presented in an HTML `<pre>` element styled with large font size.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source, displaying the raw text in the browser console. It fetches a CSV file containing CSS named colors from a GitHub gist using the Fetch API with async/await syntax, then logs the text content. The code uses d3.v5 and React as the framework, though the visible implementation focuses on JavaScript’s native `fetch` and `response.text()` methods. A large empty `<pre>` element sits on the page, but no data is rendered into it.

Loading thumbnail…

Ep14 Interaction with React

This example shows a single circle rendered in SVG that follows the mouse cursor across a 960 by 500 canvas. The circle’s position updates in real time based on the pointer’s client coordinates. Built with React, it uses the `useState` and `useCallback` hooks to manage and update the mouse position state. The `onMouseMove` event handler on the SVG element triggers the state change, and ReactDOM renders the circle element with dynamic `cx` and `cy` attributes.

Loading thumbnail…

D3 and React Smiley

This example shows a smiley face composed of SVG shapes, with a yellow circular background, two black eyes, and an arc-shaped mouth. The face is built from reusable React components—BackgroundCircle, Eyes, and Mouth—assembled within a FaceContainer that wraps the SVG and applies a translation to center the graphic. The mouth uses the d3.arc() API to generate an SVG path with specified inner and outer radii and angular extents, while the overall layout is positioned using React props passed from the top-level App component.

Loading thumbnail…

Hello HTML

This example renders a simple smiley face using React components for SVG shapes, with a yellow circle as the face, black eyes, and a mouth drawn with a D3 arc generator. The application uses ReactDOM to mount the SVG into an HTML page, and imports the `arc` function from D3 v6 to compute the mouth’s path. All positions and sizes are defined as constants, and the face is centered using an SVG transform. No data source is involved; the visualization is purely illustrative.

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with black outlined eyes and a curved mouth is rendered as an SVG inside a React application. The code splits the face into separate ES6 module components, including `BackgroundCircle`, `Eyes`, and `Mouth`, using React fragments. The `Mouth` component uses the `arc` function from `d3` to define its path, while fixed numeric constants set the face dimensions. This example demonstrates modular component reuse with React and D3.

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization is built with React and renders a single circle element whose center coordinates are updated on mouse movement. The code uses React’s `useState` and `useCallback` hooks to manage the cursor position, and the `ReactDOM` library for rendering. The SVG’s `onMouseMove` event handler captures the cursor’s `clientX` and `clientY` values, which are then set as the circle’s `cx` and `cy` attributes. The canvas is fixed at 960 by 500 pixels, and the circle has a radius of 30 pixels.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the D3.js library, displaying a summary of the parsed content. It fetches a CSV file containing CSS named colors from a GitHub Gist and uses `d3.csv` to parse the remote data asynchronously. The program then calculates and displays the file size in kilobytes, the number of data rows, and the column count in a large `<pre>` element. The visualization is minimal, focusing on the data-loading process rather than graphical representation, using D3 v5 within a React framework.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a radial burst visualization of CSS named colors using React and D3. The code loads color data from a CSV file via the `csv` function, then uses `pie` and `arc` from D3 to compute the angular segments. Each segment is rendered as an SVG `path` with its fill color set to the corresponding CSS color value, creating a full circular display. The React component manages the data asynchronously with `useState` and `useEffect`, showing a loading message until the data arrives.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count of the CSS Named Colors dataset. The code uses D3 v5’s `d3.csv` method to fetch and parse the data asynchronously, then formats the summary using `d3.csvFormat` and `data.columns`. A commented-out alternative shows parsing via the Fetch API with `async`/`await` and `d3.csvParse`. The results are rendered as large text inside an HTML `<pre>` element.

Loading thumbnail…

Fork of Make a Face with D3 and React

This example demonstrates a simple animated face built with D3.js v6 and React. It shows a yellow circle with eyes, brows, and a mouth, where the brows animate vertically up and down over time. The visualization uses D3’s SVG selection and shape creation methods such as `select`, `append`, `attr`, and `transition`, along with the `arc` generator to draw the mouth path. React handles the page’s header and initial render, while D3 directly manipulates SVG elements.

Loading thumbnail…

Make a Face with D3

This example demonstrates how to construct a smiling face using D3 version 6 and React. It builds the face from SVG shapes—a yellow circle for the head, two black circles for eyes, and a path for the mouth—all centered and scaled with data from the SVG's width and height attributes. The eyebrows are animated using D3's `transition` API, moving them vertically over two sequential 2-second intervals. The code leverages D3's `select`, `arc`, and `attr` methods, along with React's `render` function to manage the SVG output.

Loading thumbnail…

D3 Making a Bar Chart

This example shows a horizontal bar chart of country populations using data from a CSV file. The chart loads population figures for ten countries, scales them by 1,000, and renders them as steel-blue rectangles with an ordinal y-axis and linear x-axis. The code uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to bind data and draw SVG elements.

Loading thumbnail…

Test D3

This example demonstrates a minimal D3 version 6 setup, rendering the text “324” centered on a page. The code uses D3’s `select` function to target the body element and replace its content with an array of objects containing a name and value. The page loads D3 from a CDN, with an accompanying `bundle.js` file, while the README links to a YouTube tutorial on getting started with D3 v6.

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top ten most populous countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers. Grid lines extend through the plot area, and axis labels are formatted using `format('.3s')` to abbreviate large numbers.

Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, using a custom-styled axis to improve readability. The chart maps population values to bar lengths and country names to vertical bands, with the x-axis formatted in compact notation (e.g., “1.41B”) via `d3.format`. The bar chart is rendered in SVG using D3 v6, with `d3.scaleLinear` for the x-scale and `d3.scaleBand` for the y-scale. Both axes are customized by removing default domain lines and adding tick marks that extend across the plot. Population data is loaded from a CSV file and multiplied by 1000 before rendering.

Loading thumbnail…

js object and array

This example demonstrates basic JavaScript object and array manipulation within a minimal HTML page, displaying the static text "Hello HTML" at a large font size. The code defines a car object with properties like year, make, model, and price, then accesses the year property using bracket notation with a variable. It logs the result to the browser console using console.log. The page uses plain HTML, CSS for styling, and vanilla JavaScript without any external libraries or frameworks.

Loading thumbnail…

Fork of D3 Starter

This example displays the text “Hello D3 version 6” in the center of the page, using a thirteen-em font size. It loads the D3 library from a CDN and uses the `select` function to target the `body` element, then calls the `.text()` method to set its content. The demonstration serves as a minimal starter template for D3 v6 projects.

Loading thumbnail…

Play with SVG and CSS

A static SVG composition demonstrates primitive shapes and CSS styling within a D3 version 6 setup. The example shows circles, rectangles, lines, and a path grouped and transformed via SVG attributes, including scaling and translation. CSS classes apply stroke properties to line elements and redefine the path’s stroke color. The page uses `d3.select` from the D3 library to replace the body text with “Hello D3 version 6,” while the HTML structure and stylesheet handle all visual rendering without interactive behavior.

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart comparing the populations of four countries—China, India, the United States, and Indonesia—loaded from a CSV file. The visualization uses D3’s `select` and `csv` functions to read the data and render the chart. The code appears incomplete, with an empty SVG selection and a placeholder `widh` variable, leaving the actual bar geometry undefined. A large, styled text element displays the word “Texft,” suggesting the example is a partial or experimental scaffold.

Loading thumbnail…

Cars Report

This example displays the text “Hello HTML” in enormous type, centered on the page, with a static report titled “Cars Report.” It demonstrates a minimal React-free setup using raw HTML and CSS for layout, plus a JavaScript console message. The page loads a bundled script (`bundle.js`) that logs “Hello JavaScript!” to the browser’s developer tools. The styling relies solely on a `<style>` block with a 13em font size, and no external visualization libraries or data sources are present.