Skip to main content
SimilarExport ZIP
100%

Multi graph

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Multi graph

This visualization combines bar charts and a line graph to compare average smartphone prices and battery life across brands, using data loaded via d3.csv and aggregated by brand. The chart employs d3.scaleBand for categorical positioning, dual d3.scaleLinear axes for price and battery ranges, and renders bars with d3.selectAll while drawing a line path with d3.line. The React-based interface updates the SVG dynamically using useEffect hooks, with a dark neon theme styled through CSS variables.

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

my DC-Multi BAR chart

This visualization displays monthly energy consumption in kilowatt-hours across multiple building sites, with each site represented by a distinct color. It combines bar charts and line graphs within small multiples, plotting time on the x-axis and energy values on the y-axis. The code uses D3 v5’s `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `nest` functions to process the MonthData.csv file and render SVG elements. Colored bars show individual monthly readings, while overlaid lines and labels track each site’s trend over time.

Mmab3105
80% match
Loading thumbnail…

Multi Charts - backup>

This visualization presents monthly energy consumption data as multiple small SVG charts, one per site, with each chart combining bar and line representations. The code uses D3 v5 with `d3.nest()` to group the data from MonthData.csv by site, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Each chart displays site-specific bars and a colored line path, with hover effects on rectangles and a formatted time axis.

Mmab3105
80% match
Loading thumbnail…

multi Charts - test>

This example displays monthly energy consumption in kilowatt-hours across multiple sites, with each site color-coded and rendered as a separate small bar chart arranged in a grid. The visualization uses D3 v5 to load data from a CSV file, parse dates with `d3.timeParse`, and create individual SVG charts for each site. Hovering over a bar highlights it in orange, and a tooltip provides detailed values. The charts share common axes and scales, computed using `d3.scaleBand` and `d3.scaleLinear`, to facilitate comparison across sites and time periods.

Mmab3105
80% 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
79% match
Loading thumbnail…

Multi Charts - backup>

This example shows monthly electricity consumption in kilowatt-hours across multiple sites, with each site’s data displayed in its own small bar chart arranged vertically. Hovering over a bar highlights it in orange, and tooltips provide additional detail. The visualization uses D3 v5 to load the CSV, parse dates with `d3.timeParse`, and nest data by site with `d3.nest`. Each sub-chart renders an SVG with a band scale for the x-axis, a linear scale for the y-axis, and rectangles for bars.

Mmab3105
78% match