tatpiras

@tatpiras·5 public vizzes

Vega-Lite API Template

This example shows a scatter plot of Milan metro suicide data, mapping years on the x-axis and metro lines on the y-axis with points colored by category. It uses the Vega-Lite API (vl) to declaratively define the visualization, with D3’s `csv` loading data from a Gist URL. The code registers Vega, Vega-Lite, and the vega-tooltip handler, then renders the chart as an SVG, sizing it to fit the window with custom axis and label styling from a shared config.

Sep 15, 2021

Loading thumbnail…

Loading data with D3 and React

This example demonstrates how to combine React with D3 to load and display external data. The application uses React's `useState` and `useEffect` hooks to manage the data-loading state and trigger the data fetch. It calls D3’s `csv` function to retrieve a CSV file containing CSS named colors from a remote GitHub gist. While the data is being fetched, the interface shows a "loading" message; once the data arrives, it switches to "loaded". The page is rendered into the DOM using ReactDOM’s `render` method, with D3 and React loaded via CDN in the HTML file.

Sep 15, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates loading and parsing CSV data for visualization, retrieves a CSS-named-colors dataset via a URL, and logs the parsed result to the browser console using `d3.csv`. The code also shows an alternative approach with `fetchText` and `d3.csvParse` for manually handling text responses. Built with React and D3 v7, it focuses on the asynchronous data-fetching pattern rather than rendering any visual output, with the React app rendering an empty component and the parsed data visible only through console inspection.

Sep 15, 2021

Loading thumbnail…

Mouse Follower

A static SVG circle initially sits at the center of a 960×500 viewport, but its position is updated in real time through React’s `onMouseMove` event handler. The `handleMouseMove` function logs the cursor’s `clientX` and `clientY` coordinates to the console as the mouse moves across the container. Rendered with React 16.9 and D3 v7, the example demonstrates a minimal interactive pattern where the circle’s location could be tied to mouse input, though the code currently only captures and reports the coordinates.

Sep 12, 2021

Loading thumbnail…

Hello HTML

This example renders a smiling face composed of SVG shapes, including a yellow background circle, two eyes, and a mouth created with a D3 arc path. The face is built from reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that accept props for positioning and sizing. The FaceContainer establishes an SVG coordinate system centered at a specified point, while D3’s `arc` generator defines the mouth’s curved shape. The visualization demonstrates how React and D3 can be combined to create declarative, parameterized graphics.

Sep 12, 2021