elia-dot

@elia-dot·5 public vizzes

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with acceleration on the horizontal axis and horsepower on the vertical axis. Each point represents a car model, and hovering reveals the car’s name via a tooltip. The visualization is built programmatically using the vega-lite-api library, which generates a Vega-Lite specification that Vega renders to SVG. Data is loaded from a CSV file via d3.csv, and the chart auto-fits the browser window. Axis styling is customized with a dark theme for improved readability.

Oct 5, 2021

Loading thumbnail…

Loading data with react and d3

This example demonstrates how to load a CSV dataset in a React component using the d3.csv method. The code fetches a list of CSS named colors from a GitHub gist and displays a message summarizing the loaded data, including its size in kilobytes, row count, and column count. The visualization uses React hooks (useState and useEffect) to manage asynchronous data loading, with the message formatted using d3.csvFormat and rendered as SVG.

Oct 5, 2021

Loading thumbnail…

Loading csv data

This example demonstrates loading and parsing CSV data from a remote URL. The page fetches the text file using the `fetch` API, then passes it to `d3.csvParse` to convert it into an array of JavaScript objects. The parsed data is logged to the browser console, showing the structure of the CSV content. The visualization uses D3 v7 and is built as a minimal HTML document with inline CSS and JavaScript, styled with a large centered font size.

Oct 5, 2021

Loading thumbnail…

Mouse Follower

A circle follows the cursor across an SVG canvas, updating its position in real time as the mouse moves. Built with React and D3 v7, the visualization uses React's `useState` hook to store the mouse coordinates and a `useCallback` handler to update them on every `onMouseMove` event. The circle is rendered as an SVG `<circle>` element, with its `cx` and `cy` attributes bound directly to the current mouse position, creating a smooth, direct response to user input.

Oct 5, 2021

Loading thumbnail…

HTML smile face

A modular React smile face rendered as SVG, composed of reusable components for the head, eyes, and mouth. The face is assembled from a yellow background circle with a dark stroke, two offset eye circles, and a curved mouth path generated with the d3 `arc()` generator using specified inner and outer radii and angular ranges. The `FaceContainer` component draws the SVG and translates the drawing to a central point, while parent props control all dimensions and positions.

Sep 23, 2021