Skip to main content
SimilarExport ZIP
100%

Fork of Stripe Chart

✓ Published0🌍 Public
NNita
Last edited Jul 22, 2025
Created on Jul 22, 2025
Forked from Stripe Chart

A forked strip chart uses D3.js v7 to visualize car MPG distributions by manufacturer, encoding each vehicle as a color-coded dot (viridis scale) with vertical jitter for overlap reduction. Built with the D3 v7 API and SVG, it includes a jitter-control slider, transitions for point repositioning, and tooltips showing make, MPG, and torque. The chart reads from an inline CSV and updates interactively.

AI-generated description

Car MPG Strip Chart

An interactive D3.js visualization showing the distribution of miles per gallon (MPG) across different car manufacturers.

Features

  • Interactive Strip Chart: Displays MPG values for different car makes with jittered positioning to avoid overlap
  • Color Coding: Points are colored based on MPG values using a viridis color scale
  • Tooltips: Hover over data points to see detailed information including make, MPG, and torque
  • Jitter Control: Adjust the amount of horizontal jitter using the interactive slider
  • Responsive Design: Clean, modern styling with proper axis labels and formatting

Technologies Used

  • D3.js v7
  • HTML5/CSS3
  • Modern JavaScript (ES6+)

File Structure

  • index.html - Main HTML structure
  • styles.css - Styling and layout
  • chart.js - Reusable chart component
  • main.js - Application logic and initialization
  • stripechart.csv - Data source

Data Format

The CSV file should contain the following columns:

  • Make - Car manufacturer name
  • Torque - Engine torque value
  • mpg - Miles per gallon rating

Usage

  1. Open index.html in a modern web browser
  2. The chart will automatically load and display the data
  3. Use the jitter slider to adjust point positioning
  4. Hover over points to see detailed information

Improvements Made

  • Upgraded to D3.js v7
  • Modular, reusable chart component
  • Proper data joins for smooth animations
  • Interactive controls
  • Better styling and typography
  • Responsive design
  • Error handling
  • Comprehensive tooltips
  • Smooth transitions and animations
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stripe Chart

This interactive D3.js v7 strip chart shows the distribution of fuel efficiency (MPG) across car manufacturers, with each point colored by its MPG value and red lines marking the mean for each brand. A jitter slider adjusts horizontal point spread to reduce overplotting, while hover tooltips reveal manufacturer, MPG, and torque data. The chart uses d3.scaleBand, d3.scaleLinear, and d3.scaleSequential with viridis interpolation, and applies animated transitions for point entry, updates, and exits. Data is loaded from a CSV file via d3.csv.

NNita
92% 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
82% match
Loading thumbnail…

Fork of sketch with D3

A scatter plot visualizes the relationship between car mileage and price, with points colored by fuel type (Petrol, Diesel, Hybrid, Electric). Using D3 v7, the code loads data from a CSV file via `d3.csv`, maps values to numeric types, and renders an SVG with `d3.scaleLinear` axes, `d3.axisBottom` and `d3.axisLeft` labels, and a legend built from unique fuel types. The x-axis begins at zero, while the y-axis domain is padded by 10% to improve point visibility.

BBismark Kofi Owusu Sarfo
81% match
Loading thumbnail…

Fork of Fork of t4

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes, using a bubble chart where circle size encodes MPG and color differentiates manufacturers. D3 v7 reads the data from a CSV file and renders the chart as SVG with interactive tooltips on hover. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for scales, with event handlers for mouseover, mousemove, and mouseleave to show tooltips.

Aamshureddy13@gmail.com
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes relationships in automobile performance data, comparing miles per gallon against vehicle attributes including weight, horsepower, displacement, and acceleration. Each point is colored using a plasma interpolator based on horsepower, and the x-axis automatically cycles through different attribute comparisons every three seconds. The visualization uses the reusable chart pattern from D3 v6, combining scaleLinear, extent, axisBottom, axisLeft, and transition-based animation. Data comes from a CarPerformance CSV dataset hosted on raw GitHub.

Ssowjanya
80% match
Loading thumbnail…

Fork of reusable scatter plot

A reusable scatter plot cycles every two seconds between horsepower and miles-per-gallon axes for a 20-row car dataset. Built with D3 v6, it uses a reusable chart function with getter-setters for width, margin, and accessor functions. The SVG renders axes, labels, and steelblue circles with hover tooltips via appended title elements, while a setInterval reassigns xValue and yValue to flip the variables. The chart removes and recreates the SVG on each update, producing an animated axis-switching visualization.

119h61a05c9@cvsr.ac.in
79% match
Loading thumbnail…

Fork of Bubble chart

This fork of D3's bubble chart uses a CSV dataset of car makes to visualize the relationship between average horsepower, torque, and highway MPG. Each circle's x-position maps to horsepower, its y-position to torque, and its radius is scaled to highway MPG. The color of each bubble encodes the car make. The visualization demonstrates a color legend, a bubble-size legend, and a custom tooltip that reveals the make on hover. Rendered with SVG in D3 v7, the chart uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for coloring, and includes both axis labels and a title.

Iindushashi.g@gmail.com
79% match
Loading thumbnail…

Fork of vehicles Scatter Plot

A jittered strip plot shows the distribution of vehicle prices for each drive type (FWD, RWD, AWD), with semi-transparent dots colored by category. Hovering reveals tooltips with year, make, model, price, and fuel type. The visualization uses d3.csv to load data from a GitHub gist and renders circles via SVG, with d3.scaleBand and d3.scaleLinear for axes and d3.axisLeft/axisBottom for grid lines and ticks.

Ssaisathwikaguntupalli@gmail.com
79% match