AnupJoseph

@AnupJoseph·8 public vizzes

Animated scatter plot Charts

This example visualizes the Iris dataset as an animated scatter plot that cycles through different feature pairs every second. Circles represent individual flowers, with size encoding petal width and color distinguishing species. Using D3.js v6, the chart leverages reusable chart patterns from a custom `scatterPlot` function, employing `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `transition` for smooth updates. The animation transitions circle positions and axes over 750 milliseconds as the x-axis variable rotates among four measurement columns.

Jul 5, 2021

Loading thumbnail…

Dynamic Charts

This example shows an animated scatterplot of the Iris dataset, cycling through the four numeric columns as the x-axis every 500 milliseconds. The code uses D3 v6 with a reusable charts pattern, where the `scatterPlot` function configures scales, axes, and circle marks. The `xValue` accessor updates dynamically, and D3 transitions animate the circles’ radius and the x-axis over 1.5 seconds per cycle. The plot renders as SVG, sizing to the full window, with colors mapping species via an ordinal scale.

Jul 3, 2021

Loading thumbnail…

Scatter Plot with symbols

This scatter plot displays the Iris dataset, mapping sepal length and width to axes, with petal width encoded through point size and species indicated by both color and symbol shape. The visualization uses D3 v6’s modular functions, including `scaleLinear` for axes and `scaleOrdinal` for categorical mappings, with axes built using `axisLeft` and `axisBottom`. Points are rendered as SVG paths via the `symbol` API, transitioning to their final size over two seconds using `.transition()`. The example follows a reusable chart pattern, encapsulated in a callable `scatterPlot` function.

Jul 1, 2021

Loading thumbnail…

Scatter Plot

A scatter plot displays Fisher's Iris dataset, mapping sepal length and width as x and y coordinates while encoding petal width through circle radius and species through color. The visualization uses the D3 v6 API with d3.scaleLinear for positional and radial scales, d3.scaleOrdinal for categorical coloring, and d3.axisLeft/axisBottom for axes. Circles animate to their target radii over two seconds via selection.transition(). The reusable chart pattern is implemented through a scatterPlot factory function with configurable accessors and margin, rendering to SVG with data loaded from a CSV URL.

Jul 1, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading external data into a React component using D3’s `csv` method. It fetches a CSV file of color names from a GitHub gist, then displays a summary of the data—including file size, row count, and column count—as text in a `<pre>` element. The React app uses the `useState` and `useEffect` hooks to manage the async data fetching and re-rendering once the data arrives. The visualization shows the loaded data’s metadata rather than a chart, highlighting how D3 and React integrate for data-driven interfaces.

Apr 6, 2021

Loading thumbnail…

Data Prep

This example demonstrates the initial step of a data preparation workflow: loading and parsing a CSV file from a remote URL. The page displays “Hello HTML” at a large font size while the underlying JavaScript fetches the file using the Fetch API and converts it into a structured array with `d3.csvParse`. The code then logs the row and column counts to the browser console, showing how D3 v6 handles tabular data. The visualization itself is minimal, focusing purely on the data ingestion phase rather than any graphical output.

Apr 5, 2021

Loading thumbnail…

Moving Mouse

This example demonstrates a smiley face that follows the mouse cursor across an SVG canvas. As the user moves their pointer, a yellow circle with a black outline tracks the cursor’s exact position in real time. The visualization is built using React’s `useState` and `useCallback` hooks to manage and update the mouse coordinates, with the `onMouseMove` event handler updating the state. D3’s `arc` function is imported but unused, while ReactDOM renders the SVG circle whose `cx` and `cy` attributes are bound to the tracked position, creating a responsive interactive effect.

Apr 5, 2021

Loading thumbnail…

Let's make a face

This example constructs a cheerful face from basic geometric shapes, rendered as SVG within a React application. It uses React function components to define each facial feature as reusable elements: `BackgroundCircle` provides a yellow circular head, `Eyes` places two black dots, and the `Mouth` component uses d3’s `arc()` generator from the d3-shape module to create a curved smile. The overall layout positions all components relative to computed centers and offsets, demonstrating composition with hard-coded dimensions. The visualization relies on D3’s arc API for the mouth path and React’s declarative rendering to assemble the final graphic.

Mar 29, 2021