BrunoPaulo10

@BrunoPaulo10·5 public vizzes

Bubble/Bar Combo viz

Four push buttons switch between quarters in a health dataset for traumatic brain injuries, updating a bubble chart and bar chart side by side. The bubble chart uses `d3.pack` and `d3.hierarchy` to size circles by visit counts for anxiety, neurology, sleep, and headache, while the bars show total TBI visits and symptoms. Buttons call an `update` function that re-binds data and transitions the SVG elements, demonstrating an interactive alternative to a time-series axis.

Nov 11, 2020

Loading thumbnail…

Cars Report

This example displays a plain-text car report generated from an in-code JSON array of five vehicles. It shows a single car entry, specifically the first object, containing the year, make, model, and price, rendered in a large `<pre>` element. The code uses `JSON.parse` to convert the embedded `carsJSON` string into an array, then assigns the first car object directly to the message element via `document.getElementById().textContent`. No D3 or visualization library is used; the output relies solely on DOM manipulation to present the data statically.

Nov 11, 2020

Loading thumbnail…

Cars Report

A D3 version 6 demonstration displays a car report by showing a single car make in large text. The page uses `document.getElementById` and `.textContent` to render the first entry from an embedded JSON dataset, which contains five cars with year, make, model, and price fields. The data is parsed with `JSON.parse` and imported via ES modules, while the HTML includes a `<pre>` element for styling the output. This example focuses on basic data handling and DOM manipulation rather than visualization.

Nov 11, 2020

Loading thumbnail…

Cars Report

This example displays a single car record from a small embedded dataset, showing the year, make, model, and price in a large text element. The code imports a static JSON array of five cars, filters the list to those priced under $2000, and formats each entry into a readable string, but ultimately renders only the first car’s details on the page. It uses the React framework for structure and relies on a simple JavaScript array manipulation with `filter` and `map` to prepare the data, with the result set into the DOM via `document.getElementById().textContent`.

Nov 10, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text "Hello HTML" in large, centered type. It shows how to structure a web page with embedded CSS for styling and JavaScript for interactivity. The CSS sets the body's text alignment and font size, while the JavaScript outputs "Hello JavaScript!" to the browser's console. This starter serves as a bare-bones foundation for web-based visualization projects, highlighting the core building blocks of HTML, CSS, and JavaScript without any external libraries.

Nov 10, 2020