TontonRitonBZH

@TontonRitonBZH·4 public vizzes

Fork of Vega-Lite API Template

This visualization renders a line chart of the Auto MPG dataset from the UCI Machine Learning Repository, using the Vega-Lite API wrapper for JavaScript. It plots horsepower against weight, with a dual color encoding for weight as both a point color and origin as a categorical color, creating a gradient effect. The chart is built with `vega-lite-api`, `vega`, and `vega-lite`, with data loading via `d3.csv` and tooltips enabled through `vega-tooltip`. The visualization fills the browser window with a custom config for dark text and light gray axes.

Jan 12, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example displays a text summary of a CSV dataset instead of a traditional smiley face graphic. It counts the dataset’s rows, columns, and formatted size in kilobytes, outputting these values as large text. The visualization uses React with an `App` component that loads the CSS named colors CSV via D3’s `csv` function, then renders the message using a custom `message` module. The output is presented as SVG text within a preformatted block, using D3 v5 and React’s `useEffect` and `useState` hooks.

Jan 10, 2023

Loading thumbnail…

D3 Tutorial part 2

This example demonstrates how to retrieve and summarize a remote CSV file using D3.js. It fetches a comma-separated file containing CSS named colors from a GitHub gist, then displays a text summary of the data’s size in kilobytes, row count, and column count using `d3.csv()` and `d3.csvFormat()`. The result is rendered into an HTML `<pre>` element, with the asynchronous fetch handled via `fetch()` and JavaScript’s `async`/`await` pattern. The page uses the d3.v5 library and relies on basic DOM manipulation.

Jan 10, 2023

Loading thumbnail…

Tutorial D3, React

A React application renders a grid of 18 cartoon faces, each with randomly generated stroke widths, eye positions and radii, and mouth dimensions. The faces are built from reusable components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that compose SVG circles and a d3 path. The `Mouth` component uses `d3.arc` to generate a semicircular path. The code imports `range` from d3 to create the array of faces and uses ReactDOM to render the application into a single DOM element.

Jan 8, 2023