WMLek

@WMLek·3 public vizzes

Cars Report

This example displays a text-based report of cars under a specified price, formatted as a list. It shows data for four vehicles, filtering from a static JSON array and outputting each car's year, make, model, and price. The application uses JavaScript’s native `filter`, `map`, and `join` methods on arrays, with custom formatting and report generation functions. The report renders into an HTML `pre` element via `document.getElementById` and textContent, all within a React-based setup using the VizHub framework.

Mar 23, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates the simplest possible integration of D3.js with the VizHub platform. It renders a single text message in the center of the page using the D3 `select` function to set the content of a `div` element. The code imports local ES6 modules, showing how user-defined JavaScript files can be included alongside standard D3 tools. D3 v5 is loaded via CDN, and styling comes from a separate CSS file. The visualization’s purpose is purely instructional, highlighting module imports and D3’s DOM manipulation capabilities.

Mar 23, 2020

Loading thumbnail…

Cars Report

This example demonstrates a plain-text report generator that filters a small inline dataset of cars by price and formats the results into a readable list. The interface is a single `<pre>` element with large styled text, populated by writing the generated report’s string content into the DOM via `document.getElementById().textContent`. The code uses ES6 modules to separate data parsing with `JSON.parse`, a `formatCar` helper for string templating, and a `generateReport` function that chains `filter` and `map` before joining lines. No external libraries are used, relying only on core JavaScript and HTML.

Mar 6, 2020