Skip to main content
SimilarExport ZIP
100%

Bar chart - I

✓ Published1🌍 Public
NNita
Last edited Jan 16, 2024
Created on Jan 16, 2024

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.

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

Making a Bar Chart

This horizontal bar chart visualizes the fuel efficiency of various car models, ranking them by their miles per gallon (MPG) value. The data is sourced from a CSV file and loaded using D3's `csv` function, with MPG values scaled down for display. The visualization is built with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are rendered as SVG rectangles, with axes added via `axisLeft` and `axisBottom`, and the chart is styled with a steelblue fill for the bars.

Ssrrajendran
80% match
Loading thumbnail…

BarChartD3

This bar chart displays the fuel economy (MPG) of various vehicles, with each bar labeled by its exact MPG value and sorted alphabetically by vehicle name. The visualization uses D3 v7 to load CSV data from a remote gist, parse numeric values, and render an SVG with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while grouped SVG elements append both rectangle bars and text labels for each data point.

Ccwb314159@gmail.com
80% match
Loading thumbnail…

Vehicle information

This example displays a bar chart of fuel consumption for nine vehicles, ranked from highest to lowest miles per gallon. The vehicles are listed on the y-axis, with horizontal bars showing their MPG values. Built with D3 v7, it loads data from a CSV file and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart as SVG. Vehicle names are uppercased and axes are labeled to clarify the data.

Kkeynes okiro
79% match
Loading thumbnail…

Bar chart

This interactive bar chart displays the horsepower of various car models, with each bar representing a different vehicle from the provided cars.tsv dataset. The visualization uses D3 v6 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the chart as scalable vector graphics (SVG). The horizontal bars are sorted by car name on the y-axis, with a teal fill color, and the chart includes a title and axis labels.

AAndrewTsai0406
79% match