BAR CHART

100%

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

A horizontal bar chart ranks the top 15 EV charging stations by monthly users, with each bar colored on a cool gradient and labeled with station ID, city, and user count. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, `csvParse` to load remote data, and `interpolateCool` for color encoding. SVG rendering includes grid lines, axis labels, and a tooltip on hover.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi graph

This visualization combines bars and a line chart to compare average monthly users and average energy consumption across EV charging stations in different cities. D3 v6 parses CSV data from a GitHub gist, groups records by city, and computes mean values. The chart uses `scaleBand` for the x-axis, `scaleLinear` for dual y-axes, and `d3.line` to connect energy data points. React manages the loading state, while SVG rendering displays cyan bars, magenta line markers, and interactive tooltips for each city.

Sshreelasya.bezawada@gmail.com

82% match

Loading thumbnail…

SG

A scatter plot shows the relationship between energy output and monthly users for EV charging stations. Each circle represents a station, with color encoding city and size encoding the number of charging ports. The visualization uses D3.js v7 with SVG rendering, loading data from a gist URL and parsing it with `d3.csvParse`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while point size uses `d3.scaleSqrt` and color uses `d3.scaleOrdinal` with `d3.schemeTableau10`. A tooltip displays station details on mouseover.

Sshreelasya.bezawada@gmail.com

81% match

Loading thumbnail…

line chart

This interactive line chart displays EV charging station metrics across stations, letting users toggle between charging ports, average charge time, daily users, and monthly energy consumption via a dropdown menu. The visualization uses D3 v7 to load CSV data from a GitHub gist, sort stations by ID, and render an orange line with red point markers. Smooth transitions animate point position updates when switching metrics, while hover tooltips reveal station details. The chart includes gridlines, axis labels, and a cleaned axis without domain lines.

Llohitsai62@gmail.com

80% match

Loading thumbnail…

area chart

This interactive area chart visualizes EV charging station metrics—charging ports, average charge time, daily users, and monthly energy—across station IDs. Built with D3 v7, it renders a smooth area path with an overlaid orange line and circular points, all using SVG. A dropdown menu lets users switch between metrics, triggering transitions that update the axes, grid, and data points. Hovering over a point reveals a tooltip with city details and the selected metric’s value, with data loaded from a remote CSV file.

Llohitsai62@gmail.com

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

77% match

Loading thumbnail…

bar chart

A bar chart displays the top 15 smartphone models ranked by units sold in millions, with each bar colored by brand using a pastel ordinal scale. The React app loads CSV data via d3.csv, sorts it descending, and renders SVG bars with value labels, hover tooltips showing price, rating, and battery life, plus a legend. The visualization uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.scaleOrdinal with schemePastel1 for coloring, all within a React functional component using useState and useEffect.

Llohitsai.nikkil@gmail.com

76% match

Loading thumbnail…

Bar Chart with React & D3

This bar chart displays the top 10 hour-level time slots with the highest average number of available bikes, drawn as horizontal rectangles. It loads CSV data from a GitHub-hosted Velib bike-sharing dataset through D3’s `csv` and aggregates values with `d3.rollups` and `d3.mean`. React manages the component state and renders an SVG, while D3’s `scaleBand` and `scaleLinear` position the bars; axes and marks are defined as reusable React components.

MManon ROMAIN

75% match

Loading thumbnail…

pie chart

This interactive pie chart displays the distribution of electric-vehicle charging stations across cities, with a dropdown menu to switch between metrics: charging ports, daily users, monthly energy, and average charge time. Built with D3 v7, it loads data from a text file, aggregates values by city using `d3.rollup`, and renders SVG slices with `d3.arc`. Hovering reveals a tooltip with percentages, while labels show city names and shares. Animated transitions update the chart when the metric changes.

Llohitsai62@gmail.com

75% match