emmaoudmaijer (@emmaoudmaijer), VizHub

Hello VizHub

This example demonstrates text manipulation and sorting of survey responses using D3 v5 and ES6 modules. It imports D3’s `select` function to set the text of a `#message` div, while also processing a hardcoded string of job descriptions into a cleaned, alphabetically sorted array. The code applies a custom `filterTypos` function to normalize typos and variants, then logs the original and cleaned lists to the console. The page uses CSS for styling and a simple DOM update to display the greeting.

Nov 14, 2019

Loading thumbnail…

HTML Starter

This example presents a static bar chart built with D3.js, displaying a hardcoded array of twelve numeric values. The SVG output renders green bars on a light background, with each bar’s height directly proportional to its data value. The code uses D3’s selection API and `selectAll` with chained `attr` methods to position bars, explicitly setting the SVG dimensions, bar width, and vertical offset. The data is a simple local JavaScript array, not fetched from an external source.

Nov 14, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup by displaying the text “Hello VizHub!” on a styled web page. It uses `d3.select` to target the `#message` div and set its content from an ES6 module export. The page loads D3 v5 from a CDN, applies a dark blue background with Ubuntu font via CSS, and centers the large text. The code separates logic into `index.js` and `myMessage.js`, showing modular JavaScript alongside a simple HTML structure.

Nov 14, 2019

Loading thumbnail…

HTML Starter

This example presents a static bar chart built with D3.js, displaying a hardcoded array of twelve numeric values. The SVG output renders green bars on a light background, with each bar’s height directly proportional to its data value. The code uses D3’s selection API and `selectAll` with chained `attr` methods to position bars, explicitly setting the SVG dimensions, bar width, and vertical offset. The data is a simple local JavaScript array, not fetched from an external source.

Nov 14, 2019