Skip to main content
SimilarExport ZIP
100%

Activity6_Question3

✓ Published0🌍 Public
KKhushi Desai
Last edited Oct 20, 2024
Created on Oct 20, 2024
Forked from Activity6_Task3.2

This D3.js v7 example displays a scatter plot of city data, plotting population against area and using distinct symbols to represent different regions. The visualization fetches its data from a CSV file hosted on GitHub and renders it into a full-window SVG. It uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbols` for region-based shapes, and demonstrates a custom legend for mapping shapes to regions. The code loads D3 via UNPKG and uses local ES6 modules for its component structure.

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 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
92% 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
86% match
Loading thumbnail…

Activity6_question3

A scatter plot displays global cities by population on the x-axis and GDP in billion USD on the y-axis, with each city’s points colored via a categorical scale using `d3.scaleOrdinal` and a combined `schemeCategory10` and `schemeSet3` palette. The visualization loads a CSV from a GitHub raw URL using `d3.csv`, parses numeric fields, and renders circles with `d3.selectAll('circle')` and `.enter()`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, formatted using `d3.format('.2s')`, and a legend lists city names with matching color swatches. The SVG output uses D3 v6 with a light-gray background and Arial font.

Vvenkatdinesh5010@gmail.com
85% match
Loading thumbnail…

Activity 6_Question 3

This scatter plot shows the relationship between area and elevation for a set of global cities, with each city colored distinctly and identified in a legend. The x-axis uses a logarithmic scale for area, while the y-axis uses a linear scale for elevation in meters. Built with D3.js v6, it loads CSV data from a GitHub gist and renders SVG circles using d3.csv, d3.scaleLog, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Tooltips are not implemented, but the data points are semi-transparent to reveal overlapping points.

Ssairohithchada@gmail.com
82% match
Loading thumbnail…

Activity6_Qs3

This D3.js v6 scatter plot maps the latitude and longitude of geographical points from a CSV file, coloring each point by its country: blue for France, green for the United Kingdom, and red for the USA. The visualization uses `d3.csv` to load remote data, `scaleLinear` for proportional x- and y-axes, and `axisLeft`/`axisBottom` to generate tick labels. Circles are appended to an SVG canvas sized to the browser window, with margins and a fixed radius of 5 pixels, while rotated text labels annotate the axes.

Tthakurnikhitha4@gmail.com
80% match
Loading thumbnail…

Activity_6_Question3

This scatter plot example shows how to render individual data points as circles on a two-dimensional plane, with no axes or labels visible. The visualization relies on D3.js v7 to select a DOM element and update its text content, while the actual scatter plot rendering is handled through the framework’s core selection and manipulation API. The code imports a custom message module and uses the `select` function from D3 to set that message into a styled div, though the plot itself is not explicitly drawn in the provided script. The styling is managed through a separate CSS file.

Mmaheshsachin1234@gmail.com
80% match
Loading thumbnail…

Activity6_task3_question_6

This scatter plot displays population data for selected countries from 1950 to 2020, using a Cartesian coordinate system where each blue circle represents a data point. The visualization uses D3 v7 to fetch CSV data from a GitHub Gist, then maps the data using `d3.scaleLinear` for both axes and renders circles with hardcoded blue fill. The chart includes axes generated with `d3.axisBottom` and `d3.axisLeft`, along with placeholder axis labels. The code references `d.x` and `d.y` column values, though the actual CSV structure is time-series based rather than x/y pairs.

Cchandrikachowdary867@gmail.com
80% 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
80% match