Skip to main content
SimilarExport ZIP
100%

Activity7_2

✓ Published1🌍 Public
Aamarnadhkari98@gmail.com
Last edited Nov 8, 2024
Created on Nov 8, 2024
Forked from Hello VizHub

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

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…

Activity7_2

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

Aamarnadhkari98@gmail.com
100% match
Loading thumbnail…

Activity 7_1

This pie chart displays the market share of smartphone brands, using percentage labels for slices above 5% and a legend listing each brand alongside its count. The visualization is rendered as SVG using D3 v7, with the `d3.pie()` layout, `d3.arc()` for the path geometry, and `d3.scaleOrdinal` for categorical coloring. Data is loaded from a CSV file via `d3.csv()`, and the chart is positioned with a translated group. The code also adds generic X and Y axis labels, even though no axes are present.

Bbhargavipagolu2025@gmail.com
80% 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
80% match
Loading thumbnail…

Activity 7

This example shows the market share of smartphone brands as a static pie chart with a legend identifying each brand by color. The visualization is rendered as an SVG using D3.js v5, with data loaded from a CSV file hosted on GitHub. The code uses `d3.csv` to parse the data, `d3.pie` to compute the angular layout, `d3.arc` to generate the pie slice paths, and `d3.scaleOrdinal` to assign colors from a predefined categorical palette. The chart includes a legend of circles and text labels, along with a title and axis labels for context.

Sssuryateja804@gmail.com
79% match
Loading thumbnail…

Activity-7.1_Q1

This D3.js visualization displays global smartphone market share as a pie chart, showing the proportion of users for each brand. The chart uses a custom color palette to distinguish brands and includes a legend listing each brand alongside its corresponding color. The code aggregates user counts by brand using `d3.rollup` and `d3.sum`, then renders the pie with `d3.pie` and `d3.arc` within an SVG. A custom `pieChart` function provides a fluent API for setting dimensions, data, and labels, making the chart configurable. The data is loaded from a remote CSV file containing smartphone usage statistics.

SSrihith Reddy Gaddam
78% match
Loading thumbnail…

Activity6-Question 2

This stacked horizontal bar chart shows smartphone market share distribution across Samsung, Apple, Xiaomi, Oppo, and Others from 2019 to 2023. Each bar represents a company’s total market share across all years, colored by year using d3.scaleOrdinal. The visualization uses d3.stack() to layer year segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Interactive hover effects trigger opacity changes and display tooltips showing year-specific market share values formatted with d3.format. Data comes from a CSV file loaded via d3.csv.

Hharinihari6791@gmail.com
78% match
Loading thumbnail…

Activity7_area_chart

This area chart visualizes monthly sales data for electronics, clothing, furniture, and toys across four smoothed, semi-transparent colored areas. It loads CSV data from a GitHub gist using `fetch` and `csvParse`, then renders an SVG chart using D3 v5. The visualization employs `scaleBand` and `scaleLinear` for axes, `area` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for ticks. A legend maps each category to its fill color, with styling defined in external CSS.

11810vineeth@gmail.com
78% match
Loading thumbnail…

Activity_7_2

This example displays an area chart of monthly sales data, using a steel blue filled path to show the trend across categories. It loads data from a CSV file hosted on GitHub and renders the visualization as an SVG. The code uses D3.v7’s `scaleBand`, `scaleLinear`, `area` generator, and axis functions to construct the plot, including an axis label for months and sales, plus a simple legend indicating the series.

Gguruabhay294@gmail.com
78% match