Hello VizHub

100%

✓ Published0🌍 Public

Last edited Mar 14, 2021

Created on Dec 19, 2020

This example displays a horizontal bar chart of financial data for major companies, including market capitalization values from the `rtData` array. The chart uses D3 v6 scales (`d3.scaleLinear`) and color interpolation to map values from orange to red. It demonstrates ES6 module imports, local module usage with `myMessage.js`, and DOM manipulation via `d3.create` and `svg.selectAll().join()`. The visualization also includes axis generation with `d3.axisBottom` and text labels showing company names.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

NNarong

79% 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

78% match

Loading thumbnail…

Hello VizHub

This bar chart displays monthly quantities from a CSV file hosted on VizHub, rendered as an SVG using D3.js v5. The code loads the data with `d3.csv`, processes the numeric values, and draws the axes with `d3.axisBottom` and `d3.axisLeft`. Bars are created via `d3.scaleBand` and `d3.scaleLinear` mappings, with rotated x-axis labels for readability. The visualization, styled by an external CSS file, appears on a dark background within a framed container.

Mmwisniewski1991

76% 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

76% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to create a simple text-based visualization using D3.js v5 and ES6 modules within the VizHub environment. It renders the message “Hello VizHub!” in large, centered Ubuntu font on a dark blue background by leveraging D3’s `select` function to set the text content of a `#message` div. The page imports a local ES6 module for the message string and applies styling from an external stylesheet with CSS variables. The visualization updates the DOM directly without data binding or scales, serving as a minimal foundation for exploring interactive charts.

KKwadwo 'Que' Amankwa

76% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates D3.js version 5 charting within a minimal VizHub template, rendering a time-series line chart of stock data loaded via CSV. It shows the construction of an SVG visualization with time-scaled x-axis and linear y-axis, using `d3.svg.axis` for tick marks and `d3.svg.line` for the data path. The code imports D3 functions via UNPKG and local ES6 modules, with the chart styled through inline CSS. The data is parsed with `d3.time.format` and scaled with `d3.time.scale` and `d3.scale.linear`.

Hh-siraj

76% match

Loading thumbnail…

Hello VizHub

This example displays a horizontal dot plot of population estimates for ten countries, drawn as circles positioned along a linear scale. It uses D3 v5 with SVG rendering, loading data from a CSV file and applying `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The code imports `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 to generate axes and bind data to circle elements. A custom ES6 module, `myMessage.js`, is included but unused in the visualization.

Ssanthosh pendyala

76% match

Loading thumbnail…

Hello VizHub!

A simple D3.js example displays the text “Hello VizHub!” in large, centered Ubuntu font on a dark background. The visualization uses the `select` function from the D3 library to target a `div` element with the id `message` and set its text content. The message is imported from a separate ES6 module, demonstrating modular code organization. Styling is handled entirely through CSS, with no data or chart elements involved.

Jjmeroth

76% match