Cost of Mobiles

100%

Cost of Mobiles

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 22, 2023

A horizontal bar chart displays the cost of various mobile phone models, ranging from budget Nokia to premium iPhone 14 Pro. Each bar’s length encodes the price from the `data.csv` file. The visualization uses D3 v7 with `scaleLinear` and `scaleBand` for positioning, `axisLeft` and `axisBottom` for axes, and includes interactive tooltips on hover. Data is loaded via `d3.csv`, and the SVG is rendered in an HTML page with a separate CSS file.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization ICE-6 Bar Graph

This bar chart displays the cost per month for basic mobile plans across different countries, using a horizontal layout. The visualization loads data from a CSV file, filters it to the first 12 entries, and maps country names to a d3.scaleBand y-axis and costs to a d3.scaleLinear x-axis. Rendered as SVG within a React component, it uses d3.csv for data loading, with d3.max computing the domain and custom SVG elements for ticks and gridlines.

HHema1430

75% match

Loading thumbnail…

Project Brand vs. Avg Cost

This bar chart compares the average cost (x-axis) across various smartphone brands (y-axis), using data from a CSV file loaded with d3.csv. The visualization sorts the data by price and displays the top 500 entries as horizontal bars rendered as SVG `<rect>` elements via React. Axes are built using d3.scaleBand and d3.scaleLinear, with tick labels formatted using d3.format. Hovering over a bar reveals its precise value through an SVG `<title>` tooltip.

Cchsaisriharsha@gmail.com

75% match

Loading thumbnail…

ICE-7 Line Chat

This visualization shows how mobile phone costs change over time, with a single red line charting monthly price data from a CSV file. The x-axis represents months parsed with `d3.timeParse` from MM/DD/YYYY format, while the y-axis shows cost values scaled from zero to the maximum data point. Using D3 v5, the chart renders as SVG with `d3.line`, `scaleTime`, `scaleLinear`, and axis components, including gridlines and labeled axes for month and cost.

Nnikhilagopi

73% match

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes the cost of mobile phones over time, with a red line and green shaded region representing the trend. The chart uses a time-based x-axis for months and a linear y-axis for cost values, with blue axis labels and grid lines. The code leverages D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with a basis curve for smoothing, alongside `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV file and rendered as SVG within a React framework.

Nnikhilagopi

73% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart visualizes the ratings of various mobile phone brands, including Motorola, Nokia, Samsung, HUAWEI, Apple, and Sony. It shows the distribution of numeric rating values across brands using horizontal bars, with the highest rating value determining the linear scale domain. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with data loaded from a CSV file. The chart also customizes the axes by removing default domain lines and adding an axis label for the brands.

SSwapna1915

73% match

Loading thumbnail…

Main.js

This line chart shows mobile phone sales by brand from 2010 to 2020, with each brand represented by a distinct colored line. The visualization uses d3.csv to load the dataset, d3.scaleBand and d3.scaleLinear for the x and y axes, and d3.line to draw the paths. SVG rendering is used, with the chart including axis labels and a title, while the color scale employs d3.schemeCategory10 to differentiate brands.

Ttelkapallyrekha@gmail.com

72% match

Loading thumbnail…

ICE-7 Scatter plot

This scatter plot visualizes the relationship between mobile phone price and units sold, with each data point represented by a distinct symbol (circle, cross, or diamond) based on player type and colored by country. The visualization uses D3.js version 6.7.0, employing scaleLinear for axes, scaleOrdinal with schemeCategory10 for colors, and d3.symbol for point markers. Data comes from a CSV file loaded via d3.csv, with dimensions filling the entire browser window. The chart displays axes with tick marks and plots points with a 5-pixel radius, though symbol sizes remain consistent regardless of the radius setting.

Ttelkapallyrekha@gmail.com

72% match

Loading thumbnail…

ICE-7 Line Chat

This line chart displays mobile phone prices over time, with months on the x-axis and cost on the y-axis. D3 v5 renders the visualization as an SVG, using `scaleTime` and `scaleLinear` for axes, `line` for the path, and `axisLeft`/`axisBottom` with gridlines. Data is loaded from a CSV via the `csv` method, and month values are parsed with `d3.timeParse`.

MMgk1255

72% match