D3.js

100%

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Sep 9, 2012

This D3.js example demonstrates the marching squares and convex hull algorithms from the d3.geom module, rendering SVG polygons with animation. The visualization computes contour polygons for a given grid function and convex hulls for sets of points, displaying them as animated vector graphics. Using d3.v2, the code samples highlight algorithmic geometry operations (contour tracing and Graham scan) implemented in D3's geometry namespace, with the SVG rendering showing how these computed polygons adapt dynamically as the underlying data changes.

AI-generated description

copy of the 2011/09 talk by Mike Bostock; very minor tweaks to make it run with the latest d3.v2.js in this gist setting.

Similar vizzes

Loading thumbnail…

D3 Path Examples

This example demonstrates how D3.js can draw and animate SVG paths from simple coordinate datasets, including diagonal and horizontal lines, multipoint curves, triangles, and rectangles. The code defines multiple data arrays and uses the `d3.svg.line()` API with various interpolation types to render static shapes, while separate functions animate paths by transitioning the `d` attribute using `transition().duration(6000)`. One animation elongates a horizontal line by mutating the dataset’s endpoint, and another shifts the line’s origin point, both relying on D3’s built-in transition system. The page sets its frame height to 1800 pixels to accommodate the multiple SVG canvases.

GGuerino1

75% match

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

74% match

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

74% match

Loading thumbnail…

D3.js in action!

This example shows a red square with a thick black border rendered inside an SVG canvas, demonstrating basic D3.js DOM manipulation. The code uses `d3.selectAll('svg')` to target the SVG element and appends a `rect` with attributes for position, size, stroke, and fill. It relies on the D3 v5 library loaded from a CDN, and renders the shape as pure SVG geometry without any data binding or interaction. The result is a static visual, illustrating how D3 can directly create and style SVG elements.

SSagar Malviya

74% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

73% match

Loading thumbnail…

D3

This example showcases a D3 visualization rendered as an SVG within an HTML page, loading the d3.v5 library from a CDN. The code sets up an SVG canvas of 960 by 500 pixels and includes a linked stylesheet, suggesting styled output. The visualization depends on an external JavaScript module (`/js/main.js`) that likely leverages D3’s core APIs to generate the graphics, though the specific chart type or data source is not visible in the provided files.

CCody Shaner

73% match

Loading thumbnail…

D3.js| Path

The example displays a collection of primitive shapes and line types in an SVG canvas using D3.js v4. It shows circles, rectangles, and various path elements, including arcs drawn with the `arc()` function and lines generated by `d3.line()` and `d3.path()`. The visualization uses D3’s selection, data-binding with `.datum()`, and data-driven loops via `.data()` and `.enter()` to create elements from an array of values. The SVG background is green, with a GeeksforGeeks header, and all shapes are rendered statically without interaction.

Hhanulik.ondrej@gmail.com

73% match

Loading thumbnail…

d3js Exercice 3 - svg

This example demonstrates a minimal SVG composition built with D3.js v4, combining geometric shapes without data binding. It shows a blue rectangle and a yellow circle positioned inside an SVG canvas of fixed dimensions, highlighting how basic shapes render and layer in a web document. The code explicitly uses D3’s selection and styling methods, though the main styling is applied directly via SVG attributes such as `width`, `height`, `fill`, and `cx`/`cy` for positioning. The visualization serves as an introductory exercise, with commented-out instructions suggesting color manipulation and transforms like `translate` and `rotate`. No dynamic data is involved; the focus is purely on static SVG rendering and potential interactive styling adjustments.

AAlainRo

73% match