I

Igathi

@Igathi·29 public vizzes

Loading thumbnail…

SVG image try!

This example shows three colored circles labeled with fruit names, where hovering over a circle displays a corresponding image and moving the mouse away hides it with a white rectangle overlay. The visualization uses D3.js v4 to bind fruit data to SVG circles and text labels, then attaches `mouseover` and `mouseout` events to trigger custom `redraw` and `eraseRedraw` functions. Images are appended as SVG `<image>` elements using `svg.append("svg:image")`, while the erasing effect is achieved by drawing a white `<rect>` over the displayed image, relying on D3’s selection and data-join methods for static rendering.

Loading thumbnail…

load image

A single image loads inside an SVG canvas and is positioned at the top-left corner of a 960-by-500 pixel viewport. The example demonstrates a minimal D3 v4 setup using the `d3.select` and `svg.append("image")` methods to embed a JPEG file via the `xlink:href` attribute. The image is fixed at 200 pixels wide and 200 pixels tall, with no scaling, animation, or interaction. The code relies on the standard D3 selection and append API, rendering the graphic as static SVG output.

Loading thumbnail…

Center MB zoom circles in and out

The visualization shows a set of four colored circles arranged around the center of the screen, which zoom in and out when clicked. It demonstrates a custom zoom behavior where each circle, when selected, scales to a consistent size relative to the viewport, centering the clicked circle regardless of its original position. The code uses d3.zoom with a transition to animate the zoom transform, applying a computed scale and translate to focus on the clicked circle. SVG circles are rendered with fill colors and a gray feature class, while a background rectangle resets the view when clicked. The data consists of hardcoded circle coordinates and radii in a JSON array.

Loading thumbnail…

MB zoom circles in and out

This example demonstrates a zoomable map interface where clicking a circle smoothly scales and pans the view to center on that circle, with a reset option to return to the initial state. It uses D3 v4 with SVG rendering and animation, relying on `d3.zoom` and `d3.zoomIdentity` for transform handling and `transition.call(zoom.transform)` for the animated effect. The data is a static array of circle objects with coordinates, radius, and colors, while a topojson feature layer provides the underlying map context. The background rectangle enables click-to-reset functionality, and strokes adjust dynamically based on zoom scale.

Loading thumbnail…

MB zoom circles in and out

Three circles, colored green, purple, and red, sit on a white canvas as the core subjects of this zooming example. The visualization demonstrates click-to-zoom interactions using d3.zoom, where clicking a circle triggers a smooth transition that scales and translates the view to center on that circle. The code uses d3.v4 with SVG rendering, and the zoom behavior is applied to the entire SVG container while individual circles respond to click events. A background rectangle handles resetting the view when clicked, and the active circle is tracked to toggle between zoomed and reset states. The data consists of a simple JSON array of circle positions, radii, and colors, rendered as SVG circle elements.

Loading thumbnail…

Zoom to Bounding Box II d3v4-Identity

This example demonstrates how to zoom to a bounding box of a selected geographic feature using D3 v4’s zoom behavior and transitions. The map displays U.S. counties in California, rendered as SVG paths from a TopoJSON file. Clicking on a county triggers a smooth zoom transition that centers and scales the view to fit the county’s bounding box, while also allowing users to freely pan and zoom with mouse or touch interactions. The animation between views is handled by D3’s zoom transition, which interpolates the transform values for a fluid, intuitive user experience.

Loading thumbnail…

zoom/pan d3v4 - Full

This example demonstrates how to implement zoom and pan interactions on an SVG canvas. The visualization displays a single green circle centered in the viewport, with the zoom behavior applied directly to the SVG group element. The code uses the D3 v4 zoom API via `d3.zoom().on("zoom", zoomfn)` to handle mouse and touch events, and the zoom function applies the event transform to the group. A circle is rendered at the center using `svg.append("circle")`, and the zoom handler updates the group’s `transform` attribute while also calling `svg.scale(4)`, which scales the entire group by a fixed factor. The SVG fills the browser window.

Loading thumbnail…

Mouse click

Three circles, bound to the array `[50,40,60]`, render in steel blue on an SVG canvas. Hovering turns a circle red, and clicking turns it black, while a zoom behavior attached via `d3.behavior.zoom` allows panning and scaling the entire group with the mouse wheel or drag. The example demonstrates basic event handling and zoomable SVG rendering using D3 v3, with the data hardcoded in the script.

Loading thumbnail…

Zoom to Bounding Box II - test

This example demonstrates a zoomable and pannable map of U.S. states, where clicking a state smoothly transitions the view to center and scale that state’s bounding box. It shows how to combine free-form zooming and panning with programmatic animated transitions. The visualization uses D3 v3 with the `d3.geo.albersUsa` projection, `d3.geo.path` for rendering GeoJSON features, and `d3.behavior.zoom` for user interaction. Clicking a state triggers a 750-millisecond zoom transition, while a background click resets the view. State boundaries are drawn as a TopoJSON mesh, and the map data comes from a TopoJSON file of U.S. states.

Loading thumbnail…

Rectangles data Color Jason Zoom

This example shows three colored rectangles, each labeled with a color name, positioned at fixed coordinates on an SVG canvas. The visualization maps a small JSON dataset, where each object defines the rectangle’s x/y position, width, height, fill color, and label, directly to SVG elements. Using D3 v4, the code binds the data to `rect` elements via `selectAll` and `data`, then sets the geometry attributes (`x`, `y`, `width`, `height`) and inline `fill` style from the data. It also appends `text` elements to display each rectangle’s name, with labels placed near the shapes using computed offsets. The rendering approach is purely SVG-based, with no axes or scales, presenting a straightforward data-driven layout.

Loading thumbnail…

Geo Map

This map of the United States lets users click a state to zoom in on it and click the background to zoom back out. The visualization uses D3.js v3 with the `d3.geo.albersUsa` projection and `d3.geo.path` to draw state boundaries from TopoJSON data loaded from a GitHub gist. Clicking a state triggers a smooth `g.transition()` that adjusts the scale and translate attributes, while the active state is highlighted in orange via CSS classes.

Loading thumbnail…

fresh block1

A simple SVG canvas displays a short, static text message. The example uses D3.js v4 to append a single `<text>` element to the SVG, positioning it at a fixed coordinate and styling it with a monospace font. The code demonstrates the basic D3 selection and appending pattern, with the text content and attributes set directly in the script. No data binding or interactive behavior is included, serving as a minimal starter template for further visualization work.

Loading thumbnail…

fresh block

This example visualizes a small set of six rectangles, each positioned and sized by explicit x/y coordinates and width/height values, with colors assigned individually. It shows the spatial arrangement of these shapes on an SVG canvas, computed by finding the maximum extents of all rectangles to set the canvas size. The code uses D3 v3 to bind the JSON data to `rect` elements, setting position and size attributes, while also appending a canvas element to the body. The data source is inline in the script, and the rendering relies on standard SVG attributes.

Loading thumbnail…

Simple Difference Chart

This simple difference chart visualizes daily download counts for two books—R Programming for Data Science and The Elements of Data Analytic Style—from April to June 2015. It uses an SVG line chart with an area between the two series, shaded green where one book has more downloads and orange where the other leads, making the comparative difference visually explicit. The chart includes labeled axes and a legend, and is implemented with D3 v3, based on a block by Mike Bostock and adapted from D3 Tips and Tricks.

Loading thumbnail…

fresh block test

This example visualizes six colored rectangles positioned on an SVG canvas, with each rectangle’s dimensions and color defined by an array of JSON objects. It first calculates the maximum bounding box dimensions from the data using a for loop, then sets the SVG’s size accordingly. The code uses D3 v4’s selection and data binding methods (`d3.select`, `.data`, `.enter`) to append and style the rectangles via `.attr` and `.style` calls. The visualization highlights a simple approach to mapping raw data to geometric primitives, with the source data embedded directly in the script and rendering done entirely through SVG.

Loading thumbnail…

Rectangles using data Color II

This example shows seven rectangles, each filled with a distinct color from a hardcoded JSON dataset that defines their position, size, color, and name. The rectangles are rendered on a 960 by 500 pixel SVG canvas, with each rectangle labeled next to it using its corresponding name. The code uses D3 v4’s selection and data binding to append a group for each data element, then appends a `rect` and a `text` child to each group. The rectangles use a black stroke for clarity, while the text is styled in a monospace font. The data source is an inline array of objects, and the rendering relies on D3’s SVG manipulation.

Loading thumbnail…

Rectangles using data Color

This example shows a set of seven colored rectangles, each labeled with a name, positioned at fixed coordinates on an SVG canvas. The rectangles are bound to an array of data objects containing x/y positions, dimensions, and color values. The code uses D3 v4’s `selectAll` and `data` binding to create and style each rectangle, then appends text labels next to them. The data comes from an inline JSON array, and the visualization uses SVG for rendering, with colors specified as hex and RGB strings.

Loading thumbnail…

Rectangles data Color Jason

This example visualizes a small hardcoded dataset of seven rectangles, each with explicit position, size, color, and a text label. The visualization shows the rectangles as colored SVG shapes with black outlines, while each rectangle is paired with its name displayed to its right in monospace font. The code uses D3 v4 to bind the JSON data array to SVG `<rect>` and `<text>` elements via `d3.selectAll().data().enter().append()`. It sets position and size attributes directly from the data properties, fills each rectangle with its specified color string, and positions the labels by offsetting from each rectangle’s coordinates. The rendering approach is plain SVG appended to the body, with styling applied inline through D3’s `.attr` and `.style` methods.

Loading thumbnail…

block with text

This example demonstrates two labeled rectangles, one red and one blue, each with a corresponding text caption. It shows how static shapes and text can be placed side-by-side in an SVG canvas using D3.js v4. The code selects the body element, appends an SVG container, and uses `append('rect')` to draw each rectangle with explicit `x`, `y`, `width`, and `height` attributes, while `append('text')` adds monospace labels. The positions are calculated manually with variables, and styling is applied via `.style('fill', ...)`. No data loading or dynamic scales are involved, relying solely on hardcoded values.

Loading thumbnail…

Rectangles using data color

Four rectangles are drawn from a hard-coded JSON array, each with its own fill color and a monospace text label offset to the right. The visualization uses D3 v4’s data join: `selectAll("rect").data(jsonRectangles).enter().append("rect")` binds the array, then `attr` methods set each rectangle’s `x`, `y`, `height`, and `width` from properties, while `style("fill", ...)` applies the color. Text labels are similarly bound and positioned using `x_axis + width + 5` and `y_axis + height`. The example demonstrates basic static SVG rendering with D3 selections and data-driven attributes.

Loading thumbnail…

Rectangles using data

This example shows how to bind a hardcoded JSON dataset of four rectangles—each with position, size, color, and a name—to SVG elements using D3 v4. It first creates the rectangles via `d3.selectAll("rect").data(...).enter().append("rect")`, then sets their `x`, `y`, `width`, and `height` attributes and `fill` style from the data. It also appends text labels next to each rectangle, positioning them relative to the rectangle’s coordinates and size. The visualization demonstrates basic data joins and attribute binding in D3, with the source data defined inline in the script.

Loading thumbnail…

Rectangles using data

This example shows a blank interactive canvas with a single instructional text prompt, inviting code edits. The visualization uses D3 v4 to append an SVG element to the body, sized at 960 by 500 pixels, and places a monospaced text label at a fixed position. The code relies on D3’s selection and append methods to construct the SVG structure, though it renders no data-driven rectangles or other marks. The rendering approach is static SVG output, with no external data source loaded.

Loading thumbnail…

Zoom to Bounding Box II d3v4

This example demonstrates zooming and panning across a map of the United States, with clickable states that smoothly transition to fill the viewport. It shows how to combine geographic projections with D3’s zoom behavior for interactive exploration. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to render TopoJSON state boundaries, and `d3.zoom` to handle free pan and zoom. Clicking a state triggers a 750ms transition via `zoom.transform`, calculating a bounding-box scale and translate to frame the feature. The active state is highlighted in red, while stroke widths adjust inversely to the zoom level for crisp rendering.

Loading thumbnail…

Epicyclic Gearing

This example visualizes an epicyclic gear system, showing how a sun gear, three planet gears, and an outer annulus mesh and rotate together. A radio-button menu in the top-left switches the frame of reference, fixing either the annulus, planets, or sun in place while the other gears orbit accordingly. The animation runs via `d3.timer`, rotating each gear group based on its radius and tooth count, while `frame.attr("transform", ...)` applies the rotation offset for the selected reference. The code uses D3 v4 with SVG rendering, building each gear’s toothed path from trigonometric calculations and applying `fill-rule: evenodd` to create the cut-out centers.

Loading thumbnail…

block 2.6

Four empty divs labeled A through D are selected and styled using D3.js v3, with each element’s width increasing linearly based on its index (10 to 40 pixels) and alternating background colors (lightblue for even indices, lightgray for odd). The example demonstrates how `d3.selectAll` and the `.style` method apply multiple CSS properties via a function that receives the data index. The code uses `d3.v3` from a CDN, with no external data source—only static HTML elements. This block illustrates basic data-driven styling without binding data arrays.

Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates an interactive D3 v4 workshop that teaches basic HTML, d3, and data binding through a hands-on exercise. It shows a button that, when clicked, runs a d3 code snippet targeting paragraphs inside a sandboxed div, while a checklist outlines tasks like adding paragraphs, manipulating text, and binding arrays. The code uses d3.js v4, with d3.select and d3.selectAll to handle DOM selection and manipulation, plus event handling for button clicks. The visualization renders static HTML paragraphs as the primary data display, with the exercise structure guiding users through progressive coding challenges.

Loading thumbnail…

One unfilled rectangle

This example demonstrates how D3.js can manipulate existing DOM elements and their properties. It starts with a simple HTML div containing a checkbox, then uses D3 selections to change the div’s border style to a dark gray dashed pattern and reassigns its ID attribute. The checkbox’s checked property is also set to true via D3’s property method. The visualization highlights D3’s ability to integrate with static HTML and dynamically update both CSS styles and element attributes, using the d3.v4 library directly in the browser without any external data sources or complex rendering.

Loading thumbnail…

Zooming and Panning

Four multicolored circles arranged in a square pattern sit at the center of an SVG canvas. The visualization demonstrates zooming and panning through d3.behavior.zoom, which captures mouse wheel drags and touch gestures. Users can scale the view between 1× and 10× magnification and pan freely by dragging. The circles’ positions are defined in data arrays and rendered as SVG circle elements with a translate transform applied to the parent group during zoom events.

Loading thumbnail…

Zoom to Bounding Box II d3v4

This example demonstrates zooming and panning across a map of the United States, with clickable states that smoothly transition to fill the viewport. It shows how to combine geographic projections with D3’s zoom behavior for interactive exploration. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to render TopoJSON state boundaries, and `d3.zoom` to handle free pan and zoom. Clicking a state triggers a 750ms transition via `zoom.transform`, calculating a bounding-box scale and translate to frame the feature. The active state is highlighted in red, while stroke widths adjust inversely to the zoom level for crisp rendering.