Skip to main content
SimilarExport ZIP
100%

Fork of Animated Vehicle Consumption Scatterplot

✓ Published0🌍 Public
Ssidobagga
Last edited Jan 12, 2023
Created on Jan 12, 2023

This fork of the Animated Vehicle Consumption Scatterplot visualizes 2014 vehicle fuel consumption data from dipinpdinesh's GitHub repository. The scatterplot cycles through CO2 emissions, engine size, and cylinder count as the x-axis, plotting each against combined MPG on the y-axis. Using D3.js v6 with selection.join and transition methods, circles animate positions and axes update smoothly. The chart leverages scaleLinear, axisBottom, and axisLeft, with SVG rendering and a timer that reassigns the x-value accessor every 17 seconds.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Vehicle_Fuel_Consumption_Analysis from dipinpdinesh. This data contains vehicles from 2014.

MIT Licensed

Similar vizzes

Loading thumbnail…

Animated Vehicle Consumption Scatterplot

Animated Vehicle Consumption Scatterplot displays 2014 vehicle fuel consumption data from dipinpdinesh's GitHub repository, plotting CO2 emissions against MPG before cycling through engine size and cylinder count as the x-axis variable. The visualization uses D3.js v6 with SVG rendering and animated transitions to smoothly reposition circles between axis changes. It implements a reusable scatter plot pattern via selection.join, with a 1-second transition duration and staggered delays for circle updates, while axis labels and scales transition correspondingly.

AAndre J Denais
94% match
Loading thumbnail…

Animated Vehicle Consumption Scatterplot

This animated scatterplot visualizes vehicle fuel consumption and CO2 emissions from a 2014 dataset, plotting over 1,000 points with D3.js. Every 17 seconds, the x-axis transitions between CO2 emissions, engine size, and cylinder count, repositioning points via `selection.join` with staggered `transition` delays. The SVG chart uses `scaleLinear` domains, axis generators, and custom labels, with the y-axis fixed to combined MPG. Data loads from a CSV via `d3.csv`, and the reusable chart pattern updates axes and circles smoothly during each attribute swap.

TToly
90% 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
84% match
Loading thumbnail…

Fork of Fork of Fork of reusable scatter plot

This animated scatter plot displays the relationship between horsepower and miles per gallon across 20 car models from a CSV dataset, alternately swapping the x- and y-axes every two seconds. Built as a reusable D3.js v6 module, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render SVG circles with tooltips. A `setInterval` timer triggers re-rendering of the chart with swapped accessor functions, while axis labels update dynamically based on the current orientation.

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

Fork of Fork of Fork of Fork of Fork of reusable scatter plot

This example presents a reusable D3.js (v6) scatter plot for visualizing the relationship between horsepower and miles per gallon in a car dataset. The scatter plot dynamically alternates between the two axes every two seconds, flipping which variable appears on the x-axis versus the y-axis. Implemented with a modular controller and a configurable scatter plot function, the chart reads data from a CSV file and renders as an SVG. The animation effectively demonstrates how the same data points reveal different correlation patterns depending on axis assignments.

119h61a05c9@cvsr.ac.in
83% 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
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of reusable scatter plot

This example shows a reusable D3.js scatter plot of a small car dataset, comparing horsepower and miles per gallon. A controller module updates the chart every two seconds, automatically swapping which attribute appears on the x- and y-axes. The visualization uses a modular `scatterPlot()` component with getter-setters, building an SVG with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data loads from a local CSV via `d3.csv`, and each point is rendered as a circle with an opacity of 0.8.

119h61a05c9@cvsr.ac.in
81% 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
81% match