23100098@lums.edu.pk

@TahaOnly·10 public vizzes

Line Chart with React & D3

This line chart shows monthly atmospheric CO₂ measurements from 1958 onward, with time on the x‑axis and CO₂ concentration in ppm on the y‑axis. The React component loads CSV data using `d3.csv`, parses dates with `d3.timeParse`, and passes the data to a reusable `viz` function. That function builds scales with `d3.scaleTime` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the curved line with `d3.line` using `curveMonotoneX`. Points with missing values are skipped via the line generator’s `.defined` method.

Oct 15, 2025

Loading thumbnail…

Scatter Plot with React & D3

This example shows a scatter plot of the classic Iris dataset, displaying sepal length on the x-axis and sepal width on the y-axis for 150 individual flowers. The visualization is built using React's `useRef` and `useEffect` hooks to manage the SVG element and coordinate the loading of CSV data via D3's `csv` function, after which the `viz` function from `viz.js` renders the chart. The rendering relies on D3 v7 utilities including `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to compute scales and draw axes, while D3's `select` and `.join` operations efficiently append the circles, axis labels, and axis groups to the SVG.

Oct 10, 2025

Loading thumbnail…

Basic Scatter Plot with React & D3

A basic scatter plot displays the classic Iris flower dataset, plotting sepal length on the x-axis against sepal width on the y-axis for all 150 specimens. Each point appears as a fixed steelblue circle. The React app loads the CSV data via D3's `csv` function, then calls a separate `viz` function that uses `scaleLinear` and `extent` to compute the chart's scales. D3's `select` and a `.join` operation render the circles onto the SVG element.

Oct 9, 2025

Loading thumbnail…

CSV Data Loading and Parsing

This example demonstrates how to load and parse a CSV file in a React application using D3.js. It displays the Iris dataset as formatted JSON text in a `<pre>` element, showing the parsed data structure. The code uses D3's `csv()` method within a `useEffect` hook to fetch and parse `data.csv`, then stores the result in React state. A separate effect triggers a visualization function that renders the data using D3's `select()` and text manipulation. The Iris dataset, from UCI Machine Learning Repository, contains measurements of sepal and petal dimensions for three flower species.

Oct 9, 2025

Loading thumbnail…

Clickable Circles from CSV

This example displays a set of colored circles loaded from a CSV file, each positioned and sized by its own coordinates and radius. Hovering over a circle highlights it with a black stroke, using a React state to track the selected circle's ID. The visualization is rendered with D3 v7's `select` and `csv` APIs, alongside React's `useEffect` and `useState` hooks, with circle attributes and mouse events applied via `selection.join`.

Oct 8, 2025

Loading thumbnail…

Clickable Circles with D3 and React

A grid of pastel-colored circles, each positioned by explicit pixel coordinates from a static data array, fills the visualization. React manages the application state while D3's `select` and `join` methods render the SVG `<circle>` elements. Hovering a circle triggers a `mouseover` event that calls `setSelectedId`, updating React state and re-running the D3 selection to draw a black stroke around the active circle, while `mouseout` clears the highlight.

Oct 8, 2025

Loading thumbnail…

Circles with D3 and React

This example shows a collection of pastel-colored circles positioned across a white SVG canvas. It demonstrates how to integrate D3's data-join pattern with a React component. The code uses a `useRef` hook to access the SVG element, then calls a D3 `viz` function in a `useEffect` to bind data from a static array via `selection.data()` and `.join('circle')`, setting each circle's `cx`, `cy`, `r`, and `fill` attributes directly. The data is hardcoded in a separate `data.js` module, and rendering is done through React's `createRoot` with plain `React.createElement`.

Oct 8, 2025

Loading thumbnail…

Circles with D3 Cleaned Up

A grid of hand-coded pastel circles on a white SVG canvas, positioned at fixed coordinates with specified radii and fills. The example serves as a minimal demonstration of D3's selection and join API: `select()` targets the SVG element, while the `selection.selectAll(...).join(...)` chain in `viz.js` binds the imported data array to `circle` nodes, using `.attr()` to map each datum’s `cx`, `cy`, `r`, and `fill` properties. The data originates from `data.js` as an exported array of objects.

Oct 8, 2025

Loading thumbnail…

Circles with D3

Twelve pastel circles in a fixed layout demonstrate a straightforward data binding workflow with D3. Each circle’s position and radius are predefined in an array, and D3 selects all `circle` elements, binds the data, and appends new circles with the `enter` selection. The SVG renders with rounded corners and a subtle shadow from CSS. The example uses `d3.select` and `selection.attr` to apply the `cx`, `cy`, `r`, and `fill` attributes, mapping each data object to a visually distinct geometric shape.

Oct 8, 2025

Loading thumbnail…

Circles with SVG

This example displays twelve pastel-colored circles scattered across an SVG canvas, each positioned at fixed coordinates with varying radii. The visualization demonstrates static SVG rendering with a simple, decorative composition, using no external libraries or JavaScript for interaction. The circles are defined directly in markup with individual `fill` attributes, while CSS centers the SVG on a light gray background and applies a subtle shadow and rounded corners. The code relies on basic SVG elements and inline styling, with `index.js` containing only a placeholder console statement.

Oct 8, 2025