riizevans

@riizevans·5 public vizzes

vega-lite-api

This example demonstrates a scatter plot of automotive data, mapping engine displacement on the x-axis and horsepower on the y-axis, with tooltips revealing car model names. It is built using the vega-lite-api library, which provides a programmatic interface to Vega-Lite specifications. The code registers Vega and Vega-Lite, loads data from a CSV via d3.csv, and renders the visualization as an SVG. A custom configuration adjusts axis ticks and label styling.

Aug 24, 2023

Loading thumbnail…

load-csv-data

This example demonstrates how to load and summarize a CSV dataset in a React application using D3. The page displays a text message indicating the number of columns, rows, and file size in kilobytes once the data from a GitHub gist has been fetched. The code uses the `d3.csv` function to parse the remote CSV file, and React hooks `useState` and `useEffect` manage the asynchronous data loading and state updates. The result is rendered as a simple `<pre>` element showing the computed data metrics.

Aug 24, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v5. It fetches a remote dataset of CSS named colors and displays key statistics about the data, including the number of columns, rows, and file size in kilobytes. The primary approach uses `d3.csv` to directly fetch and parse the CSV, while commented-out code shows an alternative using the Fetch API with `async/await` and `d3.csvParse`. The results are rendered as plain text in an HTML `<pre>` element.

Aug 24, 2023

Loading thumbnail…

mouse-circle

A yellow circle is drawn as an SVG element that follows the mouse cursor across a 960×500 canvas. The React component uses the `useState` and `useCallback` hooks to track the cursor’s client coordinates and update the circle’s `cx` and `cy` attributes on every `onMouseMove` event. The visualization demonstrates a basic interactive rendering pattern with React and SVG.

Aug 24, 2023

Loading thumbnail…

Fork of Hello HTML

A React and D3 page renders a yellow smily face centered on a black-stroked circle, with two eyes and an arc-shaped mouth. The face is drawn using SVG shapes, including a circle for the background, two smaller circles for eyes, and a path generated by the D3 arc generator. React components, `BackgroundCircle` and `Eyes`, assemble the features, while D3’s `arc()` API defines the mouth’s inner and outer radii and angular span. The code runs in D3 v5 and React 16.9, producing a static SVG visualization.

Aug 3, 2023