Skip to main content
SimilarExport ZIP
100%

Viz Test

✓ Published0🌍 Public
RRan Guin
Last edited Nov 28, 2020
Created on Nov 28, 2020
Forked from HTML Starter

This example renders a static SVG visualization of a blue circle centered on a 600x400 canvas, with a hardcoded dataset of five countries and their GDP values prepared for display using D3’s `scaleOrdinal` and `schemeDark2` color scale. The code uses `d3.select` to append the circle and defines the data array, though no bar chart or other shapes are actually drawn from the dataset. The page loads D3 v6 via a CDN, and the SVG is styled with basic attributes like `stroke` and `fill`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

A single large circle floats against a steel-blue field, its radius fixed at 100 units. The visualization loads country population data from a CSV, though the visible output shows no bars or axes. The code imports D3 v5 utilities like `select`, `csv`, and `scaleLinear`, but only renders the circle via a direct SVG attribute selection. The page structure uses a plain `div` in the HTML, with styling applied through an external stylesheet.

MMrG113
80% match
Loading thumbnail…

Test Viz

This example displays a static composition of basic SVG shapes on a 960 by 500 canvas, including two colored circles, a yellow border rectangle, two diagonal navy lines, and a black polyline path. The SVG markup is embedded directly in the HTML page alongside CSS styling. The rendering relies on raw SVG elements such as `circle`, `rect`, `line`, and `path`, without using any JavaScript libraries or data sources. The presentation is purely declarative, demonstrating how each shape’s geometry and stroke attributes are defined inline.

Ggutkem
80% match
Loading thumbnail…

Hello VizHub

This example renders a static SVG canvas containing basic geometric shapes—a red circle with a blue outline and a red square with an orange outline—alongside a grouped set of shapes transformed via the SVG `translate` attribute. The code uses D3.js v5, loaded from a CDN, and demonstrates direct SVG element construction within an HTML file. Styling is handled through an external CSS file that imports the Ubuntu font and sets a dark background. The visualization does not rely on data binding or interactive features, focusing instead on primitive shape composition and graphical styling.

Aasimplesinger
78% match
Loading thumbnail…

Hello VizHub

A minimal D3.js example demonstrates how to render a single purple circle into an SVG canvas using d3.select and append operations. The page loads D3 v5 from a CDN, imports a local ES6 module for a message, and displays a static 50x50 pixel circle with a 25 pixel radius centered in the viewport. The visualization shows basic DOM manipulation and SVG element creation without data binding or interaction.

NNolin29
78% match
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
77% match
Loading thumbnail…

Hello VizHub!

This example displays a single blue circle centered on an SVG canvas, demonstrating the basic workflow of creating and positioning shapes with D3. The code imports the `select` function from D3 v5, appends a `circle` element to the SVG, and sets its radius and center coordinates using the `attr` method. The SVG is sized at 960 by 500, matching the viewport dimensions used for the circle's position. The visualization serves as a minimal, foundational template for D3-based projects, with styling defined in a separate CSS file that imports the Ubuntu font.

Aabreudude
77% match
Loading thumbnail…

Hello VizHub

This example shows a minimal SVG canvas with a single gray circle positioned at coordinates (100, 100) and a radius of 100, alongside a text string exported from a separate ES6 module. The visualization uses the D3.js v5 library’s `select` and `append` methods to create the circle, while the message variable is defined but never rendered. The HTML page loads D3 from a CDN, applies a global Ubuntu font via CSS, and runs the bundled JavaScript.

Ttshrsrvstv
77% match
Loading thumbnail…

Hello VizHub

This example renders a blank SVG canvas with a steelblue circle, though no data is bound to it. The code demonstrates state management via a custom `setState` function and logs a merged object to the console. It loads D3 v5 from a CDN and includes CSS styling for axes and text, but does not create any visual elements beyond the styled circle. The SVG dimensions are set to 960 by 400 pixels.

SShane Carey
77% match