Starter_Get it Black and White

100%

Starter_Get it Black and White

✓ Published2🌍 Public

Last edited Jul 8, 2022

Created on Jul 8, 2022

This visualization demonstrates a step in learning SVG fundamentals through D3.js, building a black-and-white composition of ellipses and rectangles. The static scene, rendered with the SVG framework using D3 version 7, shows black circles placed over light gray and dark navy shapes against a white canvas. The code defines geometric primitives directly in the markup, with ellipses at specific coordinates and rectangles of varying widths positioned to create an abstract layout, illustrating basic shape creation without dynamic data or interaction.

AI-generated description

A demonstration of how to start doing datavisualisation.

Work on the tutorials from Get it Black and White from Curran's new D3 videos.

We are doing only the basic SVG to begin with

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Starter

This example demonstrates a minimal starter project for D3 version 7, rendering a static scene with an SVG circle, rectangle, and text element on a light gray canvas. The code loads the D3 library from a CDN and uses basic SVG drawing primitives such as `circle`, `rect`, and `text` with inline styling attributes, while the accompanying JavaScript file only prints a console message. The page centers the SVG, and the visualization illustrates how to set up an HTML page with embedded D3 and inline styles without any interactive or data-driven behavior.

IIan Mac Moore

78% match

Loading thumbnail…

Fork of D3 Starter

This example shows a blank SVG canvas containing one white rectangle with a black outline and two dashed vertical lines, created as a minimal starter for D3 version 7. The code uses `d3.select` to target the body, appends an SVG element with fixed width and height, then draws the shapes using `svgContainer.append('rect')` and `svgContainer.append('line')`. The rectangle spans x-coordinates 50 to 850, while the dashed lines run from y=50 to y=130 at x=200 and x=300, all with black strokes and varying stroke widths. The visualization demonstrates basic SVG rendering through D3’s imperative API without any data binding.

Ssamuelbaker

78% match

Loading thumbnail…

d3 Starter

This visualization demonstrates a minimal starting point for building with D3, displaying a single large circle centered near the left side of an SVG canvas. The code uses D3 v7's `select` function to target the existing SVG element, then appends a circle with `append`, setting its radius to 300 and horizontal position to 300 via the `attr` method. While minimal, it establishes the core pattern of selecting, appending, and styling SVG elements.

JJason

77% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3 starter template that combines static SVG shapes with D3’s DOM manipulation. It displays a large yellow circle with black outline and two smaller unfilled circles positioned on the left and right, rendered directly in an SVG element without data binding. The code imports `select` from D3 version 6, then replaces the body text with “Hello D3 version 7”, showing how to use D3’s selection API alongside raw SVG markup. All shapes are hardcoded in the HTML, with script execution toggling the page text.

Kkamal

76% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for D3 version 7, rendering a single yellow circle with a black stroke inside an SVG element. The page loads D3 from a CDN and uses static SVG markup to display the shape, with no data binding or interactive behavior. The code includes commented-out imports and selection methods, showing how a D3 script would typically begin, while the current visualization relies solely on hardcoded SVG attributes.

RRubanda

76% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starter template for D3 version 7, rendering a set of basic SVG shapes—two circles and two rectangles—directly onto a 960x500 canvas. The code imports the `select` function from the D3 library and loads the full D3 bundle from an unpkg CDN. Shapes are drawn statically with standard SVG attributes, with the second pair of shapes colored red, while the stylesheet sets the page body to center-aligned text at a massive 13em font size. No interactive or data-driven behavior is present.

Zzakirkhan11

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, and lines—positioned on a 960×500 canvas. It shows how fill, stroke, stroke-width, and fill-opacity attributes control appearance, with overlapping translucent rectangles creating color blends. The code uses native SVG markup directly embedded in the HTML, without any JavaScript libraries or D3 APIs. A set of navy lines and white circles forms a simple geometric pattern, while the README references “Get it Right in Black & White: Episode 1” as the source video tutorial.

KKai Stewart

76% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter template, rendering a single empty SVG rectangle on an 800x400 canvas. The visualization shows how to set up a basic D3 project with an HTML5 document structure and inline SVG. The code loads D3 version 7.0.4 from the unpkg CDN and uses JavaScript to define a simple graphic element, providing a foundation for building more complex data visualizations with the D3 framework.

Aanoptic

76% match