Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published1🌍 Public
GGlenn Henshaw
Last edited Sep 26, 2019
Created on Sep 26, 2019
Forked from 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.

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
92% match
Loading thumbnail…

Hello VizHub

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`.

GGlenn Henshaw
88% match
Loading thumbnail…

Hello VizHub

This example displays a static title, "Hello VizHub!", on a dark blue background using the Ubuntu font. The visualization loads population data for ten countries from a CSV file, though the data is only fetched and logged to the console. The implementation uses D3 v5’s `select`, `csv`, and SVG selection methods, with a separate ES6 module exporting the message string. The page structure and styling are defined in HTML and CSS, while the JavaScript applies the text and handles the asynchronous data loading.

Bbobi0017
79% 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
79% 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
78% match
Loading thumbnail…

Hello VizHub

This example uses D3 v5 to display the text “Hello VizHub!” in the center of a dark blue page with large, light-colored Ubuntu font. The code imports the `select` function from D3 and an ES6 module from a local file to set the message content. The page structure is defined in HTML, with styling provided by CSS that imports the Ubuntu typeface from Google Fonts. The visualization demonstrates basic D3 DOM manipulation and module-based code organization within a VizHub project.

Ggfesquivelt
77% match
Loading thumbnail…

Hello VizHub

This example uses D3 v5 to display the text “Hello VizHub!” in the center of a dark blue page with large, light-colored Ubuntu font. The code imports the `select` function from D3 and an ES6 module from a local file to set the message content. The page structure is defined in HTML, with styling provided by CSS that imports the Ubuntu typeface from Google Fonts. The visualization demonstrates basic D3 DOM manipulation and module-based code organization within a VizHub project.

Ggfesquivelt
77% 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
77% match