Skip to main content
SimilarExport ZIP
100%

Multi graph

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

A multi-series chart compares average smartphone price and battery life by brand from a CSV dataset. White bars show average price against a left axis, while a neon sky-blue line and dots show average battery hours against a right axis. Built with React hooks and D3 v6, it uses `scaleBand`, `scaleLinear`, `axisLeft`, `axisRight`, and `d3.line` to render SVG elements. Brand labels rotate on the x-axis, and a legend appears below.

AI-generated description
MIT Licensed

Similar vizzes

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

Multi chart

This chart compares smartphone brands by average price and average units sold. Animated, rounded bars display average prices against a black background, while a glowing cyan line overlays the same chart to show average units sold, using a dual y-axis for the different scales. The visualization is built with React and D3 v6, using `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `axisRight` to construct the scales and axes. Data is loaded from a gist CSV and aggregated by brand, with hover tooltips and drop-shadow filters adding interactivity and visual polish.

Llohitsai.nikkil@gmail.com
89% match
Loading thumbnail…

MC

This dark-themed chart compares average smartphone price and average battery life by brand, with white bars repainting the price scale on the left and a neon sky-blue line and dots marking battery life on the right. Built with React and D3 v6, the code uses `csv` to fetch data, `scaleBand` for the x-axis, `scaleLinear` for the two y-axes, and `axisBottom`, `axisLeft`, and `axisRight` for ticks. Animated hover states alter bar opacity and translate via CSS transitions, while the legend sits beneath the chart. Data comes from a remote gistfile.

Llohitsai.nikkil@gmail.com
85% 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
78% match
Loading thumbnail…

sp

A scatter plot displays smartphone models by price on the x-axis and battery life on the y-axis. Each dot encodes brand through color and average rating through size, with a legend explaining the mappings. Built with D3 v7, the visualization uses SVG rendering and includes interactive tooltips that appear on hover. The data comes from a CSV file fetched via URL and parsed with D3's CSV parser, with custom text preprocessing to handle single-line formatting. Axis gridlines and styled panels enhance readability within a dark theme.

Llohitsai.nikkil@gmail.com
78% match
Loading thumbnail…

Bar chart

This bar chart displays the top 20 smartphone models by units sold, with each bar’s length representing millions of units and its color indicating the brand. Hovering reveals a tooltip with price, rating, and battery life. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, `scaleOrdinal` with `schemePastel1` for color, and parses a single-line CSV dataset via `csvParse` after normalization. The SVG renders with grid lines, tick labels, and value annotations.

Llohitsai.nikkil@gmail.com
77% 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
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
77% match