A

ajoua

@ajoua·32 public vizzes

Loading thumbnail…

Visualization

This visualization displays a 3-day weather forecast using an animated bar chart built with D3.js. It encodes temperature values as bar heights, with a color scale ranging from white to blue to red to indicate temperature intensity. The data is loaded from a local JSON file. Bars animate upward with a bounce effect upon rendering. Interactive tooltips appear on mouseover to show the precise temperature, and hovering highlights a bar in yellow. The chart includes a time-based x-axis and linear y-axis.

Loading thumbnail…

Scatterplot Including Species

This interactive scatterplot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across species. Users switch quantitative and categorical axes via dropdown menus, triggering smooth transitions as points and axes update. Built with D3 v7, the visualization uses d3.scaleLinear, d3.scalePoint, and transition to animate circle positions, with menus implemented through a custom dispatch-based module. The SVG renders animated circles that grow on entry and re-position with staggered delays when axes change.

Loading thumbnail…

Animated Scatterplot with Menus

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses D3 v7 with SVG rendering, featuring dropdown menus to select which columns map to the x and y axes. When users change selections, the scatterplot animates using D3 transitions, with circles smoothly repositioning and axes updating over a one-second duration. The implementation uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and a custom menu component with D3's dispatch system to handle user interactions.

Loading thumbnail…

Animated Reusable D3 Scatterplot with Axis Labels

This example demonstrates a reusable scatterplot that cycles through four Iris flower measurements, updating the x-axis and labels every three seconds. Iris data is loaded from a CSV URL and rendered as SVG circles with smooth transitions. The chart uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to animate both circle positions and axis label changes. A custom `scatterPlot` function exposes configurable accessors for dimensions, margins, and axis labels.

Loading thumbnail…

Reusable D3 Scatterplot with Axis Labels

This interactive scatterplot visualizes the Iris dataset, showing petal width against sepal length using D3 v7. The chart renders as an SVG and uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbol to differentiate species by shape, and d3.axisLeft/axisBottom for labeled axes. Data is loaded asynchronously via d3.csv, with a reusable scatterPlot function that accepts configurable accessors and margin settings.

Loading thumbnail…

Animated Reusable D3 Scatterplot

This example demonstrates an animated scatterplot of the Iris dataset, cycling through different flower measurements every three seconds. Built as a reusable D3 module, the scatterPlot function uses scaleLinear, extent, axisLeft, and axisBottom to render axes, while selectAll and join manage circle elements with enter, update, and exit selections. Transitions animate circle positions and radii over one second using delay and duration. The chart reads data from a CSV file via d3.csv, with user-defined accessor functions for x and y values.

Loading thumbnail…

Reusable D3 Scatterplot Idempotence

This example demonstrates a reusable D3 scatterplot that cycles through different Iris flower measurements every two seconds, smoothly updating the x-axis mapping while keeping the y-axis fixed. The scatterPlot function exports a configurable closure with getter-setter methods for width, height, data, scales, and margins, enabling idempotent re-invocation with new xValue functions. Using D3’s `selectAll` with `join` for circles and axes, the SVG transitions animate between petal width, sepal width, petal length, and sepal length coordinates, with the data loaded from a CSV and rendered as animated circles.

Loading thumbnail…

Reusable D3 Scatterplot

This example demonstrates a reusable D3.js scatterplot that visualizes the Iris dataset, plotting petal width against sepal length. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and SVG circles for data points. The code implements a modular, configurable scatterPlot function with settable properties for width, height, data, margins, and radius, allowing the same visualization to be easily reused with different datasets or configurations. The rendering is fully SVG-based and fills the browser window.

Loading thumbnail…

Reusable D3 Scatterplot with Symbols

This scatterplot visualizes the Iris dataset, mapping petal width and sepal length on the x and y axes, with species represented by different symbols. Built as a reusable D3 component, the code uses `scaleLinear` for axes, `scaleOrdinal` for categorical symbol mapping, and `symbolGenerator.type` to generate SVG paths. The plot renders to SVG, with axes and data marks appended to the selection, and includes configurable margins and point size.

Loading thumbnail…

D3 Scatterplot India

This scatterplot visualizes the relationship between fruit and vegetable prices across Indian states, using data from the All India Index February 2016 dataset. Each circle represents a state, with its position determined by the two price indices. The visualization uses d3.csv to load the data, d3.scaleLinear with d3.extent to map values to screen coordinates, and d3.axisLeft and d3.axisBottom for the axes. Hovering over any circle reveals the exact fruit and vegetable values via a d3-created SVG title element.

Loading thumbnail…

D3 Scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is rendered as a circle using D3’s selection and data-join methods. The code loads the data via `d3.csv`, scales positions with `d3.scaleLinear`, and adds axes through `d3.axisLeft` and `d3.axisBottom`. The SVG is sized to the full window, and the plot includes customizable margins and tick font sizing.

Loading thumbnail…

JS in HTML

This example demonstrates a basic HTML page that loads D3.js and executes a simple JavaScript logging sequence. It shows how D3 can be integrated directly into an HTML file alongside custom modules, with the page displaying the text "Hello HTML!" styled at a large font size. The code imports D3 v7 from a CDN and uses ES module imports (`something.js`, `thing.js`) to log a concatenated message to the console. The visualization relies on standard DOM manipulation and console output rather than D3-specific rendering methods.

Loading thumbnail…

D3 Selection Exploration - Homework

An interactive animation displays a dynamic set of circles that periodically change position, radius, stroke color, and stroke width. The D3.js library (version 7.8.2) is used to select SVG elements and update their attributes in a continuous loop. Data is randomly generated within each frame of the animation, which runs at 60 frames per second. The circles move horizontally and vertically based on sine and cosine functions, creating a fluid, wave-like motion across the canvas.

Loading thumbnail…

D3 Selection Exploration - Functions

A dynamic scatterplot animates a set of circles, whose count, vertical position, and radius oscillate over time based on a sine function. The visualization uses the `select` and `range` functions from D3 to build and update SVG circles. The JavaScript code runs a 60 Hz interval, generating new data and joining it to the existing elements. The rendering is entirely SVG-based, with the animation driven by an internal timer.

Loading thumbnail…

D3 Selection Exploration - Modules

This example demonstrates a dynamic scatterplot where a set of circles moves and resizes in a continuous, animated loop, simulating a wave-like pattern. Built with D3.js, the visualization uses the `select` module to target the SVG canvas and the `range` and `join` APIs to bind data to the circles. Each frame, generated by a timer, updates the x, y, and radius attributes of the circles based on a sine function. The data is synthesized on the fly by the `makeData` module, and the rendering is done through SVG elements, creating a smooth, real-time animation.

Loading thumbnail…

D3 Selection Exploration

The visualization demonstrates how D3 selections can manage a dynamic set of circles whose positions, sizes, and count change over time. It uses `d3.select` and `d3.range` to generate data, with a `setInterval` updating the scene at 60 frames per second. The code employs the modern `.join('circle')` method to handle enter, update, and exit selections seamlessly, animating the circles' x and y coordinates based on sine waves. This example highlights the simplicity of data-driven updates in D3 v7.

Loading thumbnail…

JavaScript Arrays

This example demonstrates JavaScript array manipulation through a series of commented-out experiments and active code examples. It shows the range, forEach, filter, sort, map, and reduce methods, along with object construction and comparison functions. Using d3’s ascending function, the code sorts an array of key-value entries by their keys. The source code serves as an interactive learning tool for understanding array behaviors, with output logged to the console.

Loading thumbnail…

Sol LeWitt Reproduction with D3 Homework

This dataviz shows a colorful, generative reproduction of a Sol LeWitt wall drawing as a series of 60 concentric, star-shaped polygons. Each stroke is randomly assigned an RGB color and scaled outward, creating a layered, geometric pattern that fills the browser window. The piece is rendered as an SVG using D3’s `select`, `range`, and `symbol` API to generate the polygon paths. It uses D3 `7.8.2` and dynamically sizes the canvas based on the viewport’s `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It displays a grid of overlaid horizontal and vertical rectilinear lines, with a circular region in the center where the horizontal lines are visible and the vertical lines are masked out. The visualization uses two SVG `<mask>` elements, `circle-mask` and `circle-mask-2`, to selectively hide or reveal line groups, creating an inverted circular contrast. All shapes are rendered as SVG rectangles, sized to the full window, with 100 lines spaced evenly in each direction. The code relies on `d3.select`, `d3.range`, and SVG attribute manipulation.

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of horizontal and vertical bars that intersect within two circular regions. The visualization shows a geometric pattern where a circle in the center masks horizontal lines, and a second ring-shaped mask reveals vertical lines around it. The code uses D3 selections and the `range` function to generate 100 rectangles in each orientation, applying SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. The rendering is done entirely with SVG elements, with the artwork filling the full browser window.

Loading thumbnail…

Sol LeWitt Reproduction

This piece re-creates a Sol LeWitt wall drawing as a responsive, browser-based SVG composition. It shows a grid of horizontal and vertical black bars that intersect only within a central circular region, creating a dynamic interplay of lines and void. The code uses the Document Object Model (DOM) API, specifically `createElementNS` and `setAttribute`, to construct SVG elements. It applies two SVG masks, `mask` and `mask2`, to limit the drawn rectangles to the circle’s area, with the horizontal bars masked by a white circle and the vertical bars by the inverse.

Loading thumbnail…

Sol LeWitt Reproduction Homework

This example reproduces a Sol LeWitt art piece using animated SVG rectangles. It shows a dense field of horizontal and vertical colored lines, with a square cutout in the center revealing a different line pattern. The code uses the SVG mask API to create two masks: one revealing a small square and another hiding it, applying each to alternating line sets. Horizontal lines move via the Web Animations API (`animate`), while vertical lines remain static.

Loading thumbnail…

Sol LeWitt Reproduction - Vertical Lines

This example reproduces a Sol LeWitt drawing using JavaScript and the SVG API. It creates a full-screen SVG canvas and draws 100 vertical black rectangles, each 10 pixels wide and spaced 20 pixels apart, with no horizontal variation. The code uses `document.createElementNS` and `setAttribute` to generate the rectangles dynamically. The piece directly references LeWitt's instruction-based art, presenting a simple, systematic grid of vertical lines that fills the entire browser window, adapting to its dimensions.

Loading thumbnail…

Javascript Basics

This example reproduces a Sol LeWitt art piece as an SVG visualization. The code renders an empty SVG canvas of 960 by 500 pixels, with the artwork itself absent from the displayed output. The JavaScript provided is entirely commented out, containing introductory lessons on variables, functions, objects, and control flow. While the file references the art piece, the actual drawing logic is not implemented, leaving the visualization blank.

Loading thumbnail…

Pseudo Line Chart

This example shows a hand-drawn-style line chart composed of a single thick, rounded black path that steps down and up across a white canvas, suggesting an approximate data trend. The visualization uses raw SVG markup with a `path` element, specifying coordinates and stroke properties directly, and loads the Share Tech font for a single text style rule. All rendering is performed through the SVG format, with no JavaScript libraries or data-processing APIs involved. The chart’s minimal design focuses on the aesthetic of an imprecise, pseudo-line representation rather than precise data encoding.

Loading thumbnail…

Pseudo Pie Chart

This example approximates a pie chart using layered black SVG path elements that divide a circle into five irregular, wedge-like segments. Each segment consists of hand-coded bezier curves and straight lines, rather than generated arc paths from a charting library. The chart is rendered as a static SVG with a white background, and includes large text styling prepared for a 72-pixel font, though no text labels are displayed. The visualization demonstrates how a pie chart can be constructed manually through SVG path data without any JavaScript or data-binding libraries.

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart, where four categories—A, B, C, and D—are represented by black bars of varying widths protruding from a common left edge, mimicking a real bar chart without using standard charting axes. Each bar’s length corresponds to an implicit value, with labels placed to the left. The visualization is built using raw SVG elements, including `rect` for the bars and `text` for the labels, all styled with a large `font-size` and the Share Tech font. The rendering relies entirely on inline SVG markup within an HTML file, with no JavaScript libraries or data-binding frameworks involved.

Loading thumbnail…

Pseudo Bar Chart

Four simple SVG rectangles form an approximate bar chart, creating a pseudo-visualization of categorical values. The chart uses hardcoded coordinates and heights to simulate bars of varying magnitudes, with no axes or labels. Each rectangle is drawn directly via SVG `rect` elements inside an inline `<svg>` tag, with positioning and dimensions set manually. The rendering relies purely on static SVG markup with no JavaScript libraries, CSS styling only affecting the page body, and the bars arranged horizontally across a 960 by 500 pixel canvas.

Loading thumbnail…

Pseudo Scatterplot

A minimal, static approximation of a scatterplot rendered as SVG circles. Six black circles of equal radius are positioned on a light gray background, suggesting data points without underlying axes or labels. The example uses raw SVG elements—`<rect>` and `<circle>`—placed manually via hard-coded `cx` and `cy` coordinates, with no JavaScript or external libraries involved. The rendering approach is purely declarative, creating a sparse, purely visual allusion to a scatterplot.

Loading thumbnail…

SVG Fundamentals

This example demonstrates a smiley face constructed from basic SVG shapes. A large yellow circle forms the face, with two smaller circles for eyes and white highlights, while a curved path creates the mouth using a quadratic Bézier command. The code uses standard SVG elements like `circle` and `path` directly in HTML markup, with attributes controlling fill color, stroke, and coordinates.