Skip to main content
SimilarExport ZIP
100%

Assignment #2 Visualizing Amounts with P5

✓ Published0🌍 Public
Mmhzahdeh@dons.usfca.edu
Last edited Feb 20, 2025
Created on Feb 3, 2025

This example visualizes fuel economy (mpg) for eight car models using a static bar chart, with the title "Economy mpg by Car Type" and a CSV data source. The chart renders bars in steelblue, with axis labels and tick marks styled via CSS classes. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.axisBottom and d3.axisLeft to draw the axes. The SVG output is created within a fixed 1500x500 container with margins, and bars are drawn as rect elements with heights proportional to the mpg values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment #6: Bar Chart with Color Legend

This example shows a bar chart of economy (MPG) values for eight car models, with car names on the x-axis and MPG on the y-axis. The chart is rendered as an SVG using D3 v7, loading data from a CSV file via `d3.csv`. Bars are drawn with `rect` elements, positioned using `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes created via `d3.axisBottom` and `d3.axisLeft`.

Mmhzahdeh@dons.usfca.edu
85% match
Loading thumbnail…

Assignment #5 Bubble Chart

This bubble chart compares fuel economy (mpg) against the number of cylinders for eight car models from a CSV file, with each car positioned along the x-axis and its economy value plotted on the y-axis. The visualization uses D3 v7's `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` to render axes. Instead of traditional bars, it draws a line path using `d3.line`, mapping car names to x-coordinates and economy values to y-coordinates, with the y-axis explicitly sized to cylinder counts via a second linear scale. The SVG output is styled with steelblue strokes, and the chart title is displayed above the plotting area.

Mmhzahdeh@dons.usfca.edu
84% match
Loading thumbnail…

Cars

This example visualizes fuel economy data from a CSV file of cars, showing each vehicle’s miles-per-gallon rating as a horizontal bar sorted by row order. The bars, drawn in yellow on a gray background, increase in length proportionally to the fuel efficiency value. The code loads the dataset using p5.js’s `loadTable` with a header row, retrieves the numeric `economy (mpg)` column, and renders the rectangles in the `draw` loop. The visualization uses the p5 canvas API with `createCanvas`, `rect`, and `fill`.

Kkmduncan2@dons.usfca.edu
83% match
Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes fuel economy (mpg) for a small set of cars, with each car represented as a horizontal bar sorted by its name, using p5.js. The sketch loads a CSV dataset of car specifications from a GitHub gist via the `loadTable()` function, then maps the economy values to bar widths on a custom-drawn axis. The chart uses `createCanvas()` and `map()` to scale the data, and truncates long car names to keep the display legible.

Hhxu51@usfca.edu
82% match
Loading thumbnail…

Lab2 Bar Chart

This bar chart visualizes fuel efficiency data from the mtcars dataset, plotting miles per gallon (mpg) for each car model. The p5.js sketch loads a CSV file from a GitHub gist using `loadTable`, then renders horizontal bars with `rect` on an 800x800 canvas. Each bar’s length is proportional to the mpg value, with car model names displayed as text labels. The visualization uses a fixed loop to draw all 32 rows, showing the relationship between car models and their fuel economy ratings.

PPatrick
82% match
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart visualizes the fuel efficiency of various car models, ranking them by their miles per gallon (MPG) value. The data is sourced from a CSV file and loaded using D3's `csv` function, with MPG values scaled down for display. The visualization is built with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are rendered as SVG rectangles, with axes added via `axisLeft` and `axisBottom`, and the chart is styled with a steelblue fill for the bars.

Ssrrajendran
82% match
Loading thumbnail…

Asssssignment

This visualization shows the fuel efficiency (mpg) of 20 car models, with horizontal bars representing each car's miles per gallon alongside their make. The chart uses blue tick lines and light green bars against a clean white background, with a labeled x-axis for population-2020 values. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements through custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate the ticks and rectangles. Data is loaded from a CSV file via D3's `csv` function.

HHemanthh81
82% match
Loading thumbnail…

Bar Chart of P5 CSV Loader in CS 360

This example displays a horizontal bar chart of fuel economy (mpg) for a list of car models, sorted by name. It loads the data from a remote CSV file using p5.js’s `loadTable()` in the `preload()` function, then parses the columns into arrays. The sketch draws axes, gridlines, and bars with `rect()` in `drawHorizontalBarChart()`, mapping economy values to bar lengths with `map()` and labeling each bar with truncated car names.

Hhxu51@usfca.edu
81% match