Gloal

@Gloal·6 public vizzes

a table chart!

This table chart displays population figures for world regions and subregions, rendered as a static SVG. The data comes from a CSV file, loaded with `csv()`, and the visualization uses D3’s `select` to target the SVG element, setting its width and height from attributes. The code demonstrates basic DOM manipulation and asynchronous data handling, though the actual chart rendering is not visible in the provided snippet.

Aug 9, 2019

Loading thumbnail…

a table chart!

This example visualizes global population data as a table chart, displaying geographic regions and their population counts. It uses D3.js v5’s `select` and `csv` methods to load `pop.csv` and render the data as SVG elements. The chart presents hierarchical regions, from continents to sub-regions, with population values. The primary focus is on demonstrating fundamental DOM manipulation with D3, though the visible code loads data asynchronously and prepares it for binding, with the rendering handled by the accompanying JavaScript bundle.

Aug 8, 2019

Loading thumbnail…

Let's make a face with D3.js!

D3.js builds a simple, interactive SVG smiley face whose eyebrows move. The example demonstrates core DOM manipulation by appending and positioning SVG shapes, including circles, a polygon, and a path. It uses D3's `select`, `attr`, and `append` methods to construct the face, while an `arc` shape generates the mouth. A linked video tutorial accompanies the code. The face is centered using an SVG group with a translate transform, and the styling is defined in a separate CSS file.

Aug 8, 2019

Loading thumbnail…

Cars Report

This example displays a single numeric value, the year of the first car in a hardcoded JSON dataset, on a webpage. It parses an inline JSON array containing car records with fields such as make, model, year, and price using `JSON.parse`. The result is rendered as text into a DOM element via `document.getElementById`, relying on the `textContent` property. The visualization is minimal, showing only the year 2000 in a large, preformatted text block without any charts or graphics.

Jul 28, 2019

Loading thumbnail…

Cars Report

This example presents a static report titled “Cars Report” that displays a car dataset, including year, make, model, and price for five vehicles. The visualization consists solely of a large, preformatted text message (“hcjgufbtrbuby”) rendered in the browser, with no graphical chart or interactive elements. The code imports car data from `cars.js` via a JSON string parsed with `JSON.parse`, then writes the message to the DOM using `document.getElementById` and setting `textContent` on the targeted element. The page outputs the fixed string rather than visualizing the underlying car records.

Jul 28, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to display a simple text message within a web page using D3.js and ES6 modules. It renders the phrase “Hello VizHub!” in large, centered Ubuntu font against a dark blue background, showing the integration of HTML, CSS, and JavaScript. The code imports the `select` function from D3.js and a custom message from a local module, then sets the text content of a `div` element. The styling is defined in an external stylesheet, and the visualization is built for the VizHub platform.

Jul 28, 2019