SVG Example

100%

✓ Published0🌍 Public

Last edited Mar 29, 2015

Created on Mar 27, 2015

A hand-drawn stick figure and two text prompts occupy a static SVG canvas, while a D3.js v3 script loads London Borough Profiles data without performing any visible data binding or visualization. The page renders fixed shapes—lines, ellipses, and text—directly in HTML `<svg>` markup, with no dynamic updates from the CSV file. The example demonstrates raw SVG element creation and D3’s `d3.csv` callback interface, though the loaded population and hectare values remain unused in the displayed output.

AI-generated description

Similar vizzes

Loading thumbnail…

D3.js

This example shows a bare SVG element sized 960 by 500 pixels, with no visible chart or data rendered from the provided CSV of country populations. The page loads D3 v5, imports `select` and `csv` from the library, and sets width and height variables from the SVG attributes, but the JavaScript stops there without drawing marks or binding data. The stylesheet applies a 13em font size to the body, affecting the page’s text layout. Rendering is purely SVG, with no axes, scales, or population values displayed.

Ggrethelsaid

80% match

Loading thumbnail…

Example

This example loads a CSV file of country populations and logs the parsed data to the browser console, while displaying a static SVG canvas with a dark, centered title message. The page uses D3 v5’s `csv` function to fetch and parse `data.csv`, and D3’s `select` method to access the SVG element’s width and height. The stylesheet pulls in the Ubuntu font and applies a large, high-contrast text layout, though the visualization itself does not yet render the population values graphically.

BBagger-Ransom

79% 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

79% match

Loading thumbnail…

HTML Starter

This example displays a blank SVG canvas with a hidden dataset of country population densities loaded from a CSV file. The page uses D3’s `select` and `csv` methods to fetch and parse the data, logging it to the console. The visualization skeleton is minimal, featuring only a styled SVG element, leaving the actual plotting logic unimplemented.

Kkhuton

78% 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

78% match

Loading thumbnail…

Data Visualization and Infographics with D3 :: Module 2 Exercise

This example demonstrates how to combine static inline SVG shapes with a D3-driven data load to illustrate the contrast between hand-coded graphics and dynamic data binding. It shows a fixed composition of a circle, rectangle, polygon, and text element, while the script uses D3’s `d3.csv` to fetch `websitesEuro18.csv` and log the parsed array of JSON objects to the console. The SVG is rendered directly in the HTML with CSS styling for fills, strokes, and fonts, while the CSV data remains unused in the visualization, serving only to verify loading. The libraries used are D3 3.5.5 and standard SVG DOM APIs.

JJoaoGoncalves

77% match

Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe

77% match

Loading thumbnail…

Module 2 Exercise

This example presents a static SVG scene with two colored circles and corresponding text labels, demonstrating basic shape and text rendering within the D3.js framework. Using raw SVG elements, the code draws a purple circle labeled “It's Purple!” and a blue circle labeled “This one is blue” on a 500 by 500 canvas. Below this, the script loads the ChicagoFDIC.csv data file via the `d3.csv` function, logging the parsed array of JSON objects to the console. The visualization itself does not display the CSV data, focusing instead on foundational SVG drawing techniques with a placeholder for future data-driven graphics.

AAbechtel

77% match