Bar Chart

100%

✓ Published1🌍 Public

Last edited Jun 14, 2020

Created on Jun 14, 2020

A horizontal bar chart displays the number of engines for various commercial aircraft models, from single-engine PC-12s to four-engine A340s and B747s. The visualization uses D3 v5 with an SVG renderer, reading aircraft and engine counts from a CSV file. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate labeled axes with gridlines.

AI-generated description

This is a practice bar chart using data from different aircraft types and their powerplant configuration.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Bar Chart

This example displays a basic horizontal bar chart comparing quantities across different aircraft types. The chart uses D3 v5 to render SVG rectangles, with margins, axis labels, and a title. It reads data from a CSV file and utilizes `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for the axes. The bars are filled in steelblue, and tick lines are styled with a light gray color.

FFhouston17

81% match

Loading thumbnail…

A4 - Bar Chart in D3

This bar chart displays the total number of flights per year from 2003 to 2016, using data from a CSV file. It renders as an SVG with D3.js v7, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The chart includes labeled axes for "Year" and "Total Flights," with steelblue bars representing the aggregated yearly flight counts.

Rronnieferrufino4908@gmail.com

73% 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

73% 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

72% match

Loading thumbnail…

Making a Bar Chart - JAY

This example visualizes the relationship between engine cylinders and horsepower across automotive models, with each data point represented as a rectangle in a scatterplot-style bar chart. The chart uses D3 v5 to load CSV data, applies linear scales for both axes, and renders the visualization as SVG elements. Axes are generated using the `axisLeft` and `axisBottom` APIs. The data comes from the auto-mpg dataset, with numeric fields parsed via JavaScript’s unary plus operator. The bars are styled with a steelblue fill, though the chart lacks a traditional bar layout.

Jjay

72% match

Loading thumbnail…

Bar chart

This bar chart shows the difference in horse power among various cars, with each bar representing a car model. The chart uses SVG rendering and is built with D3 v6, using the `d3.scaleBand` and `d3.scaleLinear` APIs to position and size the bars. The data is loaded from a local source and rendered in a 960 by 480 pixel SVG canvas. The visualization provides a straightforward comparison of car performance metrics.

AAndrewTsai0406

71% match

Loading thumbnail…

bar chart

A grouped bar chart visualizes airline delay totals across six airports for each month of the year, with each airport’s monthly value rendered as a distinct bar. The chart uses D3 v7’s `d3.scaleBand` for the month categories on the x-axis and `d3.scaleLinear` for the delay magnitude on the y-axis, both fed by an external CSV file. SVG `rect` elements represent the bars, while `d3.axisBottom` and `d3.axisLeft` generate the corresponding axes. The data originates from the `airline.csv` file, containing airport, month, and total delay values.

AArbie Hsu

71% 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

71% match