simon-onebright

@simon-onebright·3 public vizzes

d3

This example demonstrates the basic structure of a VizHub project, showing how D3.js can be imported and used to set the text of an HTML element. It loads D3 version 5 from UNPKG and uses the `select` API to update a message, alongside a local ES6 module for the message string. The visualization itself renders simple SVG shapes—a circle, rectangle, and line—with styling provided in CSS.

Dec 30, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates modular JavaScript development within VizHub, importing and filtering a hardcoded JSON dataset of car objects. It uses D3 v5’s `select` function (though the final message is set via `document.getElementById`) and local ES6 modules like `report.js` and `formartCar.js`. The code filters cars by price, formats each item into a text string, and displays the joined result in the `#message` div, styled with CSS.

Dec 26, 2021

Loading thumbnail…

Fisrt JS program

This example displays a single car brand name, "shangqi," centered on the page. It demonstrates loading D3 v5 via UNPKG, and using ES6 `import` statements for both the D3 library and a local module. The local module, `myMessage.js`, parses a hardcoded JSON array of car objects, and the main script extracts and displays the brand from the first object. The styling is handled with a CSS file that sets large, centered text.

Dec 26, 2021