Skip to main content
Log in
K

Kamalabot

@Kamalabot·29 public vizzes

Loading thumbnail…

Datasaurus Dozen D3 Scatter Plot

The Datasaurus Dozen D3 Scatter Plot cycles through 12 datasets with nearly identical summary statistics but dramatically different shapes, demonstrating the importance of visualizing data. Each dataset appears for three seconds, with circles transitioning smoothly to new positions via `transition()` and `selection.join()`. The plot title and axes update dynamically using D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG rendering. Data comes from the TidyTuesday repository, originally from Alberto Cairo, courtesy of Steph Locke and Lucy McGowan.

Jul 11, 2022
Loading thumbnail…

D3 Scatter Plot Matrix (Vanilla JS 🙃)

This D3 scatter plot matrix compares all numeric fields of the iris dataset, with colors distinguishing the three iris species. Rendered as a 4×4 grid of 16 SVG charts, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeSet1` for categorical coloring, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data is loaded via `d3.csv` from a GitHub Gist. Each chart positions circles with a 4-pixel radius, and the diagonal charts display field names as titles.

Jul 11, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris Dataset, using a reusable D3 chart component to visualize the relationships between four flower measurements. The plot cycles through different x-axis variables every two seconds, animating the data points to show correlations between petal width, sepal width, petal length, and sepal length. The chart is built with a custom `scatterPlot` function that leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, rendering SVG circles with axes that update dynamically. The code demonstrates a modular approach to chart creation, separating the logic into a reusable component that accepts configurable properties for width, height, data, and value accessors.

Jul 11, 2022
Loading thumbnail…

D3Animated Reusable D3 Scatter Plot

A reusable D3 scatter plot animates the Iris dataset, cycling through four numeric columns as the x-axis variable every three seconds. Written with D3 v6, the chart uses a `scatterPlot` closure function with configurable accessors for width, height, data, margins, and radius. It renders SVG circles with `selection.join` for enter, update, and exit transitions, growing new points from radius zero and staggering updates with `transition.delay`. Axes update smoothly using `axisLeft`, `axisBottom`, `scaleLinear`, and `extent`. The data loads from a remote CSV, parsed with numeric coercion.

Jul 11, 2022
Loading thumbnail…

D3Animated Scatter Plot with Menus

This animated scatter plot of the Iris dataset lets users choose which measurement to display on each axis via dropdown menus. D3’s `selection.join` and `transition` smoothly reposition circles and axes over one second, with new points growing from radius zero. The menu component uses D3’s `dispatch` for change events, while `scaleLinear`, `axisLeft`, and `axisBottom` handle the scales and ticks.

Jul 11, 2022
Loading thumbnail…

Learn Smiley Face Part VI

A grid of twelve cartoon smiley faces, each generated with randomized facial features and stroke widths, fills the viewport. The example demonstrates a React and D3.js integration, using a modular component hierarchy such as `Face`, `Eyes`, and `Mouth` to compose the SVG output. D3's `arc` generator creates the mouth path, while the `range` function supplies indexes for the face array, with React rendering each face as an independent SVG element.

Jul 11, 2022
Loading thumbnail…

Cars Scatter Plot LearnColor

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, sourced from the UCI Machine Learning Repository. Each car is represented as a semi-transparent red circle, with the x-axis showing horsepower and the y-axis showing weight. The visualization is built using D3 v5, employing `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for tick generation, and SVG rendering to draw the circles. The code also parses numeric fields from the CSV data to enable accurate plotting.

Jul 11, 2022
Loading thumbnail…

Reusable D3 Scatter Plot b4Ref

This interactive scatter plot cycles through the Iris dataset's four numeric columns every two seconds, using the selected column for the x-axis while the y-axis remains fixed. Built as a reusable D3 module, the chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes, with the animation driven by `setInterval`. The Iris flower measurements are loaded via D3's `csv` from a GitHub Gist, and the full viewport is filled by the plot.

Jul 11, 2022
Loading thumbnail…

Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with the x-axis formatted using D3’s `format` to abbreviate large numbers (e.g., “B” for billions). It fetches data from a CSV hosted on GitHub using `d3.csv` and renders SVG elements with React. The chart encodes population via bar width on a `d3.scaleLinear` and country names on a `d3.scaleBand`, with axis components generated from custom React components that leverage D3 ticks.

Jul 11, 2022
Loading thumbnail…

Learning D3 Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, and d3.line with curveBasis to render smooth, multi-colored city paths. A custom colorLegend module creates an SVG legend, while axis labels and a title are appended manually. The code includes a YouTube tutorial link for learning purposes, and the data is loaded from a VizHub-hosted CSV file.

Jul 11, 2022
Loading thumbnail…

D3 Scattering

This scatterplot displays the Iris dataset, plotting petal length against sepal length with 10-pixel circles. It loads CSV data asynchronously using d3.csv, transforms numeric fields via a custom parseRow function, and applies d3.scaleLinear with d3.extent to map data ranges to the full browser viewport. The visualization renders SVG circles through d3.selectAll and data joins, with axes omitted. The code uses D3 v7 within an HTML page, sizing the SVG to window.innerWidth and window.innerHeight.

Jul 9, 2022
Loading thumbnail…

D3 Scatter Plot with Menu

This interactive scatter plot visualizes the Iris Dataset, with each circle representing a flower specimen. A menu cycles through four measurement columns—petal width, sepal width, petal length, and sepal length—updating the x-axis mapping every 100 seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a reusable chart pattern via `scatterPlot()`. The SVG renders with animated transitions, while `setInterval` drives the axis changes, and the `Share Tech` font styles the axes.

Jul 9, 2022
Loading thumbnail…

Circling Circles

A static SVG scene shows a large green circle, centered on a white background, whose thick black outline is punctuated by four smaller blue circles positioned at the cardinal points. Each small circle has its own yellow stroke, and the arrangement suggests a minimalist orbital motif. Built with React, the markup is generated via JSX, while D3 v5 is imported for its `select` API, though the visualization itself relies purely on SVG circle elements and window dimensions for sizing.

Jul 9, 2022
Loading thumbnail…

Productising Git History Streamgraph

This streamgraph visualizes the commit history of the D3 repository ecosystem, with each layered area representing a separate D3 package and its thickness showing the smoothed number of commits per week. The layer order is determined by each package’s first commit date, revealing the initial monolithic development and later explosion of packages around the 4.0 release. The code uses `d3.stack` with `stackOffsetWiggle`, `d3.area`, and `d3.scaleTime` to render the SVG, alongside the `d3-area-label` library for labels and `array-blur` for data smoothing. Source data comes from a JSON file of all D3 commits.

Jul 9, 2022
Loading thumbnail…

JS modules Learner

This example demonstrates the JavaScript module system for importing and exporting variables between files. It shows how to share constants (`aThing`, `someThing`) across script files and how to load D3’s `select` API. The page renders a static HTML message with an inline `<style>` rule for large centered text, then logs imported values and the D3 `select` object to the console. It uses `d3.v7` from a CDN and relies on the browser’s native ES module support.

Jul 9, 2022
Loading thumbnail…

Making Selections Move

A grid of circles animates continuously, with each circle moving vertically and changing radius over time based on a sine wave. Using D3 v7 and React, the code generates new data arrays at 10-millisecond intervals via `setInterval`, and a data join with `.selectAll('circle').data(data).join('circle')` updates the SVG elements smoothly. The `makeData` function computes x positions and sine-based y and radius values, while `vizData` handles the rendering, demonstrating a seamless approach to animating selections without explicit enter or exit handling.

Jul 9, 2022
Loading thumbnail…

Starting Selections D3

D3 selections add static circles across an SVG canvas in a sine-wave pattern, with new elements stacking on each refresh. The example demonstrates the `.data().enter().append()` pattern using `d3.range(15)` to generate coordinates, updating on a 1-second interval via `setInterval`. It uses D3 v7 with `select` and `range` imports, rendering to inline SVG with animated positional updates.

Jul 9, 2022
Loading thumbnail…

JSArray_train

This example demonstrates JavaScript array manipulation techniques using the D3.js library, specifically the `d3.range` function to generate a sequence of numbers. The code logs values to the console, then applies various array methods like `sort()`, `reverse()`, `map()`, and `reduce()` to transform and analyze the data. It also shows how `reduce()` can convert an array of objects into an object keyed by a property, as seen with the `entries` array. The visualization relies on console output rather than graphical rendering, with styling defined via CSS for the page message.

Jul 9, 2022
Loading thumbnail…

JSBasics

This example recreates a Sol LeWitt-inspired geometric composition using JavaScript and D3.js, where vertical and horizontal stripes intersect around a circular mask. The visualization shows a grid of thin black and white lines forming a cross-hatched pattern with a central circular cutout. The code builds SVG elements dynamically using `document.createElementNS`, applying two different masks (`circle-mask` and `circle-mask-2`) to reveal or hide the stripes. D3 v7 is loaded but the rendering relies entirely on raw SVG manipulation rather than data binding or scales.

Jul 9, 2022
Loading thumbnail…

Replicating SolLewitt

This example replicates a Sol LeWitt wall drawing as an SVG graphic. It sets up a blank 417 by 294 pixel canvas and uses D3 v7, loaded via a JavaScript import, though the current script only defines simple arrow functions for creating person objects and logs a test to the console. The body text is styled with a massive font size, but no drawing or visualization is actually rendered. The SVG element remains empty, and the code does not yet implement any of LeWitt's geometric instructions.

Jul 9, 2022
Loading thumbnail…

TreeMapping

A static SVG treemap built with plain HTML and CSS, styled with large text and a red color palette. The visualization uses nested rectangles to represent hierarchical data, with layered `<rect>` elements manually positioned via absolute coordinates. Rendered entirely through declarative SVG markup rather than D3 data joins, it serves as a basic exercise in geometric composition and color coding. The code includes D3 v7 via CDN but does not invoke any D3 APIs.

Jul 8, 2022
Loading thumbnail…

Annotated Bar

This annotated bar chart demonstrates foundational SVG construction using D3.js v7. The visualization combines manually positioned bars with a hand-drawn polyline path and intricate marker annotations created through SVG path data. The code applies CSS classes for styling elements like the yellow-highlighted first bar, while inline attributes control fill colors, opacity, and stroke properties. The example serves as a pedagogical introduction to creating static vector graphics, using raw SVG elements rather than D3’s higher-level chart abstractions.

Jul 8, 2022
Loading thumbnail…

Starter_Get it Black and White

This visualization demonstrates a step in learning SVG fundamentals through D3.js, building a black-and-white composition of ellipses and rectangles. The static scene, rendered with the SVG framework using D3 version 7, shows black circles placed over light gray and dark navy shapes against a white canvas. The code defines geometric primitives directly in the markup, with ellipses at specific coordinates and rectangles of varying widths positioned to create an abstract layout, illustrating basic shape creation without dynamic data or interaction.

Jul 8, 2022
Loading thumbnail…

Managing Complexity Circles

This example shows a large green circle with a thick black outline, surrounded by four smaller blue circles with yellow outlines positioned at the cardinal points. A thin black arc is rendered inside the central circle. Built with React and D3.js v5, it uses the `arc` API to define the arc’s geometry and SVG elements for rendering, demonstrating a simple layered composition of shapes.

Jul 8, 2022
Loading thumbnail…

LearningSmiley Face Part V

This interactive React and D3 visualization renders a smiling face constructed from modular SVG components, including a yellow background circle, two eyes, and a curved mouth. The components are defined in separate ES6 module files, with the mouth shape generated using D3’s arc generator to create an arc path. All elements are positioned within a single SVG canvas, centered via a group transform, and rendered by React. The example demonstrates how to structure reusable React components for D3-based visualizations.

Jul 8, 2022
Loading thumbnail…

Refactoring Circles

A large green circle fills the viewport, surrounded by four smaller blue circles positioned at its cardinal points, each with yellow strokes. A thin black arc curves inside the green circle, adding a subtle geometric accent. The visualization is rendered as SVG through React components, using D3’s `arc()` generator to define the curved path. All elements are drawn in a static, non-interactive layout, with dimensions computed from the browser window size.

Jul 8, 2022
Loading thumbnail…

Smiley Face React Way

This example demonstrates how React can be used to render SVG content inside a data-visualization context, showing a simple static page with a heading and paragraph. The code uses React 16 and ReactDOM to mount an `App` component into a `<g>` element, illustrating a common pitfall where multiple HTML tags must be wrapped in a container. It relies on D3 v6 for potential visualization capabilities, though the visible output is purely text. The page imports React, ReactDOM, and D3 via CDN, with styles that hide body margins and overflow for a clean presentation.

Jul 8, 2022
Loading thumbnail…

D3 R Starter

A minimal demonstration of getting started with D3 version 7, this example renders a static, full-page text label reading “Hello D3 version 7.” The page loads D3 via a CDN, then uses the `select` and `range` APIs from the d3 module to set the body’s text content. The code calls `select('body')` and chains `.text()` to populate the page, with CSS styling defining the large font size and centered layout. No data or interactive behavior is present; the focus is on the basic setup and rendering flow.

Jul 8, 2022
Loading thumbnail…

Smiling face with D3.js!

This example animates a cheerful smiley face drawn entirely with SVG shapes, with its eyebrows moving up and down in a looping motion. The face itself is constructed using basic D3.js selections to append a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth. The animation is driven by chained `transition().duration()` calls that alter the eyebrow group’s transform attribute, moving it vertically. The code imports `select` and `arc` from D3 v5, and positions all elements relative to the SVG’s center by applying a translate transform to a container group.

Jul 8, 2022