MPG_Indian Cars

100%

MPG_Indian Cars

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

This bar chart displays the miles per gallon (MPG) for various Indian car makes, with each row representing a single car model. Using D3 v7, the visualization employs a linear x-axis for MPG values and a band scale for car makes on the y-axis. The SVG rendering includes interactive tooltips that show the exact MPG value on hover, and the bars are colored violet. The data is loaded from a local CSV file and aggregated by car manufacturer.

AI-generated description

MIT Licensed

Similar vizzes

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

78% match

Loading thumbnail…

Bar chart - Highest MPG

A bar chart ranks ten car makes by their highest city MPG values, from Suzuki to MINI, with taller bars indicating better fuel economy. The visualization uses D3 v6 to load CSV data and render an SVG with a quantized color scale from ColorBrewer, mapping MPG values to a red gradient. A tooltip appears on mouseover, and d3-legend provides a color legend, while axes and labels clarify the make and MPG measurements.

Ddriftcafe

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

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

74% match

Loading thumbnail…

India Car Sales

This visualization presents annual car sales for various companies in India as a pie chart, using data fetched from a CSV file hosted on GitHub. The chart displays sales figures in thousands, with each slice colored distinctly and labeled with its corresponding value. Legends identify each company alongside its sales total. The code employs D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` to generate the SVG paths, labels, and legend elements, with data loaded asynchronously via `d3.csv`.

GGeorge Oyosa

74% match

Loading thumbnail…

Bar chart - Highest MPG

This example shows the highest city MPG vehicles by make, using a sequential bar chart where warmer reds indicate higher MPG values. The chart sorts car makes from lowest to highest MPG, with interactive tooltips displaying exact values on hover. Built with D3 v6, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` to map data, while `d3.axisBottom` and `d3.axisLeft` render axes. A color legend from the d3-legend library explains the red color scale, and all graphics are drawn as SVG elements with mouseover/mouseout events.

Vvishusikka

73% match

Loading thumbnail…

India Car Sales

This visualization presents a pie chart of the top five Indian car companies by annual sales, with each slice labeled with its sales figure. The chart is built using D3 v5, with data loaded via `d3.csv` from a GitHub-hosted CSV file. The `d3.pie` and `d3.arc` functions generate the chart geometry, while `d3.scaleOrdinal` assigns distinct colors to each company. A legend on the right side lists the companies with their corresponding sales values.

GGeorge Oyosa

73% match

Loading thumbnail…

Stripe Chart

This stripe chart displays the miles per gallon (mpg) for individual car models across five automobile brands, with each point jittered horizontally within its category to reveal distribution. The visualization uses d3.csv to load the data, then builds an SVG with axis scales via d3.scaleLinear and d3.scaleBand. Points are colored using a sequential d3.scaleSequential with the Inferno interpolator. Interactive hover tooltips appear through d3 mouse events, while the Y-axis domain is manually fixed to highlight variations in fuel efficiency.

Pprateekvasi

72% match