Making a Bar Chart

100%

Making a Bar Chart

✓ Published0🌍 Public

Last edited Nov 7, 2018

Created on Sep 5, 2018

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.

AI-generated description

This bar chart shows cars with their MPG. the source comes from https://perso.telecom-paristech.fr/eagan/class/igr204/datasets

MIT Licensed

Similar vizzes

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

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

85% match

Loading thumbnail…

Asssssignment

This visualization shows the fuel efficiency (mpg) of 20 car models, with horizontal bars representing each car's miles per gallon alongside their make. The chart uses blue tick lines and light green bars against a clean white background, with a labeled x-axis for population-2020 values. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements through custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate the ticks and rectangles. Data is loaded from a CSV file via D3's `csv` function.

HHemanthh81

84% match

Loading thumbnail…

Making a Bar Chart

A scatter plot displays the relationship between vehicle weight and fuel efficiency (MPG) for cars from the 1970s, with each circle’s size proportional to weight. Using d3.csv to load the data, d3.scaleLinear maps the x- and y-domains, while d3.axisBottom and d3.axisLeft render gridlines and ticks. The SVG circles are appended via data joins, and margins define the plotting area.

Nnshedd

84% match

Loading thumbnail…

Cars Scatter Plot

This D3.js v5 scatter plot visualizes fuel efficiency data from the cars2017_new.csv dataset, plotting each car model's average city MPG as a horizontal bar. The y-axis displays car makes using a band scale, while the x-axis represents city MPG values with a linear scale. Built with SVG rendering, the visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `scale.category20` APIs. The code reads the CSV file, converts numeric fields, and appends styled rectangles to the SVG canvas to represent each data point.

SSushanta77

83% match

Loading thumbnail…

Bar chart

This bar chart visualizes the relationship between a car’s retail price and its city miles per gallon, with each bar representing a vehicle from the cardata.csv dataset. The chart uses D3 v5 to load the CSV data and render the visualization as an SVG. Axis labels and titles are styled using CSS classes, while the bars themselves are positioned and scaled based on the data values. The example demonstrates how D3’s `csv` method loads external tabular data for chart construction.

SSunny-DV

83% match

Loading thumbnail…

Bar Chart on VizHub

This example displays a grouped bar chart comparing miles per gallon (mpg) and attributes across car makes, using data fetched from a CSV hosted on GitHub Gist. The visualization is rendered as SVG via D3 v6, with scales and axes built through `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. It also demonstrates importing modules from D3 and local ES6 modules, though the main chart logic in index.html and main.js handles the data parsing with `d3.csvParse` and asynchronous fetch.

HHemanthh81

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

83% match