Skip to main content
SimilarExport ZIP
100%

EV vehicle range - 2

✓ Published0🌍 Public
NNita
Last edited Jan 22, 2024
Created on Jan 22, 2024
Forked from EV vehicle range

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.

AI-generated description

Interactive Bar Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

EV vehicle range

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.

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

Activity6-ques2

This stacked bar chart visualizes the distribution of electric vehicle ranges across five car brands using data from ElectricCarData_Clean.csv. Each horizontal bar represents a brand, segmented into five color-coded range bins, from below 200 km to above 500 km. The visualization uses D3.js v7 to process the data, calculate proportional bin frequencies, and render the SVG with scales from `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`. The chart includes axes with percentage tick formatting via `d3.axisBottom` and a legend.

Kkbhavithareddy06@gmail.com
74% match
Loading thumbnail…

Divergent Barchart with legend D3

This divergent bar chart visualizes the fuel economy (mpg) of various cars, with each bar diverging from the dataset’s average value. Bars extending right indicate above-average efficiency, while those extending left show below-average performance, with color encoding the magnitude of deviation using a red-blue sequential scale. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, rendering as SVG with axes and bar labels. Data is loaded from a remote CSV file via `d3.csv`, and the visualization is set within a tall 1000×4000 pixel canvas.

Ccwb314159@gmail.com
70% match
Loading thumbnail…

Jaswanth_Multi-Series Line + Combined (Bar+Line)

This visualization presents a combined bar-and-line chart of electric vehicle performance data from a CSV file, showing average battery drain as green bars against the left axis and average driving range as a red line against the right axis. The data is binned into groups of five trips each to improve readability. Built with D3 v7, the visualization uses `d3.csv`, `d3.rollups`, and `scaleBand`/`scaleLinear` to process and map data into SVG elements, including a custom legend, gridlines, and an annotation highlighting the bin with maximum battery drain.

JJaswanthKoorapati@my.unt.edu
69% 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
67% match