Ying-Liu21

@Ying-Liu21·9 public vizzes

Fork of Organization Graph Diagram

This visualization shows the network of organizations connected to the Kenneth Rainin Foundation, using a force-directed graph with colored nodes and links. D3’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` arrange the nodes, while a drag interaction lets users reposition them. The SVG rendering uses circles for nodes, lines for links, and text labels, with node size distinguishing main organizations, child nodes, and leaves. The data is defined in a separate `data.js` file, and colors are generated from Palette.

Apr 22, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart stripped of all axes and labels, emphasizing raw bar lengths over context. Built with React and D3, it loads United Nations World Population Prospects 2019 data via `d3.csv`, converts the “2020” population field to numbers, and slices the dataset to the first ten rows. Each bar is an SVG rectangle positioned with `d3.scaleBand` for the y-axis and sized using `d3.scaleLinear` and `d3.max` for the x-axis, all within a fixed 960×500 viewport.

Apr 14, 2021

Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors is rendered as an SVG using React, with each color represented as a pie slice emanating from the center. The code loads color data from a CSV via `d3.csv`, then uses `d3.pie` to compute slice angles and `d3.arc` to generate the path geometry. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and trigger re-rendering, while each `<path>` element fills its slice with the corresponding hex value from the dataset.

Apr 14, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, mapping miles per gallon on the x-axis against horsepower on the y-axis, with color encoding for the country of origin and point size reflecting vehicle weight. Tooltips reveal each car’s name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data via d3.csv, and applies a custom configuration for styled axes and labels. The chart renders in SVG and fits the browser window.

Apr 14, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to fetch and display a summary of a CSV dataset of CSS named colors. It uses React state to manage the loading lifecycle, initially showing a loading message, then reporting the dataset’s size in kilobytes, row count, and column count after the data arrives. The code employs the `d3.csv` function to load the data from a GitHub gist, `d3.csvFormat` to calculate its byte size, and React hooks (`useState` and `useEffect`) to handle asynchronous updates.

Apr 13, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and parse a CSV file from a remote URL within a React-based D3 visualization. The code uses `d3.csv()` to fetch CSS Named Colors data, then displays the file size in kilobytes, row count, and column count in a preformatted text container. The interface provides immediate feedback about the dataset’s structure, while the underlying logic leverages D3 v5’s promise-based CSV parsing and formatting APIs to handle the data.

Apr 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a simple interactive visualization where a single circle follows the user's mouse movements across an SVG canvas. The React component tracks the mouse position using the `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` attributes in real time. The code uses React 16.9.0 with `ReactDOM.render` to mount the SVG element, and the initial mouse position is set to the center of the 960×500 viewport.

Apr 13, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data from a remote URL into a web page using the Fetch API and D3.js v5. The visualization displays the raw text content of a dataset containing CSS named colors, fetched from a GitHub gist, directly in a `pre` element. The code employs an asynchronous `fetchText` function that converts the response to text, showcasing the use of JavaScript promises and async/await syntax for handling data loading without a rendered chart.

Apr 13, 2021

Loading thumbnail…

Hello HTML

Fifty randomly generated smiley faces fill the screen, each with distinct eye offsets, radii, and mouth thicknesses. The example demonstrates how to compose reusable React components to build a simple SVG visualization, layering a yellow background circle, black eyes, and an arc-based mouth. It uses React 17 with function components and props, while D3 v6’s `arc` generator creates the mouth paths and `range` produces the array for the face count. The faces are rendered as SVG elements within translated coordinate groups.

Apr 13, 2021