Strip Chart with Jitter for Assignment 3

100%

Strip Chart with Jitter for Assignment 3

✓ Published0🌍 Public

Last edited Feb 15, 2022

Created on Feb 15, 2022

This strip chart displays average city MPG across five car makes (Audi, BMW, Mercedes, Porsche, Volkswagen) for 2009–2012 models. Each dot represents a vehicle, with horizontal jitter applied to reduce overplotting. The visualization uses p5.js for rendering, loading data from a CSV via `loadTable()`, and drawing points with `point()` and custom axes. Tooltips appear on hover, showing the exact MPG value using `mouseX`/`mouseY` coordinates. Color-coded dots correspond to each make, and gridlines at 5-MPG intervals aid comparison.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

p5.js.Strip Plot with jittering

This p5.js example visualizes highway fuel efficiency for seven car makes, plotting each vehicle’s miles per gallon as a jittered point to reveal data distribution. The sketch loads a pre-cleaned CSV from a GitHub gist using `loadTable`, groups rows by make into a `Map`, and randomizes horizontal offsets via `random()`. Rendering uses Canvas drawing functions like `point()` and `line()` to create a strip chart with labeled axes, color-coded points, and a jitter effect that reduces overlap.

EEunice Tu

83% match

Loading thumbnail…

Histogram for Assignment 3

This visualization displays a histogram of average city miles per gallon (mpg) for various car makes and models from 2009 to 2012, with bar heights representing the count of vehicles at each mpg value. Built with p5.js, the sketch loads a CSV file containing mpg and count data, then renders the bars using the `rect()` function, scaling values via a custom `scale()` helper. The code draws grid lines, axis labels, and annotated data values directly on the canvas, with a title and rotated y-axis label for clarity.

Vvishusikka

79% match

Loading thumbnail…

Stripe Chart

This stripe chart displays the miles per gallon (mpg) for individual car models across five automobile brands, with each point jittered horizontally within its category to reveal distribution. The visualization uses d3.csv to load the data, then builds an SVG with axis scales via d3.scaleLinear and d3.scaleBand. Points are colored using a sequential d3.scaleSequential with the Inferno interpolator. Interactive hover tooltips appear through d3 mouse events, while the Y-axis domain is manually fixed to highlight variations in fuel efficiency.

Pprateekvasi

77% match

Loading thumbnail…

Stripe Chart New

This stripe chart shows the relationship between torque and miles per gallon (mpg) for car makes including Audi, BMW, Mercedes, Porsche, and Volkswagen. Each data point is plotted as a circle, with torque on the x-axis and mpg on the y-axis. Colors encode the car manufacturer, and a legend identifies the make. The visualization is built with d3.v4, using SVG rendering, and includes a tooltip that displays the mpg value on hover. The data is loaded from a local CSV file, and the chart uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.axisBottom and d3.axisLeft for tick marks.

Pprateekvasi

76% match

Loading thumbnail…

Box Plot - hover test

This box plot shows the distribution of fuel efficiency (mpg) for five car makes, with individual model data points overlaid on each box. The chart uses a D3.js v4 SVG renderer with `d3.csv` to load data, `d3.nest()` to compute quartiles and medians per make, and `d3.scaleBand` with `d3.scaleLinear` for the axes. Jittered circles display each vehicle, while a tooltip div is appended but remains non-functional.

Ddriftcafe

75% match

Loading thumbnail…

D3 Boxplot with Jitter for Assignment 4

This D3.js v4 visualization presents a boxplot of BMW model fuel efficiency (mpg) across model years 2009–2012, sourced from boxplot.csv. It summarizes the distribution per model using d3.nest() to compute quartiles and the interquartile range, which are drawn as a box-and-whisker plot via SVG shapes. Individual data points are overlaid as red circles with a fixed x-offset, and hover interactions (configured via d3.select and tooltip transitions) reveal exact mpg values. The chart uses d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric axis, and d3.axisBottom/Left for tick marks.

Vvishusikka

75% match

Loading thumbnail…

P5js Dotplot

This dot plot compares the average horsepower of top German car brands, showing values like Porsche’s 512.5 and Volkswagen’s 192.5. The p5.js sketch renders steel-blue circles for each brand’s data point on a grey grid with labeled axes. It loads the CSV dataset via `loadTable`, then uses `circle` and `text` to draw the visualization, with rotated labels for the y-axis title.

Vvishusikka

74% match

Loading thumbnail…

Assignment 5 - Scatterplot matrix

This visualization combines a scatterplot matrix of car attributes with a bubble chart comparing average horsepower, torque, and highway MPG by brand. The matrix displays pairwise relationships among six numeric variables, with each point colored by car make using `d3.scaleOrdinal` and `d3.interpolateTurbo`. The bubble chart encodes highway MPG through circle radius via `d3.scaleLinear`, with a tooltip implemented using D3’s event handlers. Both views use `d3.csv` to load data and D3 v7 to render SVG elements.

Vvishusikka

73% match