Skip to main content
SimilarExport ZIP
100%

Data Visualization and Infographics with D3, Module 2, Exercise 1

✓ Published0🌍 Public
SSassOnTheRoad
Last edited Mar 23, 2015
Created on Mar 23, 2015

This example displays a single static blue circle centered within a small 50 by 50 SVG canvas, using a gray outline and a two-pixel stroke. It serves as a minimal demonstration of primitive SVG shape construction, where the circle is positioned via explicit `cx` and `cy` attributes and sized with an `r` radius. The visualization uses the standard D3.js library, though the code relies directly on raw SVG elements rather than D3-specific data joins or scales. The rendering approach is entirely declarative, showing how a basic geometric mark can be encoded directly in an HTML file without external data sources or interactive behavior.

AI-generated description

Similar vizzes

Loading thumbnail…

Data Viz with D3

A minimal SVG scene demonstrates basic geometric shapes and styling within a static HTML page. The visualization displays two filled circles, one outlined circle with a blue stroke, and a green rectangular border, all rendered directly through inline SVG markup. The code uses no external JavaScript libraries; instead, it relies on native SVG elements and CSS properties such as `fill`, `stroke`, and `r` for circle radii, while the React Starter link references an alternative approach for interactive builds.

SS1lus
83% match
Loading thumbnail…

circle

This example shows a single green circle with a blue stroke rendered on a blank SVG canvas. The visualization demonstrates basic D3 version 7 usage by importing the `select` function from the `d3` module and updating the page text. The circle is defined directly in the HTML markup with fixed `cx`, `cy`, `r`, and fill attributes, while SVG provides the rendering surface. The code illustrates how to begin a D3 project, though it does not yet bind any external data.

Cclass-sikh
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational SVG shape elements used in data visualization, showing a single small circle rendered on a blank canvas. The code uses the native SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes to position and size the mark. The visualization is rendered directly in the browser through inline SVG markup within an HTML document, with no additional JavaScript libraries or data binding involved. It serves as a minimal starting point for understanding how geometric primitives form the basis of more complex chart constructions.

TTravis DePriest
82% match
Loading thumbnail…

SVG Fundamentals

A single blue circle is drawn inside a 960×500 SVG canvas, centered at coordinates (50, 50) with a radius of 50 pixels. The example demonstrates fundamental SVG shape creation using inline markup in an HTML document, with the circle’s fill color set to blue via the `fill` attribute. The page also includes a commented reference to loading D3 v7 from a CDN and an uncommented script tag for `bundle.js`, though the circle itself requires no JavaScript to render. The visualization serves as a minimal introduction to SVG’s coordinate system and basic element syntax.

RRohan Cheera
82% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
82% 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
82% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
82% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
82% match