Skip to main content
SimilarExport ZIP
100%

Activity-6_Task-3

✓ Published0🌍 Public
1180030215cse@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example presents a scatter plot of US Census demographic data, comparing Action and Adventure ratings across platforms. It loads data from a CSV file hosted on GitHub and renders circles with tooltips showing platform names. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to coordinate scales and axes. The SVG output is sized to the window, with axis labels denoting Latitude and Longitude, and uses a steelblue fill for the plotted points.

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…

Activity 6_Task3

This scatter plot maps gaming platforms by their average Action and Adventure ratings, with each circle representing a platform and a hover tooltip revealing its name. The visualization loads CSV data from a GitHub repository and uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes and circles as SVG elements. Point positions are derived from the extent of both rating columns, while margins are sized to accommodate full-screen rendering.

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

Activity6_Q_6

This interactive scatter plot visualizes the relationship between the percentage of movie ratings in the 5.0–6.5 range and the 6.5–7.5 range, using data from a remote CSV file. It loads D3 v6 via UNPKG and filters the data by genre, with each circle colored according to its genre and showing a tooltip on hover. The visualization uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes, labels, and circles in an SVG canvas.

Aadapasaidivya99@gmail.com
80% match
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes city data, mapping population on the x-axis against area on the y-axis, with each point colored by region using a categorical color scale. The code loads a CSV file from GitHub, parses it, and renders circles in an SVG using D3 v6 APIs such as `csv`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `entries`. A legend, built with appended rectangles and text, identifies the region colors. The visualization uses the browser’s full window dimensions and positions axes with margin conventions.

KKhushi Desai
79% match
Loading thumbnail…

Activity6_question3

This scatter plot visualizes the cities dataset, showing each city as a circle positioned by its area (x-axis) and population (y-axis), with colors indicating the region. It uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data from a GitHub CSV URL and render an SVG chart. The code sets fixed dimensions, applies margins, and uses a switch statement to assign distinct colors to North America, South America, Europe, Asia, and Africa, while smaller tick labels improve readability.

PPreethi Medepalli-91
79% match
Loading thumbnail…

Activity 6 Task 4

This example shows a bubble chart that visualizes spatial data by mapping x and y coordinates to a scatterplot and a third size value to the radius of each circle. The chart loads CSV data from a GitHub repository using D3 v5’s `d3.csv` method, then renders the bubbles as SVG circles with a skyblue fill and semi-transparent opacity. It uses `d3.scaleLinear` for the x, y, and radius scales, and displays axes via `d3.axisBottom` and `d3.axisLeft`, with explicit axis labels. The SVG canvas is fixed at 800 by 600 pixels with defined margins.

Mmaheshchowdaryponnaganti@my.unt.edu
79% match
Loading thumbnail…

Fork of Activity6-Q3.6

This D3.js (v7) scatter plot visualizes population data over time, with each circle representing a country-year observation. The plot distinguishes USA data points in blue from other countries in orange, using year on the x-axis and population on the y-axis. The code loads CSV data from a GitHub repository, converts numeric fields, applies linear scales via `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. Circle positions are set using the scaled x and y coordinates, with point radius fixed at 5 pixels. The SVG output automatically sizes to the browser window dimensions.

Ssriyaalugupalli@my.unt.edu
79% match
Loading thumbnail…

Activity8Task3.1

This interactive scatter plot visualizes the relationship between age and height for a dataset with categorical color coding. Points are colored skyblue, lightgreen, or orange based on their category, with gray as the default fallback. The visualization loads CSV data from a GitHub gist using the `csv` function, then maps values to screen coordinates with `scaleLinear` and `extent`. It renders SVG circles using `selectAll` with the `join` operator, and displays labeled axes via `axisLeft` and `axisBottom`. The plot dynamically fills the browser window with margins defined for the chart area.

Ssirichandana017@gmail.com
78% match