Activity 6_Task 3.2

100%

Activity 6_Task 3.2

✓ Published0🌍 Public

Aakankshareddygorla@my.unt.edu

Last edited Oct 21, 2024

Created on Oct 21, 2024

This example builds a scatter plot with a categorical legend, where data points are distinguished by shape. The visualization maps two quantitative variables to the x and y axes using `d3.scaleLinear` and assigns a different symbol to each category via `d3.scaleOrdinal` and `d3.symbol`. The chart includes axes with labels, drawn using `d3.axisLeft` and `d3.axisBottom`, and a custom legend that displays the shape mapping. The underlying data and its source are not specified in the provided code.

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…

ACT 6 TASK3.2

This scatter plot example uses D3 v7 to visualize data points with various shapes, mapping an additional categorical dimension through shape encoding. The visualization implements a custom axes module with axis labels, and a shape legend that displays the mapping between categorical values and symbol types. The code demonstrates importing specialized modules from local ES6 files and uses D3's scales, including `scaleLinear` and `scaleOrdinal`, along with `symbol()` from the `d3` namespace to generate the shapes for each data point.

BBhavana Sharma

85% match

Loading thumbnail…

Task 3 Q 3.2

This interactive scatter plot uses D3 v7 to visualize two quantitative variables across multiple categories, with each category represented by a distinct geometric shape from `symbolsFill`. The visualization applies `scaleLinear` for both axes and `scaleOrdinal` for shape encoding, rendering data points as SVG paths using the `symbol` generator. A shape legend explains the categorical mapping, while axes with labels are constructed using `axisLeft`, `axisBottom`, and custom label positioning from the `axes` module. The example demonstrates reusable chart components through ES6 module imports and data-join patterns for updates.

RRukmini Devi Y

84% match

Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot with a shape legend, rendered using D3.js. It visualizes data points positioned through an interactive, data-driven layout, with the legend mapping shapes to categories. The code uses D3 selection methods and SVG elements to construct the chart, while the styling is handled via a separate CSS file. The visualization updates dynamically in the VizHub V3 runtime environment, which supports continuous hot reloading for iterative development.

Ssumanthnaidu213@gmail.com

83% match

Loading thumbnail…

Activity 6_Task 3.2

This example shows a scatter plot of AGE versus CHARGES, with data points encoded by shape to represent the SEX category and labeled with misleading axis titles ("Accessories" and "Clothing") and a "Store" legend. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to map categories to symbol shapes, and a custom shape legend built with `symbolGenerator`. Data is loaded from a remote CSV file via `d3.csvParse` and rendered into an SVG that fills the viewport.

Aakankshareddygorla@my.unt.edu

82% match

Loading thumbnail…

Activity 6 task 3

This scatter plot visualizes the distribution of three data groups (A, B, C) across x and y coordinates, using colored circles to distinguish group membership. The chart includes labeled axes, a legend, and a sequential color scheme from `d3.scaleOrdinal(d3.schemeCategory10)`. Built with D3 v7, the code loads data from a CSV file, applies linear scales for both axes, and renders the visualization as SVG circles. Axis ticks, labels, and the legend are generated using D3’s `d3.axisBottom`, `d3.axisLeft`, and manual SVG text elements.

RRishabh Sharma

81% match

Loading thumbnail…

Activity_Task3_Question_3

This example shows a scatter plot of fifty randomly generated points, each belonging to one of three categories (A, B, or C) and plotted on a simple Cartesian grid. The visualization distinguishes categories by encoding each one with a distinct symbol—circle, cross, or diamond—and a unique color from the `d3.schemeCategory10` palette. Using D3 v7, the code creates SVG paths via `d3.symbol`, scales numeric x and y values with `d3.scaleLinear`, and adds labeled axes rendered through `d3.axisBottom` and `d3.axisLeft`.

SShasankreddyganta@my.unt.edu

81% match

Loading thumbnail…

Activity 6 Task3 Q6

This example shows a scatter plot of categorical data from a CSV file, with each point colored by category and positioned by valueX and valueY. It uses D3 v7 to load the data via `d3.csv` and `d3.autoType`, then renders SVG circles with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The axes are generated with `d3.axisBottom` and `d3.axisLeft`, and labels for both axes are added as SVG text.

Kkesava

81% match

Loading thumbnail…

Activity 6 _Task 3.2

This example presents a scatter plot of height versus weight, with data points shaped according to a person type category. The dataset is loaded from a remote CSV file and parsed with `d3.csvParse`. The visualization uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.symbolsFill` to encode the categorical variable through different symbol shapes. The chart includes axis labels, a title, and a custom legend built with D3’s `symbol` generator, all rendered within an SVG using D3 v7.

MMonish Galla

80% match