sking8484

@sking8484·8 public vizzes

ExploreVLAPI

This example demonstrates how to build interactive visualizations using the Vega-Lite API within a React application. It loads automobile data from a remote JSON dataset and renders a scatterplot showing the relationship between miles per gallon and engine displacement, with color encoding for cylinders and faceting by origin. The visualization leverages the vega-lite-api library to construct the chart declaratively, while vega-tooltip enables hover interactions. Data is fetched asynchronously using a custom getData function, and the resulting chart is rendered as an SVG inside a React component.

May 17, 2022

Loading thumbnail…

vizualization_vega-lite-api

This example visualizes the relationship between acceleration and horsepower for automobile models, with a tooltip displaying the vehicle name on hover. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG within a React application. Data is loaded asynchronously from a CSV file using D3’s `csvParse`. The chart uses configurable axis and label styling, and employs a dark color scheme for text and tooltips.

May 12, 2022

Loading thumbnail…

loadingDataReact

This example demonstrates a React-based data loading workflow that fetches a CSV file containing CSS named colors, parses it with `d3.csvParse`, and displays summary statistics including file size in kilobytes, row count, and column count. The application uses React's `useState` and `useEffect` hooks to manage asynchronous data fetching, while `d3.csvFormat` calculates the formatted data size. The visualization renders as SVG, though the current output is a text-based message displayed in a large `<pre>` element, showing the data's dimensions after retrieval.

May 12, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing external CSV data for use in a JavaScript application. The code fetches a text file containing CSS named colors from a remote GitHub Gist URL using the `fetch` API, then converts the raw text into a structured data table with `d3.csvParse`. The parsed result is logged to the console, showing how D3’s CSV parsing utility works alongside native asynchronous HTTP requests.

May 11, 2022

Loading thumbnail…

Mouse Follow

This example shows a small yellow circle that follows the mouse as it moves over a blank SVG canvas. The circle’s position is updated reactively through React’s `useState` and an `onMouseMove` event handler. The visualization is built with React and D3 v5, rendering an SVG element whose width and height are fixed at 960 by 500 pixels. The circle’s center coordinates are set directly from the mouse event’s `clientX` and `clientY` values, and the component is mounted using `ReactDOM.render`.

May 11, 2022

Loading thumbnail…

Hello HTML

Five instances of the same yellow smiley face with black stroke are rendered in a grid. The face is built by composing React components for the background circle, eyes, and mouth, with the mouth drawn using D3's `arc` function to create a path. The entire composition is placed inside an SVG container, and the faces are generated by mapping over an array of five elements.

May 11, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example uses React 18 and ReactDOM to render a yellow smiley face as an SVG that adapts to the browser window’s dimensions, centering the face and scaling its radius based on the viewport height. The visualization draws a filled yellow circle with a black stroke, two dark eye circles positioned symmetrically, and omits a mouth despite the title. Window resizing recalculates the center and radius, ensuring the face fills the screen proportionally.

May 9, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a simple, static smiley face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The React library is loaded via a UMD script and imported in JavaScript, though the visualization itself is hardcoded directly in the HTML markup rather than generated through React components. The page renders the graphic using inline SVG elements, with the body styled to remove margins and hide overflow.

May 9, 2022