Skip to main content
SimilarExport ZIP
100%

Multi chart

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

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.

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

Multi graph

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.

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

bar chart

This bar chart compares smartphone models by units sold in millions, using a vertical bar encoding to show each model’s total sales. The visualization is built with React 16.9 and D3 v5, where a `d3.scaleBand` positions the categorical model labels on the x-axis and a `d3.scaleLinear` maps the numeric sales values to bar heights. Data is loaded as CSV via `d3.csv`, and the SVG bars are rendered with rotated x-axis tick labels to accommodate the long model names.

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

Bar chart

This horizontal bar chart ranks the top 20 smartphone models by units sold (in millions), with each bar colored by brand using a pastel ordinal scale. The visualization uses React 16.9 and D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `scaleOrdinal` for color encoding. Data is fetched from a remote CSV, normalized from single-line format, and rendered as SVG rectangles with tooltips showing price, rating, and battery life.

Llohitsai62@gmail.com
82% match
Loading thumbnail…

BAR CHART

A dark-themed bar chart ranks smartphone brands by total units sold in millions. Summed via `d3.rollups` and sorted descending, each brand appears as a blue bar with value labels, using a band scale for categories and a linear scale for counts. The CSV is fetched from a GitHub Gist, parsed with `d3.csvParse` and `d3.autoType`, then rendered as SVG with gridlines and rotated axis labels generated through `d3.axisLeft` and `d3.axisBottom`.

Llohitsai.nikkil@gmail.com
81% match