Skip to main content
SimilarExport ZIP
100%

Activtiy-6-q3

✓ Published0🌍 Public
Sswapnadabburi@my.unt.edu
Last edited Oct 24, 2024
Created on Oct 24, 2024

This scatter plot visualizes product details, with each point representing a product’s width and length, colored by category (smart devices, home furnishings, or kitchen appliances). The chart uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, position marks, and render axes in an SVG. Product dimensions are parsed from a GitHub-hosted CSV file, and points are drawn as circles with a fixed radius, while axis labels are styled green.

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…

Activity6-Question3

This scatter plot visualizes product dimensions from a CSV dataset, showing product length on the x-axis and product width on the y-axis. The points are colored by category, with smart devices in red, home furnishings in blue, and kitchen appliances in dark green. The visualization loads data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles and axes using D3 v7’s selection and join methods. The code uses `d3.extent` to set domains and `d3.axisLeft` and `d3.axisBottom` to draw the axes, with labels for each axis.

LLayaMyadam@my.unt.edu
91% match
Loading thumbnail…

Activity6-Question3

This scatter plot displays product dimensions, plotting product length on the x-axis against product width on the y-axis, with colored circles indicating product categories: smart devices, home furnishings, and kitchen appliances. It loads CSV data from a GitHub repository using d3.csv, applies linear scales with d3.scaleLinear to map data values to pixel coordinates, and renders SVG circles using D3’s selection and join methods. The chart includes labeled axes created with d3.axisLeft and d3.axisBottom, with margins and a custom legend represented by the marker function.

Aaashishvinayvasala@gmail.com
91% match
Loading thumbnail…

Activtiy6-Question3

This scatter plot visualizes product dimensions from a Superstore dataset, displaying product length on the x-axis and product width on the y-axis. Each circle represents a product, with colors distinguishing categories: skyblue for electronics, lightgreen for furniture, orange for kitchen, and gray for others. The visualization uses D3.js v7 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` to generate axes. Data is fetched from a raw GitHub CSV URL, with circles positioned using the `cx` and `cy` attributes and styled via a color mapping function.

Ssowmyaammula.sdv@gmail.com
89% match
Loading thumbnail…

Activity 6 Question 3

This example shows a scatter plot of product specifications, mapping thickness on the x-axis and length on the y-axis, with each point colored individually using a categorical color scale. The visualization uses D3 v6 to load CSV data from a GitHub gist, create an SVG canvas, and apply linear scales based on the data extent. Axes are generated with `axisBottom` and `axisLeft`, and the plot fills the browser window with a fixed radius of 5 pixels per circle. The visualization highlights the distribution of product measurements without additional layers of encoding or interaction.

Nnikhilapogula@my.unt.edu
84% 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
84% match
Loading thumbnail…

Activity6_Question3

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.

Ggroup118sai@gmail.com
83% match
Loading thumbnail…

activity6_Q6

A scatter plot shows the relationship between two numeric columns from a CSV file of sales product details. The visualization uses D3.js v7 to load the data asynchronously, map values to linear scales, and render circles with an ordinal color scale based on a categorical group column. Axes and labels are generated using `d3.axisBottom` and `d3.axisLeft`, while the SVG canvas is sized and positioned via `d3.select` and `attr`.

RRJVENKATESH789@GMAIL.COM
82% 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
81% match