TOKIHISA

@TOKIHISA·7 public vizzes

Fork of Vega-Lite API Template

This visualization displays car attributes from the UCI Auto MPG dataset, plotting horsepower against origin while encoding weight through both color and point size. It uses the Vega-Lite API alongside vega, vega-lite, d3.csv for data loading, and vega-tooltip for interactive hover details. The chart automatically fits its container dimensions, with custom axis styling and a dark color scheme to enhance readability. Each data point represents a car model, with tooltips revealing the vehicle name.

Jan 9, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3, displaying the file size, row count, and column count as text. The visualization relies on React's `useState` hook to manage data asynchronously, fetching the remote dataset via `d3.csv` and formatting the summary with `d3.csvFormat`. Initially, the page shows “loading” until the data arrives. The output is rendered as SVG-less HTML text via ReactDOM, with styling set globally in the document structure. The data source is a Gist-hosted CSV of named colors.

Jan 8, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of named colors using D3 v5. It fetches the remote CSV via `d3.csv`, then displays the file size in kilobytes, row count, and column count as large text in a `<pre>` element. The code also includes commented alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. The visualization focuses on data ingestion metrics rather than graphical representation, highlighting basic D3 data-handling workflows.

Jan 8, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads a CSV file of CSS named colors from a GitHub gist and displays basic statistics about the dataset in large text. It shows the file size in kilobytes, the number of rows, and the number of columns. The code uses D3 v5’s `d3.csv` method, which returns a promise, and formats the result with `d3.csvFormat` to calculate the byte count. A commented-out alternative demonstrates fetching the same data with the Fetch API and `d3.csvParse`.

Jan 8, 2022

Loading thumbnail…

mouse_folow

A yellow circle follows the mouse cursor across an SVG canvas, its position updating in real time. The React app tracks pointer coordinates through an `onMouseMove` event handler, storing them in state and re-rendering the circle's `cx` and `cy` attributes. This interactive sketch uses React's `useState` hook and ReactDOM, with D3.js loaded but not actively employed in the visible logic.

Jan 8, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a plain yellow SVG face composed of a single circle, rendered at the center of a 960-by-500 canvas. It does not animate or display facial features; instead, it responds to mouse movement by logging the pointer’s client coordinates to the console. The visualization uses React 17 for component structure and the `onMouseMove` event handler, while D3 v7 is loaded but not used for rendering. The SVG circle is drawn with fixed `cx`, `cy`, and `r` attributes, and the page is set up with an HTML template and bundled JavaScript.

Jan 5, 2022

Loading thumbnail…

Fork of Smiley Face Part III

The visualization displays a grid of eighteen randomly generated smiley faces, each with varying eye and mouth sizes, rendered as yellow circles with black outlines. It shows how React components compose reusable SVG shapes—a background circle, eyes, and a mouth—into a cohesive face. The code uses ReactDOM to mount the app and D3’s `arc` generator to create the mouth paths, with `range` from D3 used to produce the array of face instances. All shapes are drawn in SVG, with positions centered via a translated group.

Jan 4, 2022