vsapro

@vsapro·6 public vizzes

Cars Scatterplot

This scatterplot displays the relationship between vehicle weight and horsepower for a dataset of cars. Each circle represents a car, with its position determined by these two measurements using D3’s `scaleLinear` and `extent` functions. The axes are customized with tick labels formatted via `format`, and the plot includes axis titles and a main title. Data is loaded from a CSV file using `csv`, and the visualization is rendered as SVG elements. The styling uses semi-transparent steelblue circles, while axis labels and ticks are sized and colored through CSS.

Mar 22, 2023

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the ten most populous countries, using data from the 2017 United Nations World Population Prospects. The visualization features refined axis customization, including abbreviated population labels that convert "G" to "B" and a clean layout with a labeled x-axis. It filters the data from a CSV file and renders circles positioned with D3’s scaleLinear and scalePoint. Axes are generated using axisLeft and axisBottom with custom tick formatting and tick sizes, demonstrating flexible axis styling within an SVG.

Mar 22, 2023

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a sample of cars, sourced from the UCI Machine Learning Repository's Auto MPG dataset. The visualization uses D3.js v5 to render an SVG graphic with scaled axes and semi-transparent red circles. The code leverages D3 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to construct the chart. Axes are labeled, and axis lines are removed from the grid, which uses tick marks and labels to display the data distribution.

Mar 22, 2023

Loading thumbnail…

Making a Bar Chart!

This example displays a horizontal bar chart of country populations, with values read from a CSV file and scaled by 1,000. Using D3 v5, it employs `d3.csv` to load the data, `scaleLinear` and `scaleBand` to map population and country names to positions, and `axisLeft` and `axisBottom` to render axes. Rectangles are appended to an SVG group with margins, sized by the scales, and styled with a steelblue fill.

Mar 17, 2023

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple JavaScript data report that filters a list of cars based on a maximum price and formats the results as readable text. The visualization shows the output in a large HTML `<pre>` element, populated by JavaScript code. It uses the `cars` array defined in `cars.js`, the `formatCar` function from `formatCar.js`, and the `generateReport` function in `generateReport.js` to process the data. The initial display, however, only shows the make of the first car via `index.js`, using the DOM property `textContent` to update the message element.

Mar 16, 2023

Loading thumbnail…

Fork of Cars Report

This fork of the Cars Report demonstrates a simple, modular JavaScript application that updates a large text element on the page. It shows how to structure code using objects and arrays, with the message “My Text” rendered at a large font size. The visualization uses the browser’s DOM API via `document.getElementById` to target the `#message-element` and update its text content. The code is bundled with Rollup, as indicated by the `bundle.js` script reference, and pulls data from a static array defined in the source.

Mar 16, 2023