jajinkya

@jajinkya·7 public vizzes

SVG Fundamentals

This example demonstrates the basic structure of an SVG graphic, using a single path element to draw a simple, compact shape. The code sets up an SVG canvas with specific width, height, and viewBox attributes, then renders a path with a white fill and grey stroke. The path data contains coordinates that create a closed, geometric form, illustrating how raw SVG path commands define vector shapes. The example relies on the native SVG API within an HTML document, with no external JavaScript libraries involved, and the rendering approach is direct SVG markup.

Jun 16, 2023

Loading thumbnail…

Create Bar Chart

This example shows a bar chart of yearly values from 2011 to 2016, with dollar-formatted y-axis labels. It loads data from a CSV file using d3.csv, then maps the data to a responsive SVG canvas. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes. The visualization positions the plot area with a margin offset and applies a 0.4 padding to the bars for spacing.

Nov 16, 2022

Loading thumbnail…

Bar Chart

This bar chart displays six numeric values as horizontal rectangles, with each bar’s length scaled linearly from its minimum to maximum value. The visualization uses D3 v7 to bind the data array to SVG groups, appending a rectangle and a text label per value. The chart positions each row using transform translations, and the x-axis scaling is handled by d3.scaleLinear. The SVG dimensions are fixed at 500 pixels wide with a bar height of 20 pixels, and the chart is rendered directly into the body element.

Nov 16, 2022

Loading thumbnail…

JS in HTML

This example renders a scatter plot of the Iris dataset, showing the relationship between petal length and sepal length. Data is loaded from a GitHub-hosted CSV using `d3.csv` and parsed to numeric values, then mapped to SVG circles. The visualization uses `d3.select` to create the SVG canvas, `d3.scaleLinear` for both axes with `d3.extent` for domain calculation, and displays the axes with `d3.axisLeft` and `d3.axisBottom`. Each circle includes a tooltip title showing its coordinates. The chart fills the browser window, with margins defined via a constant.

Nov 6, 2022

Loading thumbnail…

Javascript Arrays

Animated circles undulate across the screen, their positions and radii shifting smoothly with a sinusoidal rhythm to illustrate dynamic array manipulation in JavaScript. The visualization uses D3.js (v7) with SVG rendering, generating data through a custom `makeData` function and updating the scene at 60 frames per second via `setInterval`. The D3 join pattern in `vizData` binds new data arrays to existing circle elements.

Nov 6, 2022

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles that overlap across the full browser window. The composition uses SVG masks to create alternating visibility: one mask reveals a central diamond shape against a black background, while the other inverts the pattern with a white background. The code leverages D3’s `select`, `range`, and `join` to append rectangles, and `symbol` with `symbols` to define the diamond mask paths. Rendering is SVG-based, with masks applied via the `mask` element.

Nov 5, 2022

Loading thumbnail…

Fork of Fork of Sol Levitt's Art Reproduction2

This visualization presents a grid of horizontal and vertical bars overlaid with two circular masks, creating a dynamic interplay of black and white regions reminiscent of Sol LeWitt's generative art. The code uses D3.js selection and data-binding APIs, including `select`, `range`, and `join`, to render 100 SVG rectangles. A custom `renderMask` function builds inverted `mask` elements, applying `symbols[0]` (a circle) to selectively reveal or hide parts of the grid. The rendering is fully SVG-based within a React-free vanilla JavaScript setup.

Nov 5, 2022