Skip to main content
SimilarExport ZIP
100%

Chrystler Models Horsepower

✓ Published1🌍 Public
Kkfhujosefsson@dons.usfca.edu
Last edited Jan 31, 2025
Created on Jan 30, 2025

This example visualizes the horsepower of Chrysler car models using a bar chart rendered with p5.js. It loads a CSV file from a GitHub Gist into a table object, filters rows for Chrysler models, and maps their horsepower values to vertical bars. The chart includes grid lines, axis labels, and titles, with bar heights scaled proportionally to the maximum horsepower value. The sketch uses p5.js’s `loadTable` and `createCanvas` APIs to build the interactive visualization.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart with color Legend: Chrysler cars HP

This bar chart displays the horsepower ratings of various Chrysler car models, with each bar’s blue color intensity mapped to its power output and a separate HTML legend showing the color scale. Data is loaded from a CSV file using `d3.csv`, and the chart is rendered as SVG with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color encoding. The `d3-legend` plugin generates the color legend, while axis labels and data labels are added manually.

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

Bar Chart

This bar chart displays the average horsepower of car models grouped by brand, with each brand represented as a vertical bar. It uses D3.js v7 to load a CSV dataset from a GitHub repository via `d3.csv`, aggregate values with `d3.rollup` and `d3.mean`, and render the visualization with `d3.scaleBand` and `d3.scaleLinear` scales. The chart includes rotated axis labels, hover effects that change bar color to orange, and explicit axis titles for Brand and Horsepower.

Nnishanththouta16@gmail.com
76% match
Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower for six German car brands, visually sorted by the highest-performing manufacturers. The visualization uses p5.js, creating a canvas that renders brand labels, a grid with axis lines, and colored rectangular bars drawn with the `rect()` function. Horsepower values are loaded from a CSV file using `loadTable()` and mapped to bar widths, while a rotated text label identifies the dataset. The rendering is static within the `draw()` loop, using grid lines and tick marks to establish the numeric scale.

Ddriftcafe
75% match
Loading thumbnail…

p5.js.boxplot

This p5.js visualization shows a boxplot of car engine horsepower across different models from 2009–2012, using data from the CORGIS cars dataset. The sketch loads a CSV via `loadTable()` in `preload()`, then calculates the minimum, quartiles, median, and maximum values from the horsepower column. It draws tick marks, axis labels, and statistical summary annotations using p5.js canvas API functions like `line()`, `rect()`, and `text()`. The dark background and white strokes highlight the distribution of horsepower in the sample.

EEunice Tu
75% match
Loading thumbnail…

Bar chart

This interactive bar chart displays the horsepower of various car models, with each bar representing a different vehicle from the provided cars.tsv dataset. The visualization uses D3 v6 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the chart as scalable vector graphics (SVG). The horizontal bars are sorted by car name on the y-axis, with a teal fill color, and the chart includes a title and axis labels.

AAndrewTsai0406
75% match
Loading thumbnail…

Bar chart

This bar chart shows the difference in horse power among various cars, with each bar representing a car model. The chart uses SVG rendering and is built with D3 v6, using the `d3.scaleBand` and `d3.scaleLinear` APIs to position and size the bars. The data is loaded from a local source and rendered in a 960 by 480 pixel SVG canvas. The visualization provides a straightforward comparison of car performance metrics.

AAndrewTsai0406
74% match
Loading thumbnail…

Activity6_task2

This visualization shows the distribution of horsepower across ten car models, using a horizontal stacked bar chart where each bar represents a model and segments show the proportion of its power falling into five ranges from below 200 to above 800 horsepower. The chart uses a divergent color scale from green through purple, blue, yellow, and red, with model names on the y-axis and percentage on the x-axis. Built with d3.v7, it employs d3.stack() to create the stacked layout, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the continuous x-axis. Interactive tooltips display the exact percentage for each segment on mouseover, with data sourced from a CSV file containing proportional values that sum to one per car.

Yyadlapallisaisathvik@gmail.com
74% match
Loading thumbnail…

Cars Bar Chart to Scatter Plot

This example visualizes the relationship between horsepower and weight for a dataset of cars, displaying bars for each vehicle where the height corresponds to weight. The chart uses D3 v5 to load the auto-mpg CSV data and renders an SVG with a bar chart, using `scaleBand` for the categorical horsepower axis and `scaleLinear` for the weight axis. The code includes commented-out sections for alternative scatter plot configurations and axis labels, showing how the visualization can be adapted.

MMaria Zgoba
73% match