Steve-Vail

@Steve-Vail·3 public vizzes

Cars Report

This example generates a text-based report of used cars from a hardcoded JSON dataset. It filters the car list by a maximum price and formats each matching vehicle into a readable string. The visualization uses the `generateReport` function with array methods like `filter`, `map`, and `join` to produce a plain-text output. The car data is parsed from a JSON string using `JSON.parse`, and the final report is displayed in an HTML `<pre>` element. The page uses a simple DOM selection with `document.getElementById` to update the message content.

Jul 18, 2019

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple HTML and CSS-based car pricing report, presenting three vehicles with their model years and costs in a bulleted list. The data is hardcoded in the page markup, with the 2012 Nissan Leaf highlighted in red via a CSS class. The page uses standard HTML elements like `h1` and `ul`, along with a linked external stylesheet that defines a large monospace font and the `.highlighted` rule. No JavaScript or external visualization libraries are involved.

Jul 18, 2019

Loading thumbnail…

Customizing Axes

This visualization displays the top 10 most populous countries in 2018 using a vertical bar chart with customized axes. The chart uses `d3.csv` to load population data from a local file, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis. Axis customization includes tick formatting with `d3.format` (converting values to billions), removal of default axis lines, and styled tick marks. The SVG rendering is built with D3 v5, and the data originally comes from the United Nations World Population Prospects 2017.

Jul 16, 2019