Skip to main content
SimilarExport ZIP
100%

d3 intro

✓ Published0🌍 Public
Nnwhalen2
Last edited Apr 7, 2021
Created on Apr 7, 2021
Forked from HTML Starter

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 intro

A D3.js example renders an SVG scene of a large yellow circle, flanked by two smaller outlined circles, against a brown background. The visualization demonstrates basic SVG shape construction and styling through the D3 API, using methods like `append`, `attr`, and `style` to set geometry, fill, stroke, and layout properties. It reads width and height attributes from the SVG element and positions shapes relative to those dimensions. The page loads D3 from UNPKG and imports `select` and `csv` from the local script. A static CSV data file is present but not used in the displayed scene.

RRITUZZ
86% match
Loading thumbnail…

intro to d3

This example demonstrates basic SVG shape rendering and styling within an HTML page, displaying circles, rectangles, lines, and paths at fixed coordinates. The visualization loads D3.js via UNPKG but primarily relies on raw SVG elements with presentation attributes for colors, strokes, and transforms. A stylesheet defines the SVG path's green stroke and stroke-width through CSS classes. The example serves as a minimal introduction to combining SVG markup with imported JavaScript libraries and external CSS, though it does not yet showcase D3's data-binding or dynamic layout capabilities.

RRITUZZ
86% match
Loading thumbnail…

HTML D3

This example shows a static set of basic geometric shapes rendered in an SVG canvas, using HTML, CSS, and JavaScript without any external libraries. It displays two circles, one pink and one black, alongside a black rectangle with a pink stroke, all positioned manually via SVG coordinates. The styling is applied through a CSS class for typography and inline presentation attributes for the shapes. The code demonstrates the foundational structure of an HTML page with embedded SVG, which serves as a minimal starting point for building more complex D3.js visualizations in a React environment.

SSurabhi Verma
86% match
Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania
85% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page with SVG rendering, featuring three concentric circles drawn at two horizontal positions and a closed blue curve through a diamond-shaped path. It shows how D3.js version 6 can select DOM elements, bind data arrays, and append shapes with dynamic attributes. The circles use transparent fills with black strokes, while the line graph employs d3.line() with curveBasis interpolation. The code mixes vanilla JavaScript with D3 selections, logging "Hello JavaScript!" to the console after rendering.

JJulianWgs
85% match
Loading thumbnail…

D3 starter

This example demonstrates two circles rendered on a 900x900 pixel SVG canvas. The first circle appears at the upper left with a default black fill, while the second, larger circle is positioned centrally and styled with a blue stroke and red fill. The code uses raw SVG elements within an HTML page, requiring no JavaScript libraries, and serves as a minimal starting point for visualization projects.

Ddual75
85% match
Loading thumbnail…

SVG Starter

This example displays a single red circle rendered inside an SVG canvas. It serves as a minimal setup for SVG-based visualization, showing how a static shape can be styled directly using D3. The code uses D3 v5's selection and styling API (`d3.select` and `.style`) to apply the fill color, while the circle itself is defined in plain SVG markup within the `index.html` file. The page also imports a separate stylesheet for global typography and layout.

AAndrew Smith
85% match
Loading thumbnail…

HTML Starter

This example demonstrates a basic HTML page that uses D3.js (version 5) to render a simple SVG scene. It draws a large circle in the center of a purple-background SVG, with two additional circles layered on top at the same position, though their intended roles as eyes are not visually distinct. The code uses D3's `select` and `append` APIs to create and style the SVG elements, and the page includes an HTML "Hello HTML" text. The data source is an empty `data.csv` file, and the rendering approach is SVG.

AAbhishek Kumar
85% match