Fork of 6th visualisation 1

100%

Fork of 6th visualisation 1

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

This scatter plot visualizes the relationship between population and GDP across countries, with each point colored by region and interactive tooltips showing country details. It uses D3 v7 to load CSV data from a GitHub repository, then renders an SVG chart with linear scales for both axes and an ordinal color scale based on region_id. The code employs d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft to construct axes, circles, and a categorical legend, all within a responsive layout.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

6th visualisation 1

A responsive scatter plot visualizes the relationship between population and GDP across countries, coloring each point by region and providing hover tooltips with country details. It uses d3.csv to load an external dataset, then d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and a d3.scaleOrdinal with d3.schemeCategory10 for regional colors. The SVG output includes labeled axes, a title, and a legend, with all elements rendered via standard D3 data joins.

Vvenkatabhaskaratetali@my.unt.edu

91% match

Loading thumbnail…

Fork 2

A scatter plot visualizes the relationship between GDP and CO2 emissions for ten major countries, with each point colored by country and hover interactions revealing exact values via tooltips. The chart uses D3.js v7 to load CSV data from GitHub, parse numeric values, and render SVG circles positioned by linear scales. Axes, tick formatting, and labels are generated with `d3.axisBottom` and `d3.axisLeft`, while a color ordinal scale assigns category colors to countries.

SSeema Shrestha

82% match

Loading thumbnail…

Fork of data visulization

This bar chart displays population data for six countries, sourced from a local CSV file, with each bar’s length proportional to the population value (scaled by 1,000). Using D3 v6, the code employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis spacing, and `d3.axisLeft`/`d3.axisBottom` to render axes. The SVG is appended and styled via CSS, with margins applied to position the chart within a 960×500 viewport.

Yyingzhe-z

82% match

Loading thumbnail…

Fork of Interactive Scatter Plot

This interactive scatter plot explores relationships between variables like GDP, CPI, and birth rate across countries, with each point representing a country and colored by continent. Users can switch the x- and y-axis variables via dropdown menus and click legend entries to highlight specific continents. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and the `axes` helper from `@curran/responsive-axes`, with hover tooltips showing country names. Data comes from the World Data 2023 CSV, and the visualization updates dynamically through D3's data joins and transition methods.

Gg_beck@coloradocollege.edu

82% match

Loading thumbnail…

Activity6_q4

This bubble chart visualizes the relationship between GDP (x-axis) and population (y-axis) for six countries, with circle area encoding land area and color distinguishing each country. Built with D3.js v7, it uses `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with the Tableau10 scheme for colors. Tooltips generated via SVG `<title>` elements display each country’s exact values. The data is loaded from a local CSV file using `d3.csv`.

Vvidyagangasani@my.unt.edu

81% match

Loading thumbnail…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com

81% match

Loading thumbnail…

Activity-6-Scatterplot

This scatterplot visualizes the relationship between population and GDP per capita for U.S. cities using D3.js v6. The SVG-based chart plots each city as a steel-blue circle with a black stroke, positioned along linear scales for both axes. The code loads data from a GitHub-hosted CSV file, converts the population and GDP values to numbers, and renders axes with formatted tick labels. Interactive tooltips appear on mouseover, displaying each city's name, population, and GDP per capita. The visualization employs d3.csv for data loading, d3.scaleLinear for mapping, and d3.axisBottom and d3.axisLeft for coordinate axes.

GGorantla Vishnusai

81% 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