Hello VizHub

100%

✓ Published1🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

This example demonstrates how to import and manipulate JSON data within a D3.js module-based visualization, sorting city populations in ascending order and formatting a text list. It showcases ES6 module imports for local data files and a color array, alongside global D3.js v5 usage. The SVG element is populated via D3, while styles apply the Ubuntu font and large text. The code references `d3.min.js` from unpkg and exports parsed JSON objects like `cities2` and `p`.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates a simple text-based data visualization where city population data is sorted, formatted, and displayed as a list. It uses D3.js and ES6 modules to import and process data from a JSON array. The cities are sorted in ascending order by population using the sort method, then mapped to a readable string format. The formatted output is inserted into a pre element using the DOM API, with styling applied via an Ubuntu font from Google Fonts.

GGlenn Henshaw

89% match

Loading thumbnail…

Hello VizHub

This example displays a formatted list of five US cities sorted by population, rendered as text on a dark background using D3 v5 and custom ES6 modules. It imports and parses JSON data from `cities.js` and `person.js`, sorts the city objects by population with JavaScript’s `sort()` method, and maps them to a readable string using template literals. The page uses the Ubuntu font from Google Fonts, and the text content is injected into a `<pre>` element via `document.getElementById`. The code demonstrates loading data, sorting, and basic DOM manipulation within a VizHub project.

GGlenn Henshaw

88% match

Loading thumbnail…

Hello VizHub

This example demonstrates a simple data-loading workflow using D3.js version 5 and ES6 modules. It displays a static "Hello VizHub!" message styled with a large Ubuntu font on a dark blue background. The code imports the `select` and `csv` functions from D3, then fetches `data.csv` asynchronously and logs the parsed population data to the browser console. No visual representation of the data is rendered—only the message and console output are shown.

Ppin84

80% match

Loading thumbnail…

Hello VizHub

This example displays a dataset of country populations, loading the information from a CSV file using `d3.csv`. The page presents a large, stylized "Hello VizHub!" message in a bold font, centered against a dark blue background with an Ubuntu typeface. The visualization demonstrates basic D3.js v5 data loading and ES6 module usage, though it currently only logs the parsed data to the console. The minimal setup relies on a simple SVG container and a separate JavaScript module that exports the greeting text, showcasing the integration of external stylesheets and modular code structure.

SSanjeet10

80% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization using ES6 modules. It loads D3 v5 from a CDN and uses `select` to target a `div` element, setting its text content to a string imported from a local module. The example shows the basic workflow of importing both external and local JavaScript modules, with styling handled by a separate CSS file that centers the message and sets a large font size.

Jjmanahan12

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

79% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text “Hello VizHub!” in a large, centered Ubuntu font on a dark blue background. It shows how to structure a simple web page using HTML, CSS, and ES6 modules, with D3’s `select` method updating the text content of a designated div element. The page imports D3 from a CDN and uses a local module to export the message string, illustrating basic data-binding and modular code organization within the VizHub framework.

Ssignlog2

79% match

Loading thumbnail…

Hello VizHub!

A simple D3.js visualization displays the text “Hello VizHub!” in large Ubuntu font on a dark background. The page initializes by selecting the `<div id="message">` element and setting its text content from a local ES6 module. The example demonstrates importing D3 functions like `select` and using modular JavaScript organization. Styling comes from an external CSS file that imports the Ubuntu font from Google Fonts. The visualization serves as a minimal template showing how to combine D3 with modular code structure and external resources.

Vveagy

78% match