Smartphone Sales Data Visualization

100%

Smartphone Sales Data Visualization

✓ Published0🌍 Public

Last edited Mar 2, 2026

Created on Mar 2, 2026

This example summarizes a smartphone sales dataset by displaying key statistics from a CSV file, including file size, row count, and column count, alongside a table of the first ten records. The visualization also includes static SVG shapes—a red circle and a blue rectangle—to demonstrate basic SVG rendering. Built with D3 v7, the code fetches the dataset via `fetch`, parses it with `d3.csvParse`, and dynamically populates the summary and table elements using D3 selections. The layout is styled with CSS, and the rendering uses SVG for the shapes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Smartphone

This example demonstrates how to load and parse a CSV dataset using D3 v7, displaying basic file statistics in a styled HTML page. The code uses `d3.csv` to fetch the Smartphone dataset from a GitHub gist, then computes and presents the file size in kilobytes, row count, and column count inside a `<pre>` element. The page also includes an embedded SVG illustration of a smartphone and surrounding decorative elements, rendered as static markup. The example focuses on data loading and parsing rather than interactive visualization, with a simple message container updating via the DOM API.

Nnagarjuna1968

84% match

Loading thumbnail…

Smartphone Specs Visualization

This example displays a table of 2024 smartphone specifications, including brand, model, battery capacity, and price for ten devices. The page uses D3.js version 7 to bind the hard-coded dataset to an HTML table, dynamically creating the header row and cells via `d3.select`, `selectAll`, `data`, and `enter` chains. A clean, styled layout with alternating row colors and a blue header bar is generated entirely through D3’s data-join methods.

SSai Shishir Koppula

78% match

Loading thumbnail…

activity7_task1

This visualization shows smartphone market share as a static pie chart, with each brand’s proportional slice colored and labeled in a side legend. It loads CSV data via `d3-fetch`’s `csv`, parses numeric `MarketShare` values, and generates arcs using `d3-shape`’s `arc` and `pie` generators. The SVG is rendered in a 500x500 viewport, with colors assigned through `d3-scale`’s `scaleOrdinal` and `schemeCategory10`. Legends are manually appended as grouped rectangles and text elements, while the code imports solely the necessary D3 modules rather than the full library.

MMili Patel

76% match

Loading thumbnail…

Sales Data Summary

This interactive dashboard summarizes sales data from a user-supplied CSV file. It displays dataset statistics and a preview table alongside an SVG bar chart ranking top products by sales. Built with D3.js v7, the page features a URL input that loads and parses the data, auto-detecting column names. The visualization updates dynamically, with the bar chart using D3 scales and axes to render the sorted sales figures.

RRamdas Dheeraj

76% match

Loading thumbnail…

Scatter plot

This dark-themed scatter plot shows the relationship between units sold and total sales for smartphone models, with each point colored by brand and sized by average rating. Hovering reveals a tooltip with model details. Built with D3 v7, the visualization loads CSV data, applies linear scales for axes and a color scale for brands, and uses SVG circles with mouse events for interactivity.

Llohitsai62@gmail.com

75% match

Loading thumbnail…

Transforming Data

The visualization loads smartphone data from a CSV file and groups it by mobile model name, calculating the average price per model. It demonstrates data transformation with D3.js functions like `csvParse`, `flatRollup`, and `sum`, then outputs the aggregated summary as formatted JSON text within the container. The example highlights modular ES6 imports and asynchronous data fetching via `fetch`, rendering results in a simple text-based display using D3's `select` and `join` operations.

Vvineelaramulapalli32

75% match

Loading thumbnail…

Activity6_Question2

This example visualizes mobile phone sales data from a CSV file as a horizontal stacked bar chart, displaying yearly sales figures for Apple, Samsung, Motorola, and Google. The chart uses D3.js v7 to load data, apply sequential color scales, and render the SVG with axis labels and a tooltip that reveals specific sales values on hover. The code demonstrates importing D3 via UNPKG, using utility functions like `d3.stack()` and `d3.scaleBand()`, and structuring chart elements with an SVG canvas.

Vvarshithainaganti@gmail.com

75% match

Loading thumbnail…

Activity6_Q2.3

This stacked bar chart visualizes the distribution of smartphone sales across five price categories for ten brands, with each bar normalized to show proportions of total sales. The D3.js v7 code loads data from a CSV file and renders an SVG visualization, using `d3.stack()` to create stacked segments, `d3.scaleOrdinal()` for color mapping, and `d3.axisBottom()` with percentage tick formatting. Interactive tooltips display the exact percentage for each segment on hover, while a legend identifies the color-coded categories.

MMeghana Sadhu

75% match