Brandon Da Silva

@brandinho·8 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository's Auto MPG data set. Red, semi-transparent circles represent individual cars, allowing overlapping points to reveal density. The visualization is rendered as an SVG using D3 v5, with the `scaleLinear` function mapping data values to coordinates, and `axisBottom` and `axisLeft` generating the labeled axes.

Dec 1, 2019

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot visualizes the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. Each circle represents a country, with population on the x-axis and country names ordered on the y-axis using d3.scalePoint. The code builds the chart with d3.csv, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, rendering SVG circles with a fixed radius and formatted tick labels using d3.format.

Dec 1, 2019

Loading thumbnail…

Hello VizHub

This example visualizes the relationship between horsepower and weight for automobiles from the auto-mpg dataset, rendering circles for each car. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom with a custom tick formatter that abbreviates numbers. A scatterplot is drawn within an SVG, with axes, tick lines, and labels styled via CSS. The chart includes a title and axis labels, with circles colored steelblue at half opacity.

Dec 1, 2019

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for ten countries, with bars extending from the left edge and country labels on the y-axis. The example emphasizes customizing axes by styling the bar lengths and band spacing without visible tick marks or labels. It loads data from a CSV file using `d3.csv`, transforms population values by multiplying them by 1000, and renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The chart adapts to the SVG’s width and height attributes.

Dec 1, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations, with population values scaled by 1,000. The visualization customizes D3 v5 axes by formatting tick labels from billions to billions (replacing 'G' with 'B'), removing axis domain lines, and adding styled axis labels and a title. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to render SVG rectangles with a steelblue fill, demonstrating how to tailor axes for improved readability.

Dec 1, 2019

Loading thumbnail…

Cars Report

This example renders the first car in a small static dataset to the page. It displays the make of the first car, “Honda,” as large text in a pre element. The data is defined as a JSON string in `cars.js`, parsed with `JSON.parse`, and imported into `index.js`. The page uses plain JavaScript to update the `textContent` of a selected DOM element by its ID, with no additional visualization libraries.

Nov 28, 2019

Loading thumbnail…

Cars Report

This example displays the make of the first car in a small dataset. The data is embedded in a JSON string in cars.js and parsed into an array of objects. The code uses `document.getElementById` to access a `<pre>` element and sets its `textContent` to a single car make. It demonstrates basic data import and DOM manipulation in a VizHub environment.

Nov 28, 2019

Loading thumbnail…

Cars Report

This example shows a minimal page displaying the text “Hello World” in large type. It reads an inline JSON array containing car records with year, make, model, and price, then parses it with the built-in `JSON.parse`. The page uses `document.getElementById` to select the message element and sets its text content via the `textContent` property. The data is not visualized beyond the static greeting, and no external libraries are loaded.

Nov 28, 2019