mlscmoulika

@mlscmoulika·8 public vizzes

my playground for understanding

This example shows a force-directed network of cricket-related nodes, arranged with d3.layout.force where the graph’s nodes are dragged and connected by links. The visualization uses d3.v3 and SVG circles and lines, with colors assigned via d3.scale.category10. Node names match cricketers and organizations, while the edges are defined manually in the data. The graph responds to mouseover by adding a title tooltip and a stroke highlight, and the simulation updates node and edge positions on each tick.

May 29, 2021

Loading thumbnail…

understanding my playground

This visualization displays a row of colored circles, each representing one of the 20 swatches in d3’s category20 color scale. The example renders circles as SVG elements using D3’s data join pattern, binding an array of 20 values via `d3.range`. It positions each circle along a horizontal linear scale for the x-coordinate and applies the category20 scale directly as the fill color. The page loads D3 v3 from a CDN, and the visualization uses the `d3.select` and `append` APIs.

May 26, 2021

Loading thumbnail…

loading the data for visualization

This example shows a donut chart of all CSS named colors, with each slice filled by its corresponding color value from a CSV dataset. The visualization loads data asynchronously using D3’s `csv` method and stores it in React state via the `useState` and `useEffect` hooks. Each data row is rendered as an SVG path using `d3.arc`, positioned around a central point. While loading, the app displays a simple “loading…” message before rendering the complete chart.

May 26, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a full-screen radial burst, with each color occupying an equal-width slice around a central point. It uses React hooks (`useState`, `useEffect`) to asynchronously load the CSV dataset via D3’s `csv` utility, then renders SVG `<path>` elements computed with `d3.pie()` and `d3.arc()`. The fill for each slice directly maps to the color’s hexadecimal value from the data, while a simple loading state shows before data arrives.

May 24, 2021

Loading thumbnail…

how to fetch data

This example demonstrates three different ways to load a CSV file, using both the Fetch API and D3’s built-in `d3.csv` and `d3.csvParse` functions. It fetches a CSV of CSS named colors from a GitHub gist and displays the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The code contrasts asynchronous promise-based fetching with the equivalent `d3.csv` shorthand, and includes an unused `async`/`await` function. The visualization itself is purely textual, providing metadata about the loaded dataset.

May 22, 2021

Loading thumbnail…

mouse pointer 1

This example shows a single circle that follows the mouse pointer across a full-window SVG canvas. The circle uses the current mouse coordinates as its center, with a fixed radius of 40 pixels. The application tracks pointer movement through React's `useState` hook and an `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes in real time. The visualization is rendered with React and SVG, using ReactDOM to mount the component, and initializes the circle at the center of the window.

May 22, 2021

Loading thumbnail…

mouse follower

A smiling face rendered in SVG follows the mouse across the screen. Built with React and D3 v5, the example uses D3’s `arc` generator to create the mouth, while the face circles, eyes, and stroke are defined as React components. The entire SVG group is translated to the viewport center, and the mouse follower behavior is implied by the full-screen, overflow-hidden layout, though no explicit mouse event handlers appear in the code. The static smiley face adapts to its container dimensions.

May 22, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of the "Let's Make a Face" example draws a simple, static smiley face in an SVG canvas. It shows a large yellow circle with a black outline for the head, and two smaller unfilled circles positioned to represent the eyes. The rendering is achieved directly through hardcoded SVG elements in the `index.html` file, using inline `<circle>` tags with specified coordinates, radii, and stroke properties. No external JavaScript libraries or data sources are used; the visualization is entirely defined by the inline markup.

May 16, 2021