Skip to main content
SimilarExport ZIP
100%

Let's make a page with D3.js

✓ Published0🌍 Public
DdancingCars
Last edited Jan 31, 2020
Created on Jan 31, 2020

This example demonstrates how to build a simple SVG page using D3.js, with an empty 960×500 SVG canvas ready for dynamic content. The code loads D3 from a CDN and applies minimal styling—removing body margins and hiding overflow—while leaving the canvas blank for user additions. It shows the foundational setup for creating SVG-based visualizations with D3, including the HTML structure, linked stylesheet, and script inclusion. The page relies on the standard D3 v3 library and SVG rendering, with no additional data sources or interactive behavior implemented in the visible files.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Try D3

This example demonstrates a blank SVG canvas populated through D3.js version 5, with a minimal stylesheet that removes page margins and hides overflow. The code initializes an empty 960×500 pixel SVG element and includes a script tag for the D3 library, though no data or visualization is actually drawn. It serves as a starting point for learning D3’s SVG manipulation capabilities, with the video link in the README providing further guidance. The example relies on the raw `d3.select` and SVG element creation APIs, though these are not yet invoked in the visible code.

CClair Sun
85% match
Loading thumbnail…

Some tests with D3js

This example presents a blank SVG canvas within a simple HTML page, structured with two paragraph elements and a stylesheet that removes page margins. The core behavior is driven by a JavaScript file that references a commented-out CSV loading routine for automotive dataset attributes like mpg, cylinders, and horsepower, suggesting a planned but inactive data import pipeline. The visualization itself is minimal, relying on the D3.js v6 library loaded from a CDN, with no active rendering code currently executing. The setup demonstrates a scaffold for potential D3-based scatter plots or charts, though the actual visual output remains unimplemented.

Aalobry
85% match
Loading thumbnail…

D3.js

This example shows an empty SVG canvas with a hidden overflow, providing a blank slate for D3.js visualizations. The code sets up a basic HTML page with an SVG element sized 960 by 500 pixels, styled by an external CSS file that removes margins and hides overflow. Using D3.js v3, the visualization is rendered via SVG, though no specific data or visualization elements are yet defined, leaving the scene intentionally blank for further development.

DDD
84% match
Loading thumbnail…

Test D3.js

A minimal, blank SVG canvas of 960 by 500 pixels serves as the sole visual output, framed by a hidden-overflow layout. The example demonstrates a foundational D3.js setup, embedding an empty SVG element and linking a separate stylesheet that zeroes the page margin. No marks, axes, or data are rendered; the page simply establishes the structural and stylistic baseline for future D3.js visualizations. The code relies on the raw SVG API within an HTML document, with D3.js not yet invoked.

Llukasbro
84% match
Loading thumbnail…

D3.js!

This example presents a blank SVG canvas with dimensions of 960 by 500 pixels, created to demonstrate a basic D3.js setup. The visualization renders nothing visible, as the code selects the `svg` element using `d3.select` but does not draw any marks. It loads data through the `d3.csv` import and relies on D3 v5.9.2, all within a minimal HTML page that links external styles and a bundled script. The rendering is purely SVG-based, with no additional graphical output shown.

SSerjoA
84% match
Loading thumbnail…

d3 getting started

This example demonstrates a minimal starting point for a D3.js project, rendering an empty SVG canvas at 960 by 500 pixels with a hidden-page layout. The page loads D3 v5 from a CDN and immediately executes `console.log(d3)` in both a linked external script and an inline script, verifying that the library is available in the browser’s console. The code uses the SVG rendering approach and relies on D3’s core API for library initialization, though it performs no data binding or visualization yet.

MMostafa Zaki
84% match
Loading thumbnail…

Let's make a face

This example demonstrates how to build a simple, blank SVG face using D3 version 3, with a 960-by-500 pixel canvas. It shows only the basic setup of an HTML page, an SVG container, and a script that logs the D3 object to the console, with CSS hiding page margins and overflow. The code does not yet draw any facial features or interactive elements, serving instead as a starting template for adding shapes and styling. The rendering relies on the selection of the SVG element and is ready for subsequent D3 methods, though no data or visual output is currently generated.

BBartłomiej Czyżewski
83% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a playful face out of basic SVG shapes using D3.js v5, with the drawing placed directly inside an SVG container. The page loads D3 from a CDN and sets up a simple 960×500 viewport with a clean, margin-free body. Though the code includes an empty console.log(d3) call and minimal styling, it demonstrates how D3 can be used to structure and manipulate SVG elements for custom illustrations. The visualization relies on standard D3 selection and joining methods to create a character from scratch, showing the library’s flexibility beyond data-driven charts.

Mmirna981
83% match