Anthony Le

Fork of Interactive Color Legend

This example shows a scatter plot of the Iris Dataset, mapping petal length and sepal width along the axes and coloring each point by species. Hovering over a species name in the color legend fades non-matching points to 20% opacity and re-renders them at full opacity, built with React components and D3 scales (scaleLinear, scaleOrdinal). SVG circles render the marks, with axes from custom AxisBottom and AxisLeft components.

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for each sample, with points colored by species using a D3 scaleOrdinal color scale. The visualization is built with React, using D3.forscaleLinear for positioning axes and marks, and renders to SVG. A custom color legend displays the three species, and hovering over a point reveals its petal length via a tooltip. The code imports D3 utilities like `csv`, `scaleLinear`, `scaleOrdinal`, and `format` to load data and manage scales.

Fork of Scatter Plot with Color

Fork of Polished Scatter Plot with Menus

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing the selection of any of its four numerical attributes for the x and y axes through dropdown menus. Built with React and D3, the visualization uses `scaleLinear` to map data to SVG coordinates, rendering circles with tooltips that display formatted values. Axis labels and tick marks are controlled by custom components, providing a flexible exploration of relationships between sepal and petal measurements.

Fork of Polished World Map

Fork of Stylized Line Chart

This example shows a stylized line chart of weekly temperature variations in San Francisco, plotting temperature over time as a smooth, naturally curved path. The visualization uses React to render SVG elements and D3 scales, including `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with the line drawn via the `d3.line` and `curveNatural` APIs. Data is loaded from a CSV file using `d3.csv`, and axes are constructed as React components that generate SVG tick marks and labels, with a clean Poppins font styling.

Fork of Working with Time

This example shows a time-series scatter plot of weekly temperature data from the Data Canvas Sense Your City dataset. The visualization uses a time-scaled x-axis to show temperature readings (y-axis) over a single week, with each point representing an hourly observation. Built with React and D3 v5, the code constructs SVG elements and uses `scaleTime()` for the temporal axis, `scaleLinear()` for the temperature range, and `timeFormat('%a')` to display weekday ticks. Tooltips reveal the exact timestamp for each data point.

Fork of Stylized Scatter Plot

This interactive scatter plot displays the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to declaratively render SVG elements, with D3.js v5 handling data fetching via `csv()` and constructing the linear scales with `scaleLinear()`. Grid lines and tick labels are custom-built through reusable `AxisBottom` and `AxisLeft` components, while `Marks` generates the circular data points with `<circle>` elements and tooltip text. The styling uses the Poppins font and a muted color palette defined in the embedded CSS.

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The code imports `csv`, `max`, and `format` from D3 to load and process the data, while SVG rectangles render the bars with tooltips showing formatted population values. Axes are constructed using custom React components that map D3 scales to SVG elements.

Fork of Refactored Bar Chart

Fork of Axes with React & D3

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a bar chart with no axes or labels. Using React hooks (useState, useEffect, useCallback) the component loads United Nations World Population Prospects 2019 data via d3.csv, slices the first ten rows, and displays them as SVG rectangles. The chart uses d3.scaleBand for the y-axis positioning and d3.scaleLinear for the x-axis widths, with bars drawn directly in JSX. The visualization intentionally omits axes, ticks, and text to present the data in a minimal, "pathetic" style that emphasizes raw bar lengths without supporting context.

Fork of Rendering Data with React & D3

This example uses React to render a radial burst of colored arcs, each representing a CSS named color from a CSV dataset loaded via D3’s `csv` utility. The visualization shows all named colors arranged as wedges in a full circle, with each arc filled by the color’s hex value. The code uses `d3.pie` to compute arc angles, `d3.arc` to generate SVG path data, and React’s `useState` and `useEffect` hooks to manage asynchronous data loading. The SVG output is centered on a 960×500 canvas, with a loading message shown until data arrives.

Fork of Vega-Lite API Template

This example visualizes the population distribution of religions by country, using a circle size to represent population counts. It shows data for multiple countries and religions, with a tooltip displaying the exact population on hover. The visualization is built with the Vega-Lite API, which is registered with Vega, Vega-Lite, and D3 in the browser. Data is loaded from a CSV file using d3.csv, and the view is rendered as an SVG that automatically fits the window size with a custom dark theme for labels and axes.

Fork of Loading Data with React & D3

This example displays key statistics about a dataset of CSS named colors, including its size in kilobytes, row count, and column count. Using React state, the application loads the data asynchronously from a remote CSV file via D3’s `csv` utility, updating the display once the data arrives. The rendered output is a large `pre` element showing a loading message before the statistics appear, computed using `d3.csvFormat` and `data.length` and `data.columns.length`.

Fork of Loading and Parsing CSV Data

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time with each mouse move. The React component uses the `useState` hook to store the cursor's coordinates and a `useCallback` handler to update them from mouse events. Rendering is handled by ReactDOM, which draws a single SVG circle element with its `cx` and `cy` attributes bound to the current mouse position.

Fork of Smiley Face Part III

A grid of randomized smiley faces is rendered as SVG through React components, with each face’s features—such as eye placement, eye radius, mouth width, and stroke thickness—varying per instance. The code builds faces by composing reusable React components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, while the mouth shape is generated using the D3 `arc` generator. The data comes from `d3.range`, producing an array of 18 faces, and each face is styled with random values for its visual parameters.

Fork of Smiley Face Part II

A yellow smiley face is rendered across the full browser window using React and D3 v7. The face consists of SVG circles for the head and eyes, and a D3 arc path for the mouth, all positioned relative to the center of the viewport. The example demonstrates how to integrate React components with D3's arc generator to create geometric shapes. The code imports React and uses ReactDOM to mount the SVG, while D3's `arc()` calculates the mouth's curved path with specific start and end angles.

Fork of Fork of Smiley Face Part II - Exploring

Fork of Let's Make a Face Part I

Fork of Hello HTML