lingfa

@lingfa·11 public vizzes

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with population values formatted in billions. The chart uses React components to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names and population counts to screen coordinates. Axes and marks are generated through custom React components, and the data comes from the United Nations World Population Prospects 2019, loaded via D3’s `csv` function. Styling applies the Poppins font with teal bars and gray tick lines.

Oct 31, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named colors as a radial burst, with each color occupying a wedge from the center to the outer edge. It loads data from a CSV file using `d3.csv`, then processes it with `d3.pie` and `d3.arc`. React hooks manage the asynchronous data loading, and React renders each slice as an SVG `<path>` using the color’s hex value for its fill. The chart uses D3 v5 and React 16.9, with all geometry computed via D3 utilities while React handles the DOM updates.

Oct 27, 2022

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data, mapping miles per gallon and horsepower with circle size representing vehicle weight and color indicating country of origin. Built using the Vega-Lite API, the code registers both Vega and Vega-Lite libraries, then chains mark and encoding specifications programmatically. Data is loaded asynchronously from a CSV file hosted on GitHub, using d3's csv parser, and rendered as an SVG with tooltips provided by the vega-tooltip handler.

Oct 27, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and vehicle weight using a scatter plot of the auto-mpg dataset. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an interactive SVG chart. Points are styled with size, opacity, and tooltips showing car names, while the chart automatically fits the window dimensions. Data loading uses D3's `csv` function, and appearance is customized through a reusable configuration object that adjusts axis labels, titles, and tooltip styling.

Oct 27, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The visualization uses the Vega-Lite API to declaratively encode data dimensions onto circle position, size, and color, with tooltips revealing car names. It renders as a responsive SVG, loading data from the UCI Auto MPG dataset via d3’s `csv` function. The example primarily demonstrates how the `vega-lite-api` library can construct specifications programmatically, complemented by vega-tooltip for interactivity and custom config for styling.

Oct 27, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example displays summary statistics for a dataset of CSS named colors, showing the file size in kilobytes, row count, and column count. A React application uses the `useState`, `useEffect`, and `useCallback` hooks to manage data loading, while D3’s `csv` function fetches and parses a remote CSV file from a GitHub gist. The computed metrics are rendered in a large `<pre>` element, with a “Loading…” placeholder shown until the asynchronous fetch completes.

Oct 27, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a plain-text summary of the CSS Named Colors CSV dataset loaded from a remote gist, showing its size in kilobytes, row count, and column count. It uses D3 v5’s `d3.csv` method to fetch and parse the data, then computes the formatted text with `d3.csvFormat`. The code also demonstrates alternative approaches commented out, including `fetch` with `async`/`await` and `d3.csvParse`, as well as a "pyramid of doom" pattern. The rendered output appears in a large `<pre>` element.

Oct 27, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part VI

Ten randomly parameterized smiley faces render in a grid, each with a yellow circular background, black stroke, two eyes, and an arc-shaped mouth. Built with React components and D3’s `arc` generator, the faces use randomized values for stroke width, eye offset, eye radius, mouth radius, and mouth width. The SVG output is produced via React’s `ReactDOM.render`, with D3 v5 providing the arc path calculation and utility functions like `range`.

Oct 24, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

This example displays a grid of eighteen randomly parameterized smiley faces, each rendered as an SVG by React components. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` elements, with `Mouth` using the D3 `arc` API to generate a semicircular path. Random values for stroke width, eye offset, eye radius, and mouth dimensions are generated via `d3.range` and `Math.random` in `index.js`, producing a playful variety of facial expressions. The code integrates React 16.9 and D3 5.11 within a simple HTML page, showcasing a modular approach to generative visualization.

Oct 24, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiley face as an SVG graphic using React and D3. It shows a yellow circle with black stroke, two eye circles, and a curved mouth arc, all centered within a 960×500 viewport. The code uses React’s `ReactDOM.render` to mount the component, while D3’s `arc()` generates the mouth path with specified inner and outer radii and angular start/end points. The drawing is static, with all positional constants like eye offsets and radius defined upfront, and no interaction or data binding beyond the fixed geometry.

Oct 24, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal SVG visualization that displays two overlapping circles: a large yellow circle with a thick black outline and a smaller black circle positioned to its upper left. The graphic is rendered directly in an HTML page using inline SVG elements, with no external data sources or libraries. The example demonstrates how raw SVG shapes can be embedded in a simple HTML document, with circle elements defining their position, size, fill color, and stroke properties.

Oct 23, 2022