Skip to main content
SimilarExport ZIP
100%

Activity6_Question3

✓ Published0🌍 Public
Ggroup118sai@gmail.com
Last edited Oct 21, 2024
Created on Oct 21, 2024
Forked from HTML Starter

This example shows quarterly sales trends for five product categories (Electronics, Furniture, Clothing, Toys, Books) as a scatter plot with color-coded circles. The visualization uses d3.csv to load data from data.csv, then applies d3.scalePoint for the quarter axis and d3.scaleLinear for sales values, with d3.scaleOrdinal and d3.schemeCategory10 for color mapping. Circles are appended for each category per quarter, while axis labels and a legend are generated using d3.axisBottom, d3.axisLeft, and d3.select. The SVG rendering uses D3 v7 within a React project, producing a static chart with a white background and black-stroked data points.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-6_Question-2

This example shows quarterly sales for three product categories—Electronics, Office Supplies, and Furniture—as a stacked horizontal bar chart. The chart renders with SVG using D3 v7, loading data from a CSV file. The code applies `d3.stack()` to create stacked series, `d3.scaleBand()` for category positioning, and `d3.scaleLinear()` for the value axis. A tooltip appears on mouseover using `d3.select` and event handlers, displaying each segment’s category and sales amount. An ordinal color scale distinguishes the four quarters, with a legend positioned in the chart margins.

HHarshathBudida@my.unt.edu
88% match
Loading thumbnail…

Activity 6 Q3

This scatter plot shows the relationship between sales amount and number of orders, with each point colored by product category (electronics, cosmetics, or clothing). The visualization loads CSV data from a GitHub gist, uses `d3.csv` to parse the dataset, and renders circles via SVG. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and a `d3.scaleOrdinal` to map categories to colors. A manually positioned legend explains the color coding at the bottom-right corner.

Kkrishi7079@gmail.com
86% match
Loading thumbnail…

Activity6Question2

This stacked bar chart shows quarterly sales totals across three product categories—Electronics, Clothing, and Home Goods—using D3 v7 to render SVG. The chart uses `d3.stack()` to create stacked segments and `d3.scaleOrdinal()` for color mapping, with `d3.axisBottom` for the x-axis. Hovering over any segment reveals a tooltip displaying the exact sales value for that category and quarter. Data comes from a hardcoded CSV structure with quarter and category columns.

Gganesh.hns48@gmail.com
85% match
Loading thumbnail…

Activity6_Question-3

A scatter plot maps daily sales over time, using D3.js v7 with `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.symbolsFill` to encode product categories as distinct point shapes. A legend, built via `d3.symbol`, lists each category. Data loads from a remote CSV file, parsed with `d3.csvParse` and `d3.timeParse`; sales figures are numeric. The chart includes labeled x- and y-axes, and points render as SVG paths within an HTML page styled by CSS.

Kkandulasunny17@gmail.com
85% match
Loading thumbnail…

Activity6-Question2

This visualization shows quarterly sales data for product categories using a stacked horizontal bar chart. Each bar segment represents a quarter’s sales contribution, with an interactive tooltip displaying the specific category and sales amount on mouseover. The example demonstrates D3 v7’s `d3.stack` for data shaping, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for rendering. Data comes from an inline CSV file loaded via `d3.csv`, and the chart is rendered as SVG with a custom legend.

SSaiKiranReddyKancharla@my.unt.edu
84% match
Loading thumbnail…

Activtiy6-Question2

This example visualizes the proportional sales distribution across five product categories (Clothing, Electronics, Books, Toys, Furniture, Jewelry) for five different time ranges, using a horizontal stacked bar chart. It imports data from a local `data.csv` file and renders the chart as an SVG with D3 v7, employing `d3.stack()` to aggregate the series and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the sales value for each segment, while a legend identifies the time ranges. The axes are labeled “Product Categories” and “Sales,” with the title “Sales by Category of Product” displayed above the plot.

Aaashishvinayvasala@gmail.com
84% match
Loading thumbnail…

Activity6_Question2

A stacked bar chart displays quarterly revenue across five product categories—Electronics, Furniture, Clothing, Toys, and Books—from Q1 2022 through Q2 2024. The chart uses D3 v7 to load CSV data, stack values with `d3.stack`, and render series as SVG rectangles with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Color encoding uses `d3.schemeTableau10`, and each segment is labeled with its value. A separate SVG legend lists the five categories.

Ggroup118sai@gmail.com
84% match
Loading thumbnail…

activity 6 task q3

This scatter plot visualizes the relationship between sales and profit for five products (A through E), with each point styled by a distinct shape and color derived from its product category. Built with D3.js v7, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for colors, and a custom symbol generator for shapes. Data originates from a hardcoded array in `bundle.js`, mirroring the `product.csv` file, and is rendered on an SVG canvas with axes labeled via the `axes.js` module.

Ssairamisetti3829@gmail.com
83% match