Heet Bhatt

@HeetBhatt·14 public vizzes

transition in d3

This example demonstrates how to update circle positions in an SVG using D3 transitions. Clicking the button generates five random data values with a JavaScript loop and applies them to the circles via the `data()` join method. The code uses D3 v7’s `select` and `selectAll` functions, along with the `join` method to bind data and update the `cx` attribute, though no explicit transition is defined. The visualization relies on a simple SVG container with hardcoded circle elements and a randomized numeric dataset.

Jul 9, 2023

Loading thumbnail…

radial line

This example demonstrates a radial line drawing that connects a series of points defined by angle and radius, forming a closed polygonal shape with varied distances from the center. Using d3.radialLine, it maps angular coordinates to SVG path data, with the line rendered inside a 2000x2000 SVG canvas. The code defines an array of points and assigns the generated path to the `<path>` element via `select("path").attr("d", ...)`. The visualization relies on D3 v7 and shows how radial line generators translate polar coordinates into a Cartesian path.

Jun 25, 2023

Loading thumbnail…

shapes

This example demonstrates how to generate a smooth, curving line path in D3 version 7 using the `d3.line` generator with the `curveCardinal` interpolation. The code defines an array of six coordinate points and passes them to the generator, whose output is then assigned to an SVG `<path>` element via the `attr` method. The visualization runs entirely in an SVG renderer with a single path displaying the resulting curved shape on a 2000x2000 canvas. The example highlights a minimal, direct approach to converting raw coordinate data into a visual shape.

Jun 25, 2023

Loading thumbnail…

scale

This example demonstrates the foundational concept of D3 scales by computing and logging values from linear, square root, and time scales, then calculating the extent of a small dataset and applying a linear scale with a nice domain. It uses the d3 v7 library, importing scaleLinear, scaleSqrt, and scaleTime from d3, and renders to a blank SVG canvas. The code defines explicit domains and ranges to show how input values map to output pixel positions, with a dataset of five numeric values and an extent-based domain.

Jun 24, 2023

Loading thumbnail…

data join

This example demonstrates the D3 data join pattern by binding an array of city population objects to SVG rectangles and text labels, producing a simple horizontal bar chart. The code uses `select` and `data` from D3 v7, with the `.join` method to create elements for each datapoint. Rectangles are sized proportionally to population via a scale factor, while a separate join on a `.labels` group renders each city’s name. The SVG canvas is fixed at 2000×2000, with five cities hardcoded in the script.

Jun 23, 2023

Loading thumbnail…

append and remove elements in d3

This example demonstrates how to select, filter, and style SVG circle elements using D3 v7. The page shows a row of five circles rendered inside an SVG container, with every other circle filled orange via `selectAll("circle").filter()`. The code also includes commented-out demonstrations of `append()`, `remove()`, and `each()` for adding text, deleting elements, and applying conditional styling. Data is not loaded externally; instead, the circles are predefined in the HTML markup and manipulated directly through D3 selection methods.

Jun 22, 2023

Loading thumbnail…

rectangles using d3

Five rectangles are displayed in an SVG canvas. The rectangles are initially unstyled, and user interaction changes their fill color: clicking turns a rectangle orange, mouseover turns it green, and mouseenter turns it white. The code uses D3 v7's `selectAll` and `select` functions to bind event listeners and set attributes like width, height, x, and y. Positioning is computed with a conditional expression that alternates the horizontal offset based on each rectangle's index.

Jun 22, 2023

Loading thumbnail…

data join in d3

This example demonstrates how to use D3 version 7's data join operations to dynamically modify SVG circle elements. It shows four circles positioned horizontally on an SVG canvas, with their radii and fill colors being set through D3's `selectAll` API. The code uses the `selectAll` function to target all circle elements and applies random radius values between 10 and 14 pixels, along with a uniform yellow fill. The page loads D3 from a CDN and renders the visualization as inline SVG within an HTML document.

Jun 22, 2023

Loading thumbnail…

making a bar chart

This example displays a bar chart of country populations using a vertical band scale for countries and a linear scale for population values. It reads data from a CSV file, converts population numbers by multiplying them by 1,000, and renders SVG rectangles via d3.select and d3.scaleBand. The chart initially appends rects with hardcoded widths and heights, but the intended layout maps each bar’s width to population through d3.scaleLinear and positions them by country. The code uses d3.csv, d3.max, and d3.scaleLinear, though the final dimensions are not fully computed.

Jun 22, 2023

Loading thumbnail…

d3

This example uses D3.js (v7) to draw a simple yellow face on an SVG canvas. The visualization shows a circle for the face, two smaller black circles for eyes, and an arc-shaped path for a mouth. The code uses D3's `select` and `append` functions to build the SVG elements, and the `arc` function to generate the mouth path with specified inner and outer radii and angular range. The entire composition is centered on the canvas using a group element with a translate transform.

Jun 21, 2023

Loading thumbnail…

javasctipt_module

This example demonstrates a message-loading visualization that displays a bold, large-scale "Hello" greeting in the browser. It uses a custom JavaScript module to set the text content of an HTML paragraph element, rendering the message with a 90-pixel font size. The page loads two scripts: a modular ES6 script for main logic and a bundled script for additional functionality. The visualization relies on the DOM API to update the text dynamically, with no external data sources or complex rendering libraries involved.

Jun 11, 2023

Loading thumbnail…

Fork of Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-inspired drawing using D3.js (v3) to render an SVG canvas. It creates 100 horizontal marks, each with a fixed height and a width equal to the full window width, and applies a circular clipping mask via an SVG `mask` reference. The code uses `select('body').append('svg')` to build the visualization and a JavaScript array to define the mark positions and dimensions, with a simple loop populating the data.

Jun 10, 2023

Loading thumbnail…

Sol Lewitt Reproduction

This reproduction of Sol LeWitt’s geometric art displays 100 vertical black stripes of varying width, all confined to a central circular region. The piece is generated using JavaScript and the SVG API, creating a mask that clips the rectangles to a circle. The rendering approach directly encodes the artwork's rule-based aesthetic, where each stripe’s position and thickness follow a simple iterative pattern rather than external data. The result highlights the intersection of algorithmic generation and minimalist visual composition.

Jun 9, 2023

Loading thumbnail…

hello

This example shows a static SVG canvas containing basic geometric shapes—a circle, a stroked rectangle, a blue line, and a black path—placed at fixed coordinates. The page demonstrates a minimal D3 setup by using the `select` API from D3 version 6 to replace the body text with a greeting. The visual output is hand-coded in HTML, with no data binding or dynamic behavior, and rendering is done via inline SVG elements. The accompanying README references a YouTube tutorial for starting with D3.

Jun 8, 2023