Skip to main content
Log in
A

Alark Joshi

@alark·15 public vizzes

Loading thumbnail…

Sequential Color Legend in D3

This example demonstrates how to generate a sequential color legend using Susie Lu’s d3-legend library. It renders a small SVG with a legend title and five color cells, mapping a domain of seven distance values to a red interpolator via `d3.scaleSequential` and `d3.interpolateReds`. The legend is created with `d3.legendColor()`, configured with a title and scale, and attached to an SVG group using a standard D3 selection and `.call()`. The chart uses D3 v7 and d3-legend v2.25.6, rendering entirely as inline SVG.

Mar 5, 2026
Loading thumbnail…

P5 CSV Loader in CS 360

This example shows a simple bar chart of fuel economy values for a collection of cars, with each bar’s length proportional to miles per gallon. The visualization uses the p5.js library’s `loadTable` function in `preload()` to fetch a CSV file from a GitHub Gist, then iterates through the `economy (mpg)` column in the `draw()` loop to render rectangles on an 800×800 canvas. The data source is the provided `cars.csv` file.

Jan 30, 2025
Loading thumbnail…

p5.js CSV Loader

This example demonstrates scatter-like exploration of automobile data through a p5.js canvas. It visualizes engine efficiency by sizing randomly placed circles according to miles-per-gallon values from the loaded CSV dataset. The sketch uses p5.js `loadTable()` in the `preload()` function to fetch the cars.csv file, then reads the `economy (mpg)` column and maps its values to circle diameters. Drawing happens only once due to `noLoop()`, with dimensions ranging across the full 600-pixel canvas.

Jan 30, 2024
Loading thumbnail…

p5-starter

This example demonstrates a simple animated pattern of five pink rectangles, each with a random width, stacked vertically on a gray background. The sketch runs at five frames per second, causing the rectangle widths to change with every frame. It uses the p5.js library, specifically the `createCanvas`, `background`, `fill`, `rect`, and `random` functions within the `setup` and `draw` loop. The code does not load any external data; it generates all visual variation procedurally.

Jan 26, 2024
Loading thumbnail…

p5.js example

This example displays a simple animated scene where a yellow circle moves horizontally across an 800×500 canvas. It uses the p5.js library, loading it via CDN and the `createCanvas()` and `draw()` functions, with the circle’s x-position incremented each frame and reset when it exits the screen. The sketch sets a gray background and draws the moving shape using p5.js’s `background()` and `circle()` methods, demonstrating basic animation and state management in a blank HTML page with a "Hello!" message.

Jan 18, 2024
Loading thumbnail…

First P5 Assignment

A single circle in the center of the canvas, rendered with the Processing.js library (p5.js), changes color upon mouse click. The visualization shows a static composition of three concentric ellipses, all sharing the same randomly selected RGB color with a semi-transparent fill. The program, written in JavaScript, uses the p5.js `setup()`, `draw()`, and `mousePressed()` functions. When the mouse is pressed within the largest ellipse, new random values for red, green, and blue are assigned, altering the stroke and fill of all shapes. The rendering occurs on a 720x400 pixel canvas.

May 17, 2023
Loading thumbnail…

Fork of Bar Chart Diverging Color

This example visualizes the relationship between years of experience and salary, using a sequential blue color scale to encode salary values across individual bars. The chart displays a diverging color legend and axes labeled with dollar amounts and experience years. Built with D3.js (v7), it loads salary data from a CSV file, uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color mapping. The legend is generated using the d3-legend library, and the rendering uses SVG.

May 3, 2023
Loading thumbnail…

GeoVisualization - Choropleth map of the world

This example presents a choropleth map of the world, coloring each country according to its population using a threshold color scale with sequential blues. The visualization uses D3.js (v6) to load GeoJSON and CSV data, projecting the map with a Mercator projection via `d3.geoMercator` and drawing paths with `d3.geoPath`. Interactivity highlights countries on mouseover by adjusting opacity and stroke, while the SVG rendering displays the result.

Nov 1, 2022
Loading thumbnail…

Point scale

A small set of orange circles demonstrates D3's `d3.scalePoint()`, which maps categorical weekday names to x-coordinates. Each circle is placed along a horizontal line based on its associated day, with a fixed radius of 4 pixels, while the y-position is constant. The data, a simple array of weekday/value pairs, is bound to circles using `selectAll().data().enter().append()`. The visualization uses static SVG rendering within an HTML page, with all styling defined in CSS and the scale’s range set to 200 pixels.

Oct 11, 2022
Loading thumbnail…

D3: SVG bar chart with value labels (centered)

This example renders a static SVG bar chart from an inline array of 20 numeric values, with each bar’s value displayed as white, centered text labels at its top. The visualization uses D3 v7’s data join (`selectAll`, `data`, `enter`) to append SVG `rect` elements and corresponding `text` elements, with bar heights and fill intensities scaled to the data. Bar spacing and label positioning are computed arithmetically from the chart width and dataset length, while text anchoring is handled via the `text-anchor` attribute.

Sep 19, 2022
Loading thumbnail…

Fork of CS 360 A2 bar chart

This bar chart visualizes the distribution of chess game outcomes from a CSV dataset loaded via p5.js’s `loadTable`. It shows counts for four victory statuses—mate, resign, draw, and out of time—with bars drawn using p5.js `rect` calls on a 500×500 canvas. The code iterates through the table’s rows in `setup()` to tally occurrences, then renders vertical bars in `draw()`, including a small decorative ellipse. The data is sourced from a GitHub-hosted CSV file, and the visualization uses only p5.js core APIs for loading and drawing.

Sep 5, 2022
Loading thumbnail…

Fork of Assignment 10: B Grade

This example shows a bar chart of yearly values from a small CSV dataset, displaying four data points from 2015 to 2018. The visualization uses D3 v3’s ordinal scale with rangeRoundBands for the x-axis and a linear scale for the y-axis, rendering bars as SVG rectangles. It employs d3.svg.axis for both axes, with rotated tick labels on the x-axis, and parses dates using d3.time.format. The chart loads data via d3.csv and uses the height–y(val) calculation to size each bar’s height proportionally to its value.

Apr 23, 2022
Loading thumbnail…

Mouse Follower - Interaction with React

A smiling yellow face rendered with React and SVG follows the mouse cursor across a full-screen canvas. The application tracks pointer movement via React's `useState` and `useCallback` hooks, updating the circle's center coordinates on every `onMouseMove` event. The face is composed of reusable React components—`Face`, `BackGroundCircle`, `Eyes`, and `Mouth`—where the mouth path is generated using the D3 `arc()` generator. All rendering uses SVG elements positioned within a `<g>` transform, demonstrating a simple interactive visualization built with React state management and D3's geometry utilities.

Feb 28, 2022
Loading thumbnail…

CSV Loader with Promises and Async+Await

This example demonstrates loading and parsing CSV data from a remote URL using the Fetch API, with the code handling the asynchronous response through both Promise chaining and async/await syntax. The browser fetches a text file containing CSS named colors from a GitHub Gist, then logs the raw comma-separated values to the console. The implementation begins with commented-out Promise-based code, followed by an `async` function that awaits the fetch and text conversion, showcasing the cleaner syntax of async/await over traditional `.then()` chains.

May 22, 2020
Loading thumbnail…

Make a face with React

A grid of 18 randomly varied smiley faces demonstrates reusable SVG components built with React and D3. Each face is composed of a yellow background circle, two black eyes, and a mouth arc rendered using d3.arc, with positions and sizes derived from randomized props like eyeOffsetX, eyeRadius, and mouthWidth. The Face component composes smaller subcomponents—BackGroundCircle, Eyes, and Mouth—inside a FaceContainer that handles SVG width, height, and center translation. D3's range function generates the array of faces, and ReactDOM renders the entire set into a single SVG via index.js.

May 21, 2020