Skip to content

Latest commit

 

History

History
49 lines (36 loc) · 2.82 KB

File metadata and controls

49 lines (36 loc) · 2.82 KB

Phone to Smartphone Visualization

My final project for the course Data Visualization with D3.js. The web app is available here on Netlify.

Dataset

The dataset selected is a publicly available dataset on Kaggle about mobile phones released from 1994 to the third quarter of 2021. https://www.kaggle.com/datasets/mahipalsingh/phone-to-smartphone

Data Pre-processing

As many of these features contain a very large number of null values, and the format of the records is not uniform, I use Python Pandas to extract the information needed. The processed data is stored in ./data

Design

Slider

  • To facilitate the observation of the evolution of the phone, I created a double-ended slider. By dragging its start and end points, we can visualize data for a period or a year.

Visualization of Brands

Bar Chart

  • Each bar represents a brand and is identified by color.
  • Its height indicates the cumulative number of phones produced by the brand.
  • To clearly observe the difference in the number of phones produced by different brands, we made the bars sorted from highest to lowest.
  • A tooltip is added, which could display detailed information including brand name, production and ranking, when the mouse is hovering over a bar.

Stream Chart

  • Each stream represents a brand and its area indicates production.
  • Also sorted to facilitate observation.
  • As both of the bar chart and stream chart use data about brands and production, I create an interaction between them by classing the bars and streams corresponding to the same brand. When we select a bar or a stream, the corresponding part in the other char will be also selected.

Screenshot1

Visualization of the Size

Line Chart

  • Illuste the average length, width, thickness and weight of phones.

Scatter Chart

  • Illuste the length, width, thickness and weight of each phone.
  • For a more detailed view, When a point is selected, the information about this phone is displayed at the right of the chart, including the name, the brand and a photo of it.

Screenshot2

Visualization of Other Features

Bubble Chart

  • Each bubble represents a color of phone and is filled with it.
  • The size of the bubble indicates the number of phone produced with the corresponding color.

Word Cloud

  • Since our dataset has 68 features and most of their values have little diversity or are null, I decide to process them all together with the word cloud.
  • It can describe the information in text and reflect its frequency in font size.

Screenshot3