Vinh Nguyen

@davinhster·3 public vizzes

Bars

A bar chart shows the populations of ten countries, with the US at roughly 327 million and China leading at over 1.4 billion. The visualization loads data from a CSV file using the `csv` function from D3 v5 and parses the population values as numeric types to prepare them for rendering. The chart is drawn as an SVG element whose width and height are retrieved via the `attr` method, and the code sets up the data pipeline but does not yet generate the bars. The example runs in a React starter environment, with the SVG markup provided in the HTML file.

Jun 8, 2020

Loading thumbnail…

HMTL Cars Report

This example presents a static HTML report titled “Cars Report,” which displays a bulleted list of vehicles and their prices. The page uses plain HTML markup with a linked stylesheet, `styles.css`, to apply visual styling. The CSS sets a light grey background, blue text, and a large font size, while the highlighted class colors a single list item red. No JavaScript or external charting libraries appear; the visualization relies entirely on static markup and CSS for its presentation. The data shown is hardcoded directly within the HTML structure.

Jun 3, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data report where a hardcoded JSON array of car objects is fetched and filtered to display only vehicles under a price threshold. It shows how JavaScript modules, Promises, and array methods like `filter`, `map`, and `join` can generate a text-based report. The UI uses React 16.10 and ReactDOM to render the page, while the report content is updated directly via the DOM API `document.getElementById` and `textContent`.

Jun 3, 2020