Skip to main content
SimilarExport ZIP
100%

SG

✓ Published0🌍 Public
Sshreelasya.bezawada@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
82% 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
81% match
Loading thumbnail…

BAR CHART

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.

Sshreelasya.bezawada@gmail.com
81% match
Loading thumbnail…

Reusable scatter plot

This reusable scatter plot shows the relationship between EV sales and charging station counts, with each point colored by year via a Tableau10 ordinal scale. The visualization is built with D3 v7, using `d3.csv` to load EV adoption data from a remote GitHub gist, then rendering SVG circles through a configurable `renderScatterPlot` function. The axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the scales are defined using `d3.scaleLinear` with automatic domain extension and nicening. The reusable design accepts data accessor functions and label strings, making the chart adaptable to different datasets and variables.

AAparna Desi Reddy
79% match
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
79% 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
78% match
Loading thumbnail…

SG

The visualization presents a smartphone scatter plot mapping price against battery life, with each dot representing a model. Color encodes brand, while dot size reflects average rating. The chart uses D3 v7 with SVG rendering, featuring a dark-themed interface, grid lines, custom axes, and a tooltip for detail inspection on hover. Data loads from a raw GitHub gist, where the code normalizes a single-line CSV by inserting line breaks between rows, then binds this data to the visualization elements.

Llohitsai62@gmail.com
76% match
Loading thumbnail…

Reusable scatter plot

This reusable scatter plot visualizes the relationship between charging stations and EV sales across multiple years, with each dot colored by year using the Tableau10 color scheme. The code loads CSV data via `d3.csv` and renders an SVG chart with `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` for categorical coloring. The reusable `renderScatterPlot` function accepts configurable accessors and labels, demonstrating a flexible pattern for embedding charts in different contexts.

AAparna Desi Reddy
76% match