KhanAzmat

HeatMap Try 2

A heatmap-like scatterplot visualizes a time series of x and y positions as a smooth, green path with a Catmull-Rom curve, overlaid with individual circle marks. The code loads CSV data from a GitHub gist, parses numeric coordinates, and uses D3 v7 scales, axes, and the `d3.line` API with `curveCatmullRom.alpha`. The SVG rendering fills the browser window, with axis tick labels styled via CSS.

Jan 21, 2023

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length and sepal length on the x- and y-axes. The SVG visualization uses the modular d3.scaleLinear extent and axis functions to compute scales and draw ticks. Iris data is loaded asynchronously via `d3.csv`, with numeric parsing and a color scheme imported from `d3-scale-chromatic` for interpolation. The plot fills the browser window, using a data join to create circles for each Iris sample.

Jan 21, 2023

Animated Scatter Plot with Menus

This animated scatter plot displays the Iris dataset, with menus for selecting which quantitative or categorical attributes map to the x- and y-axes. D3's data join, with transitions, animates circles smoothly to new positions and scales as selections change. The code uses reusable chart and menu modules built on d3.js APIs, including `scaleLinear`, `scalePoint`, `axisBottom`, `axisLeft`, and `transition`. The visualization renders as SVG, and axes update with the selected columns.

Jan 3, 2023

Animated Reusable Scatter Plot

Animated scatter plot of the Iris dataset cycles through the four measured attributes as x-values every three seconds. The visualization uses D3's scaleLinear, axisBottom, axisLeft, and selection.join to manage entering and exiting circles. D3 transitions with staggered delays animate position changes smoothly. Data loads as CSV via d3.csv.

Jan 2, 2023

Reusable Scatter Plot

This reusable scatter plot displays the classic Iris Dataset, mapping sepal and petal measurements onto a full-screen SVG canvas. The visualization cycles through all four measured attributes as the x-axis variable every two seconds, with axes and circles updating in place. Built with D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, the code demonstrates a modular chart composition pattern where the scatter plot function accepts configurable width, height, data, margin, and value accessors. The internal `join` mechanism updates both circles and axis labels idempotently, creating a smooth, animated transition between different data dimensions.

Dec 30, 2022

Reusable Scatter Plot

This example demonstrates a reusable scatter plot visualizing the Iris dataset, plotting petal length against sepal length. D3.js v7 fetches the CSV data asynchronously, and the code uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values to SVG circles. The rendering uses a full-window SVG canvas with fixed margins, and the scatter plot marks are drawn via chained d3.select and `.join('circle')` operations.

Dec 29, 2022

Plotly

This example generates a heatmap visualization of Euclidean distances from a central point, computed over a grid of x and y coordinates. The color-coded matrix uses the "Jet" colorscale, with axes hidden to focus on the radial pattern. The page leverages the Plotly JavaScript API (plotly-2.16.1) to render the heatmap and export it as an SVG image, while also including D3.js v3.5.17 as a dependency, though it is not directly used in the plotting logic.

Dec 22, 2022

Plotly 2

This example shows a heatmap visualization of distances from a central point, computed from two arrays of numeric coordinates. The heatmap uses a Portland color scale and smooths the data with the `zsmooth: 'best'` option, rendering through Plotly’s `newPlot` API. The code constructs a matrix by calculating the Euclidean distance for each pair of x and y values, then passes it to Plotly’s heatmap trace. D3.js is loaded for potential utility, though the core rendering relies entirely on Plotly 2.16.1.

Dec 22, 2022

Heat Map

This heat map visualizes a sequential color scale transitioning from purple to orange across a continuous spectrum. The view fills the browser window with 100 vertical rectangular bands, each colored via the `d3.scaleSequential` interpolator. The code uses `d3.interpolate` to blend the two colors, `d3.scaleLinear` for positioning, and SVG `<rect>` elements rendered with D3 v7. The example demonstrates how to construct a full-viewport gradient bar for quantitative data mapping.

Dec 21, 2022

JS in HTML

This example shows a static HTML page that uses CSS and JavaScript to render a large, centered message. The code defines a single `<div>` element with the class `.message`, styled using a CSS rule that sets the font size to 13em and centers the text. No JavaScript logic is executed; the page simply displays “Hello HTML!” as static content. It uses the standard HTML `<style>` tag and a plain `<div>`, demonstrating the minimal structure of a web page without external libraries or data sources.

D3 Selection

This example demonstrates animated sine-wave motion in an SVG scene using D3. A line generator creates a path from 15 points, with each point’s y-coordinate oscillating based on a sine function of its index and a time variable. Circles are bound to the same data, updating their position each frame via D3’s data join. The code uses `d3.select`, `d3.range`, `d3.line`, `selectAll`, and the `join` method, refreshing every 100 milliseconds. The animation runs indefinitely, shifting the wave pattern across the viewport.

Javascript Arrays

This example demonstrates the fundamental JavaScript data type known as an array, which is a collection of elements. The visualization consists of a single console operation that prints the result of the `typeof` operator applied to an empty array literal, `[]`. The code uses the browser’s built-in `console.log` API to output the string `"object"` to the developer console, revealing that arrays are a type of object in JavaScript. The example focuses on the console output as the primary medium for displaying this information.

Reproduction Sol Lewitt D3

This example reproduces Sol LeWitt-style geometric art using D3 version 7. It renders two perpendicular sets of horizontal and vertical striped rectangles, each masked by one of two complementary masks containing a large D3 symbol (circle, cross, diamond, square, and star) centered in the viewport. The code uses `d3.select`, `range`, `symbols`, and `symbol` within a custom mask-rendering function, then applies the masks to SVG `<rect>` sequences to create intersecting pattern effects. The visualization is generated programmatically with a blank SVG canvas sized to the window.

Reproduction Sol Lewitt Horizontal

This example reproduces Sol LeWitt’s horizontal wall drawing using animated SVG masks to create a shifting circular aperture over a grid of horizontal and vertical lines. The visualization shows a pulsing black-and-white circle that expands and contracts, revealing and hiding the underlying striped composition as the masks animate. Built entirely with raw SVG elements and the Web Animations API via `animate` and `animateTransform`, the code generates 950-pixel-wide rectangles and vertical strips, applying `mask` and `mask2` to alternate visibility. The circular mask radius animates over five seconds, while a separate rotation transform spins the vertical lines, mimicking LeWitt’s geometric rules.

Dec 16, 2022

Reproduction Sol Lewitt

A minimalist web page reproduces a Sol LeWitt-style drawing by rendering a series of thin vertical rectangles across the full width and height of the browser window. It shows a grid-like pattern of evenly spaced black bars on a white background, directly evoking the artist's geometric wall drawings. The code uses the SVG API via `document.createElementNS` to create and append each `rect` element to an SVG canvas, with a loop incrementing by 20 pixels to position the 10-pixel-wide bars. The rendering is purely procedural, with no external data or libraries.

Pseudo Horizontal Bar Chart

A pseudo horizontal bar chart displays five labeled bars (A through E) as black rectangles against a white background, with each bar's length varying by category. The SVG markup creates the bars using fixed path coordinates, while labels are positioned along the left axis via text elements. The visualization uses a clipped rectangular container and a 'Share Tech' font from Google Fonts. This example relies purely on inline SVG paths and text elements, demonstrating a static, non-interactive chart built directly with raw SVG code.

Pseudo Bar Chart

This example presents a simple pseudo bar chart with five evenly spaced rectangles of descending height, all rendered in grayscale against a white background. The code uses only raw SVG elements, specifically `<svg>` and `<rect>` tags, with no JavaScript libraries or data-binding techniques. Each bar is manually positioned with explicit `x` and `y` coordinates and fixed `width` and `height` attributes, creating a static visual without scales or axes. The rendering approach relies entirely on declarative SVG markup within an HTML document.

Pseudo Scatter Plot

This pseudo scatter plot arranges thirteen evenly sized ellipses in a diagonal, upward-sloping pattern across a light gray SVG canvas. The circles progress from the lower left to the upper right, creating a visual representation of a distribution without any underlying data points. It is rendered entirely with static SVG `<ellipse>` elements and `<rect>` backgrounds, with no JavaScript or interaction. The minimalist design demonstrates how basic geometric shapes can simulate a scatter plot using only inline SVG markup and hardcoded coordinates.

SVG Fundamentals

This example demonstrates basic SVG shape rendering in an isolated HTML document. It draws a red circle, a blue diagonal line, and a blue stepped path with a thick stroke. The visualization uses raw SVG elements—`<circle>`, `<line>`, and `<path>`—with explicit coordinate and style attributes, requiring no external libraries or data sources. The rendering approach relies on the browser’s native SVG implementation, as specified in the inline `svg` tag with a 1000×1000 viewport.