Skip to main content
SimilarExport ZIP
100%

EV vehicle range

✓ Published2🌍 Public
NNita
Last edited Jan 22, 2024
Created on Jan 17, 2024
Forked from Bar chart - I

This interactive bar chart compares the current and extended EV range for various vehicles, highlighting the impact of the GTC Range Extender. It uses D3.js v5 with an SVG rendering approach, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization. The data is loaded via `d3.csv` from a GitHub gist, with green bars representing current range and orange bars showing the enhanced range, accompanied by a legend and value labels for clarity.

AI-generated description

Interactive Bar Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

EV vehicle range - 2

This D3.js bar chart compares the current and extended ranges for various electric vehicles. Each vehicle has two horizontal bars: the green bar represents the current range in miles, while an offset orange bar above it displays the new range when equipped with a GTC Range Extender. The chart uses data from a remote CSV file and directly labels both range values next to their respective bars. The visualization employs `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom` to construct the plot within an SVG element.

NNita
95% match
Loading thumbnail…

Fork of EV vehicle range

This bar chart shows the range of different electric vehicles in miles, comparing current range to a new extended range with GTC technology. Two overlaid bars per vehicle display both values, with color-coded legends and numeric labels. The visualization uses D3 v5 with `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and `csv` to load data from a GitHub gist. SVG is used for rendering, with bars, labels, and a legend drawn directly in the markup.

CCurran Kelleher
89% match
Loading thumbnail…

Bar chart - I

This bar chart visualizes the range of different EV vehicles, with horizontal bars showing each model's range in miles. Built using D3 v5, it demonstrates a clean, simple bar chart design with a categorical y-axis for vehicle names and a continuous x-axis for the range values. The chart uses `scaleLinear` and `scaleBand` to map the data, `axisBottom` and `axisLeft` for axes, and SVG rectangles for bars. Data is loaded from a CSV file via `d3.csv`, and tooltips provide additional details on hover.

NNita
83% match
Loading thumbnail…

EV

This interactive scatter plot visualizes the relationship between driving range and price for 35 electric vehicle models, with each point colored by brand. The chart maps driving range (km) on the x-axis against price (EUR) on the y-axis, using a clean, animated scatter layout that reveals price-range correlations across the EV market. Hovering over any point displays a tooltip with the car model, brand, exact range, and price, while an interactive legend highlights the 10 cars in order of appearance in the dataset. The animation adds a temporal reveal effect as points appear sequentially. The data comes from the EV_Data dataset (source: Kaggle), and the visualization is rendered as an interactive D3.js animation, with the code licensed under MIT.

NNita
76% match
Loading thumbnail…

Car models and there mpg range values

This example visualizes the fuel efficiency range (mpg) of various car models as a bar graph. It shows the distribution of miles per gallon across different vehicles, highlighting which models are more fuel-efficient. The visualization uses React to manage the component state and D3.js v5 for data parsing and scales, including `scaleBand` for the categorical x-axis and `scaleLinear` for the continuous y-axis. The data is loaded as CSV from a remote URL, and bars are rendered as SVG rectangles with steelblue fills, accompanied by axes with tick marks and rotated labels for readability.

NNanditha Reddy
71% match
Loading thumbnail…

Car Sales

This bar chart visualizes carbon emissions by car make year from 2013 to 2022, with values displayed above each bar. Hovering over a bar highlights it and displays the numeric difference from the selected year’s value. The visualization uses D3.js v5 with SVG rendering and transitions. It scales the y-axis for CO2 emissions in g/km, and incorporates `d3.scaleBand`, `d3.scaleLinear`, and axis functions for grid lines and labels.

MManideeprenikindi
68% match
Loading thumbnail…

Bar Chart Visualization

This bar chart displays the fuel efficiency (mpg) of various car makes, sourced from a remote CSV file. The visualization uses D3 v7 to load and parse the data with `d3.csvParse`, then renders horizontal bars with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the SVG output styled in steelblue. Data and marks are updated dynamically through an asynchronous `fetch` workflow.

HHemanthh81
68% match
Loading thumbnail…

Bonus_ICE_IntBarChart

This interactive bar chart visualizes carbon emissions by car make year from 2013 to 2022, using values from an external CSV file. The chart displays CO2 emissions in grams per kilometer for each year, with bars color-coded by year. Built with D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Hovering over a bar triggers a transition that highlights the selected bar, displays a dashed reference line, and shows divergence values for other years. The visualization includes grid lines, axis labels, and a title.

Llibramanju
68% match