Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
NNarong
Last edited Nov 21, 2019
Created on Nov 21, 2019
Forked from Hello VizHub

This example displays a simple bar chart of four numeric values rendered as SVG rectangles with red value labels. The visualization demonstrates basic D3 data joins using `selectAll`, `data`, and `enter` to bind an array of numbers to shapes. It also illustrates the use of ES6 modules through an imported `message` constant that sets the page heading, while the chart itself uses D3’s selection and attribute methods to position and size elements dynamically. The styling comes from the included CSS file with the Ubuntu font.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example renders a simple red SVG canvas populated with an array of five numbers in an empty group elements layout. It demonstrates basic D3.js data binding through the `selectAll` and `enter` selection pattern, using `d3.select` to append an SVG container and append group elements. The visualization serves as a minimal starter template for D3 v5 projects, with static styling controlled by an external stylesheet and ES6 module structure.

3343251455@qq.com
82% match
Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

FFloridaPlates
81% match
Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

FFloridaPlates
81% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a foundational D3.js bar chart using a hardcoded array of five values. It builds vertical bars by binding the dataset to `div` elements and setting each bar’s height dynamically with a custom scale factor. The code imports the `select` function from D3 via ES6 modules and uses `d3.select`, `.data`, `.enter`, and `.style` to create the visualization. A separate local module exports a text message, while the HTML file includes D3 v5 from UNPKG.

CCrystal Lee
81% match
Loading thumbnail…

Simple bar chart

This example shows a simple bar chart of eight numeric values rendered as SVG rectangles, with each value labeled directly above its bar. The chart uses D3.js version 5’s data join pattern (`selectAll`, `data`, `enter`, `append`) to create `rect` elements from a hardcoded array. Bar heights encode the data values, and text labels are added using the same data join. The SVG canvas has fixed dimensions of 500 by 300 pixels, with bars spaced by a constant padding.

HHuan Tran
81% match
Loading thumbnail…

test svg basic

This example shows a basic bar chart built with D3.js, displaying three data values (5, 10, and 12) as orange rectangles with white numeric labels. The visualization uses the D3 selection and data join pattern, appending SVG groups that are translated vertically for each bar. Rectangles are sized using a scale factor of 60 pixels per unit, while text elements position labels at the end of each bar. The code loads D3 v6 and demonstrates fundamental SVG rendering with `d3.select` and `d3.append`.

Ssgzzhinde
80% match
Loading thumbnail…

Hello VizHub

This example demonstrates a simple line chart rendered as an SVG path, using D3.js v5 to map a small dataset of three coordinate pairs. The visualization focuses on the basic pipeline of D3's `line` generator and `select` API to draw the polyline directly onto a dark, styled background. Data is hardcoded in the JavaScript source, with the SVG output embedded in the page and the D3 library loaded from a CDN. The sketch exemplifies minimal setup for generating vector graphics with D3.

NNarong
80% match
Loading thumbnail…

Hello VizHub

This example displays a horizontal bar chart ranking countries by population, with bars rendered as SVG rectangles and axes labeled using d3.axisBottom and d3.axisLeft. The data is loaded from a CSV file via d3.csv, and populations are formatted with d3.format to convert raw numbers into abbreviated strings like “B” for billions. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with margins and tick marks styled via CSS. It demonstrates VizHub’s workflow of combining D3 v5 with ES6 modules.

Vvkanotra
80% match