Skip to main content
Log in
A

Anshul Rawat

@anshul7409·15 public vizzes

Loading thumbnail…

animated Scatter Plot with menus

This animated scatter plot displays the Iris dataset, showing how the relationship between sepal and petal measurements changes. Users select which variables to plot on the x- and y-axes via two dropdown menus at the top. Built with D3.js, the visualization uses reusable functions (`scatterPlot` and `menu`) to manage state and rendering. When a new variable is chosen, the circles and axes transition smoothly over one second using `d3.transition`, with data bound via `selection.join` for enter, update, and exit handling. The SVG rendering uses linear scales and axis generators from D3.

Jan 23, 2024
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris dataset, cycling through different petal and sepal measurements on the x-axis every 3 seconds while sepal length remains constant on the y-axis. Built with D3 7.8.5's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition`, it uses an SVG `circle` element with a staggered `.join` transition for entrance, update, and exit. The visualization fills the viewport, uses the downloadable `iris.csv` from a Gist, and applies a custom 'Share Tech' font for its 24-pixel axis labels.

Jan 21, 2024
Loading thumbnail…

idempotence

This animated scatter plot cycles through the Iris dataset's four numeric columns, re-mapping the x-axis every two seconds to reveal different pairwise relationships. Using D3.js with the `scaleLinear` and `extent` APIs for axes, `scaleOrdinal` for species-based symbols, and `symbol()` to generate SVG paths, the visualization updates smoothly via `setInterval`. The `scatterPlot` higher-order function manages reusable chart components, while the CSS styles text with the Share Tech font.

Jan 19, 2024
Loading thumbnail…

Reusable D3 Scatter Plot of symbol

This example showcases a reusable D3 scatter plot that animates between different Iris flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every 2 seconds. The plot uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols to encode the species as different point shapes via d3.symbol, and d3.axisLeft/axisBottom for chart furniture. Data is loaded from a remote CSV using d3.csv. The visualization is rendered as SVG with an animated cycling of variables.

Jan 18, 2024
Loading thumbnail…

Reusable D3 Scatter Plot of symbol

This reusable D3 scatter plot visualizes the Iris dataset, cycling through four flower measurements every two seconds to show different variable relationships. The SVG renders circles with animated position updates via a custom scatterPlot function that handles scales, axes, and marks. It uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, with data loaded from a CSV and parsed numerically. The code demonstrates a functional pattern for reusable chart components, updating x-values dynamically to animate transitions between sepal and petal dimensions.

Jan 17, 2024
Loading thumbnail…

reusable charts

This example demonstrates a reusable scatterplot component that visualizes the Iris flower dataset, plotting petal length against sepal length. The chart is implemented as a configurable function using D3.js APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with data loaded via `d3.csv`. The component pattern allows setting properties like width, height, margins, and accessor functions through method chaining, while SVG circles represent individual data points. The visualization fills the browser window, adapting to the viewport dimensions, and renders axes with styled tick labels.

Jan 16, 2024
Loading thumbnail…

Fork of D3 scatterplot

This scatterplot displays the relationship between health and population from the Gapminder health-income dataset, with each point representing a country. The visualization uses D3 v7 to fetch CSV data, scale both axes linearly based on the data extent, and render points as SVG circles. Axes are added using `axisLeft` and `axisBottom` from D3's scale API, with data mapped through `scaleLinear` and the extent function. The chart fills the entire browser window, with custom margins and styled tick text.

Jan 15, 2024
Loading thumbnail…

D3 scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. The SVG chart uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to map data to screen coordinates and render labeled axes. Circles represent each data point, loaded via `d3.csv` from a GitHub gist, with numeric fields parsed on import. The visualization fills the entire browser window by setting the SVG dimensions to `window.innerWidth` and `window.innerHeight`.

Jan 15, 2024
Loading thumbnail…

hello javascript

This example displays a simple JavaScript console output, logging the string "hello javascript", a text constant describing "planet jupiter", and a reference to the d3 `select` function. The visualization serves as a minimal demonstration of a D3.js v7 setup within an HTML page, using a custom `bundle.js` script and the `unpkg` distribution. The page itself renders no graphical elements, showing only a static console-based interaction with imported modules and constants.

Dec 27, 2023
Loading thumbnail…

d3 selection

This example demonstrates D3’s data join and update pattern through an animated swarm of purple circles. It shows how circular marks continuously reposition and resize based on a periodic mathematical function. The visualization uses D3 v7’s `select` and `range` to generate data, appends an SVG to the body, and updates circles every 100/60 milliseconds via `setInterval`. The `.join('circle')` method handles enter and update selections, binding new data arrays while styling radius, x/y coordinates, and fill.

Dec 25, 2023
Loading thumbnail…

shape1

This visualization uses D3 version 7.8.5 to render 100 horizontal and vertical rectangular bars as SVG shapes on a full-window canvas. The horizontal bars are layered with vertical bars, and each set is masked using SVG `<mask>` elements with D3's `symbols` API—the horizontal bars use a mask with black symbols on white, while the vertical bars apply an inverted mask with white symbols on black. The code constructs masks via a custom `renderMask` function that populates each mask with D3's built-in symbol paths (such as circles, crosses, and diamonds) at scaled 8000-pixel sizes, creating a geometric crosshatch pattern through the bar intersections.

Dec 24, 2023
Loading thumbnail…

JavaScript Arrays

This example demonstrates core JavaScript array operations using D3’s ascending helper and native methods like sort, map, reduce, and range construction. It shows how to generate a numeric sequence, sort an array with a custom comparator, transform values into objects, and accumulate sums or key-value pairs. The code logs intermediate results, including sorting an array of objects by key and reducing entries into a plain object. Rendering is limited to console output with no visual DOM elements. It relies on d3.ascending for alphabetical ordering within the sort operations.

Dec 24, 2023
Loading thumbnail…

Javascript

This example shows a simple web page that displays the text “Hello HTML!” in large, centered type. It serves as a minimal demonstration of structuring a page with CSS and JavaScript. The code uses an HTML `<div>` element with a custom `.message` class to apply styling, setting the font size to 13em and aligning the text to the center. No external libraries or data sources are involved; the page relies solely on native HTML and CSS features rendered directly in the browser.

Dec 23, 2023
Loading thumbnail…

Fork of Sol Lewitt vertical 2

This example creates an interactive SVG composition inspired by Sol LeWitt’s vertical drawings, rendered using D3 selections and data joins. It draws 100 horizontal and 100 vertical rectangles across the full window size, with each band spaced 20 pixels apart. Two circular masks—one black with a white circle, and one white with a black circle—reveal and hide portions of the grid, producing a cross-shaped overlap in the center. The code uses `d3.select`, `.append`, `.data`, and `.join` to bind `range(n)` data to SVG `rect` elements.

Dec 20, 2023
Loading thumbnail…

Sol Lewitt vertical

This example uses D3.js to render an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It creates a grid of alternating horizontal and vertical rectangles, where each set is restricted to a circular region using SVG masks with white and black fills. The first mask reveals a circle of horizontal bars, while the second exposes vertical bars around it, producing an interlocking checkerboard-like pattern. The code leverages d3.select, d3.range, and SVG mask and rect elements to generate the pattern.

Dec 19, 2023