Hello VizHub

100%

✓ Published1🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

78% match

Loading thumbnail…

Hello VizHub

This example displays the text "Hello VizHub!" in a large, light-colored Ubuntu font against a dark background. It uses D3.js v5, specifically the `select` function, to target a div element and update its text content with a message imported from a separate ES6 module. The page structure is defined in HTML, with styling handled by CSS. The visualization demonstates basic DOM manipulation and modular JavaScript organization within the D3 framework.

KKuerzibe

78% match