Skip to main content
SimilarExport ZIP
100%

Fork of Fork of CarSelling-Bar Chart

✓ Published0🌍 Public
RRyanYun0017
Last edited Dec 5, 2021
Created on Dec 5, 2021
Forked from HTML Starter

This bar chart visualization displays car selling data from a CSV file fetched via d3.csv from a GitHub gist. The chart is rendered as SVG within a React framework, using d3.v5 to parse and process the data. The visualization employs vega-lite and vega-tooltip libraries, registered through vega-lite-api, to enable interactive tooltips on hover. The page integrates vega and vega-lite scripts in the HTML head, with the SVG container set to 960x500 pixels, and the visualization is generated through a bundled JavaScript file that loads the dataset and applies the charting configuration.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CarSelling-Bar Chart

Cars are ranked by selling price in INR on the x-axis, against their production year on the y-axis, revealing how newer vehicles generally command higher resale values. The chart loads a CSV from a GitHub gist, parses numeric fields, and sorts rows by year descending before rendering. Built with React and D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and a d3-legend color legend, drawing light-blue bars as SVG rects.

RRyanYun0017
83% match
Loading thumbnail…

Fork of Fork of CarSelling-Bar Chart

This bar chart displays the relationship between car selling price in Indian rupees (INR) and manufacturing year, using data from a Kaggle vehicle dataset. The x-axis shows selling price in millions of INR, while the y-axis lists production years sorted in descending order. Built with React 16.9 and D3 v5, the visualization uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for axes, and `d3.legendColor` for the categorical color legend. All marks render as SVG rectangles with light blue fill.

RRyanYun0017
81% match
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Eeravellisaimeghana
81% match
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Eeravellisaimeghana
81% match
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Eeravellisaimeghana
81% match
Loading thumbnail…

Fork of Fork of 3D Bar Chart using D3.js

This example presents car manufacturer sales data for six months as an interactive 3D bar chart. It uses the D3.js `csv` loader to parse a remote CSV file into a multi-series dataset, which is then attached to a chart component created with `d3.x3d.chart.barChartMultiSeries`. The visualization leverages the d3-x3d bridge to render bars in an X3D scene, with D3's `scaleLinear`, `axisLeft`, and `axisBottom` handling the chart layout and axes within the HTML container.

SSaiSree0122
81% match
Loading thumbnail…

Fork of Car Selling Details - Vega Lite

This visualization presents the production year of cars from the UCI Auto MPG dataset as a circular donut chart. It uses the Vega-Lite API to map the year field to both the angular position (theta) and color of each arc, with years grouped into five-year bins. The view is rendered to a canvas and supports tooltips via the vega-tooltip handler. The visualization uses a custom configuration to enhance readability, including specific font sizes and colors for labels and titles. The chart dynamically resizes to fit the browser window.

RRyanYun0017
81% match
Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This visualization shows a horizontal bar chart of car sales prices aggregated by car type, using a bat-scatter style layout. The code loads CSV data from a remote GitHub gist, aggregates the Price field by Type, and renders bars with SVG in a React app. It uses D3 v5 functions like `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom`/`axisLeft` for axes. The bars are colored with an RGB scale, and the chart includes labeled axes for average price and car sales.

MM
80% match