Stripe Chart

100%

✓ Published3🌍 Public

Last edited Feb 22, 2022

Created on Feb 16, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

84% 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

78% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between vehicle model year and fuel efficiency (MPG), with each circle representing a car. The visualization uses D3 v5 to load data from a CSV via `d3.csv`, then applies linear scales (`scaleLinear`) and axes (`axisBottom`, `axisLeft`) to map the values. Gridlines are rendered through tick sizing, and the SVG circles are positioned using the scaled coordinates. The chart includes labeled axes and a centered title, with styling applied via CSS.

Rreubengann

77% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The chart uses d3.scaleLinear to map data values to pixel coordinates, d3.axisBottom and d3.axisLeft to render labeled axes with gridlines, and SVG circles for marks. Data is loaded via d3.csv, with circles and labels appended through D3 selections, while axis tick styling is handled in the linked stylesheet.

ZZY Huang

77% match

Loading thumbnail…

Cars Scatter Plot

This D3.js v5 scatter plot visualizes fuel efficiency data from the cars2017_new.csv dataset, plotting each car model's average city MPG as a horizontal bar. The y-axis displays car makes using a band scale, while the x-axis represents city MPG values with a linear scale. Built with SVG rendering, the visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `scale.category20` APIs. The code reads the CSV file, converts numeric fields, and appends styled rectangles to the SVG canvas to represent each data point.

SSushanta77

77% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between engine cylinders and miles per gallon (mpg) for various automobile models, sourced from an auto-mpg CSV dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with circles rendered via SVG. The chart includes custom axis tick formatting (e.g., abbreviating large numbers) and styling through CSS, demonstrating how to adapt D3’s default axes for a polished presentation.

ZZhengyan Yu

77% match

Loading thumbnail…

Cars Scatter Plot

This example visualizes the relationship between miles per gallon and horsepower for a dataset of cars from the auto-mpg CSV. Each car is represented as a steel-blue circle with a black stroke, positioned using d3.scaleLinear with d3.extent to map data domains to screen coordinates. The code renders SVG elements and includes customizable axes with tick lines and titles, built using d3.axisLeft and d3.axisBottom. The data is loaded asynchronously via d3.csv, with numeric fields coerced to numbers before rendering.

Bbenholvey

77% match

Loading thumbnail…

Strip Chart with Jitter for Assignment 3

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.

Vvishusikka

77% match