Skip to main content
SimilarExport ZIP
100%

Chris Test

✓ Published0🌍 Public
Ccwrobert1968
Last edited Nov 26, 2019
Created on Nov 25, 2019
Forked from Hello VizHub

This example displays a simple SVG scene with a large red circle and a white rectangle positioned over a dark background, styled with the Ubuntu font. The page loads CSV data containing widget and reporting metrics, though the visualization does not currently render any of that data. Built with D3 v5, the code uses `select`, `selectAll`, `style`, `attr`, and `csv` imports to manipulate the SVG elements. The static composition serves as a baseline template for future chart development.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 charte test

This example displays a blank red SVG canvas and loads a small CSV dataset containing titles and numeric values. The page establishes an SVG element with fixed dimensions and applies a background color via the `style` attribute. Using D3 v5, the code selects the SVG element with `d3.select`, reads the CSV file with `d3.csv`, and logs the parsed data to the browser console. The visualization itself does not render any marks or charts; it only demonstrates the initial setup for data loading and SVG manipulation.

RRicardFabien
81% match
Loading thumbnail…

Test svg

The visualization is a simple test of SVG rendering with D3.js. It displays an empty, full-width SVG canvas with a red background applied via the `d3.select` API. The code uses D3 v5 to select the SVG element and set its background color, while CSS styles the page layout with hidden overflow and a large font size. The example demonstrates a minimal D3 setup, showing how to manipulate SVG elements and apply styling, with the source data being an empty SVG element within the HTML file.

EErik Rudhe
77% match
Loading thumbnail…

SVG Example

This example shows a static, untitled SVG scene featuring a single large red circle rendered on a 960 by 500 canvas. The visualization uses D3 version 5’s `select` and `append` APIs to create the circle, setting its radius and fill color through the `attr` method. The drawing is performed with standard SVG elements within an inline `<svg>` tag, with the D3 script embedded directly inside the SVG markup. No external data or interactive behavior is present.

TThomas Nield
77% match
Loading thumbnail…

d3 intro

A D3.js example renders an SVG scene of a large yellow circle, flanked by two smaller outlined circles, against a brown background. The visualization demonstrates basic SVG shape construction and styling through the D3 API, using methods like `append`, `attr`, and `style` to set geometry, fill, stroke, and layout properties. It reads width and height attributes from the SVG element and positions shapes relative to those dimensions. The page loads D3 from UNPKG and imports `select` and `csv` from the local script. A static CSV data file is present but not used in the displayed scene.

RRITUZZ
76% match
Loading thumbnail…

SVG Starter

This example displays a single red circle rendered inside an SVG canvas. It serves as a minimal setup for SVG-based visualization, showing how a static shape can be styled directly using D3. The code uses D3 v5's selection and styling API (`d3.select` and `.style`) to apply the fill color, while the circle itself is defined in plain SVG markup within the `index.html` file. The page also imports a separate stylesheet for global typography and layout.

AAndrew Smith
76% match
Loading thumbnail…

D3 test

This example renders an empty SVG canvas with a width of 900 pixels and a height of 500 pixels. The code selects the SVG element using D3’s `select` method and retrieves its dimensions. While the JavaScript imports `csv` from D3, no data is loaded or visualized, and the SVG remains blank. The example demonstrates a minimal setup using D3 v5 within a React framework, with no visible visual output or interaction.

LLeyou Hong
76% match
Loading thumbnail…

Teste

This example demonstrates a static chart composed of basic SVG geometric shapes—two red and purple circles, a blue-outlined square, and a diagonal line—set against a black border framing the full 1920×1080 canvas. The React-based rendering uses inline SVG elements directly in the HTML, with no dynamic data or interaction. A separate `index.jsx` file imports React and D3’s `select` API, but the visible output does not use them, showing only a raw SVG composition. The chart highlights primitive shape attributes like fill, stroke, and stroke-width without encoding a dataset.

Nnunosilvasemedo@gmail.com
76% 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
76% match