Skip to main content
SimilarExport ZIP
100%

Fuel Consumption based on cars CSV Data

✓ Published0🌍 Public
AArjun Rao
Last edited Sep 9, 2020
Created on Sep 9, 2020

This example loads a CSV file of car fuel consumption data from a Gist and displays basic summary statistics about the dataset. It uses the D3.js v5 library to fetch and parse the CSV via `d3.csv` and `d3.csvFormat`, then renders the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The visualization is minimal, focusing on data inspection rather than graphical representation. The data originates from a Kaggle dataset on fuel consumption, though no chart or plot is generated.

AI-generated description

A program that loads and parses some CSV data: [https://www.kaggle.com/sethirishabh/fuel-consumption]

This dataset sows how much fuel is consumed b a car based on fuel type and their statistics on highway. The description of the data can be viewed at:- (https://gist.githubusercontent.com/arjunrao796123/7decbbf770bdb176406f22e8d24069a7/raw/README.md).

MIT Licensed

Similar vizzes

Loading thumbnail…

Inspecting some data

This example loads a CSV dataset of automobile fuel consumption from a remote URL and displays a plain-text summary of its basic structure: row count, column count, and file size in kilobytes. It then prints the first ten rows of the data as formatted JSON. The implementation uses d3.csv to fetch and parse the data, d3.csvFormat to calculate the raw size, and d3.select to append multiple <pre> elements to the body, with JSON.stringify providing readable output.

RRod Potter
78% match
Loading thumbnail…

Auto MPG Summary

This example displays a text-based summary of a CSV data file about car attributes from the UCI Machine Learning Repository. It first prints the total number of rows, columns, and the file size in kilobytes, then shows the first ten rows of the dataset as a JSON-formatted string. The code uses d3.csv to load the data, d3.csvFormat to calculate its size, and d3.select to append the output to the page. All content is rendered in a monospace style on a black background.

GGiovanniD_
76% match
Loading thumbnail…

Gist 6716af5ab2fd2c7d25baee69dc577448

This gallery example visualizes a subset of the classic “car.csv” automobile dataset, plotting fuel economy against model year. Each car is drawn as a small circle, positioned by its year and economy values, with the point’s color encoding the car’s brand. The implementation uses the D3.js library, specifically `d3.forceSimulation` to arrange overlapping labels or points and `d3.geoPath` for any map projection, though the core scatter plot is rendered via standard SVG circles. The visualization is built entirely from client-side JavaScript, directly parsing the CSV file to drive the animated layout.

JJulioTJ
76% match
Loading thumbnail…

Auto MPG Summary

This visualization displays a summary of an automobile dataset. It shows the total number of rows, the number of columns, the dataset size in kilobytes, and a preview of the first ten rows as formatted JSON. The program fetches data from a CSV file hosted on VizHub, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. It uses the D3.js `select`, `csv`, `csvFormat`, and `append` APIs to render the information in styled `pre` elements on a black background.

Hhenry1987
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…

Auto MPG Summary

This example displays a text-based summary of the Auto MPG dataset, showing the total row count, column count, and file size in kilobytes, followed by the first ten rows as pretty-printed JSON. The page uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data from a VizHub-hosted CSV file, while `select` and `append` build the `<pre>` elements. The black background and green monospace text create a terminal-like aesthetic for the output.

LLM2020
76% match
Loading thumbnail…

Data Table Summary

This example summarizes a CSV dataset by displaying its dimensions and a preview. It first shows the total row and column counts along with the file size in kilobytes, calculated using `csvFormat`. It then displays the first 10 rows as formatted JSON. The code loads the auto-mpg dataset via `d3.csv` and builds the text output using D3 selections to append `<pre>` elements.

MMinwoo Pak
75% match
Loading thumbnail…

Auto-MPG Summary

This example displays a text summary of the Auto MPG dataset, showing the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, and `select` to append `<pre>` elements to the page body. The data originates from the UCI Machine Learning Repository’s Auto MPG Data Set, with the interface styled as a green-on-black monospace terminal.

Ssherryyx
75% match