leongtini

@leongtini·8 public vizzes

Pupil Diameter

This line chart displays pupil diameter over time, measured from the right eye, with the y-axis fixed from 0 to 7 millimeters. The visualization filters the dataset to the first eleven data points and renders them as a smooth, navy blue curve. The code uses D3 v5 with `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for the path, drawing to an SVG canvas. Data originates from a CSV file loaded via `d3.csv` and is normalized by converting timestamps into minutes.

Nov 1, 2022

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map rendered in SVG using the natural Earth projection. Users can pan and zoom by dragging or scrolling, with the viewport transform applied to a group element. Country boundaries and names come from world-atlas TopoJSON and TSV data. The visualization uses d3.geoPath for geographic paths, d3.zoom for interaction, and CSS hover states that turn countries red. A sphere outline and background fill complete the globe-like appearance.

Sep 14, 2022

Loading thumbnail…

Fork of Coronavirus Deaths by Country over Time (with Voronoi Hover)

This interactive line chart displays cumulative coronavirus deaths by country over time, using a logarithmic scale to compare countries with vastly different death tolls. Hovering over the visualization triggers a Voronoi overlay, built with d3-delaunay, to identify the nearest data point and highlight its corresponding line with a tooltip. The chart is rendered with SVG within a React framework, using d3.scaleTime and d3.scaleLog for axes and d3.line for path generation. Data comes from the Johns Hopkins Coronavirus Dataset.

Sep 14, 2022

Loading thumbnail…

Loading Data with R&D

A full-screen React application renders a single blue circle that tracks the mouse position within an SVG canvas. The component uses the `useState` and `useCallback` hooks to manage and update the circle’s center coordinates on every `mousemove` event. Rendering is performed with React DOM into a root div, while the SVG `circle` element receives its `cx` and `cy` attributes directly from the current state. The example demonstrates declarative state-driven graphics with minimal setup, using only React’s core APIs and no additional data sources.

Sep 8, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with engine horsepower on the y-axis and miles per gallon on the x-axis. Points vary in color by country of origin and size by vehicle weight, with tooltips revealing car names. The code uses the `vega-lite-api` to build the chart, which registers with Vega and Vega-Lite, while D3’s `csv` loads the data. A custom `config` object adjusts axis and label styling for readability.

Sep 5, 2022

Loading thumbnail…

Loading Data using React & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3. It fetches named color data from a GitHub gist via D3’s `csv` method, then displays a text message showing the file size in kilobytes, row count, and column count once the data arrives. While the data loads, the screen shows the word "loading." The implementation uses React hooks (`useState`) to manage the asynchronous data fetching and renders the result inside a `<pre>` element styled with a large font.

Sep 5, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL using the browser’s built-in `fetch` API. It loads a comma-separated file containing CSS named colors from a GitHub gist and logs the raw text response to the console. The code shows three sequential approaches to handling the asynchronous response, including `async/await` with `response.text()` and chained `.then()` callbacks. No visualization is rendered—the focus is solely on the data-loading and text-parsing step.

Sep 5, 2022

Loading thumbnail…

SmileyFaceII

This example shows a yellow smiley face with black-outlined circular background, two eyes, and a curved mouth, all rendered as SVG elements within a React application. The face is composed of reusable components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which assemble into a single `Face` component. It uses React for component composition and the `arc` function from D3 (d3.v7) to generate the mouth’s path geometry. The code uses fixed dimensions and hardcoded offsets, with no interactivity or data-driven behavior.

Sep 2, 2022