Fork of Stylized Scatter Plot

Scatter plot

This scatter plot shows population counts for several countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for labeled gridlines. A custom tick formatter abbreviates large numbers, and circles are appended with a fixed radius of 10.

VVPTomi

Fork of Fork of Stylized bar chart

A stylized bar chart displays the 2020 populations of the ten most populous countries, using a green fill for each bar. The visualization, built with React and D3 v6, renders bars as SVG rectangles, with horizontal grid lines and rotated country labels along the x-axis. Data is loaded from a CSV file, and population values are formatted using a D3 format function that abbreviates large numbers (e.g., "1.38B"). Population data serves as the y-axis, while country names are on the x-axis.

Ssophievanderhorst

Fork of countries

This scatterplot of countries uses urban population as the x-axis and country names as the y-axis, with circles colored by each nation’s official language. Hovering over the color legend filters the displayed points to only those matching that language, dimming non-matching data. The visualization is built with React, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and custom React components for axes, marks, and the interactive legend. Data loads from a CSV via `d3.csv`, and all elements render as SVG inside a single `<svg>` canvas.

Rrushithareddyy

Fork of Stylized Bar Chart

This bar chart displays population values for various countries using a horizontal layout with colored bars. It loads CSV data from an external gist URL using D3’s `csv` utility, then applies `scaleLinear` and `scaleBand` to position bars and axes. React components render the SVG elements, including custom axes and marks, with D3’s `max` and `format` functions handling data scaling and tick label formatting. The chart includes a loading state and applies a Poppins font from Google Fonts.

TTousifAhamed

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with countries on the y-axis and population on the x-axis using circular markers. The code uses D3 v5’s `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom` with a custom tick formatter to abbreviate numbers. SVG rendering occurs within a React starter template, with axes drawn using `axisLeft` and gridlines via tick sizes.

Ggilbster

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady

Fork of Scatter Plot

This visualization shows the ten most populous countries as a dot plot, with population on the x-axis and country names on the y-axis, using D3 v6’s `scaleLinear` and `scalePoint` to map data. It is rendered as SVG, loading population data from a CSV file, and employs `axisBottom` and `axisLeft` to draw gridlines and labels, styling text via CSS.

MMajaha21

Fork of Stylized Bar Chart

This example shows the population of the top 10 most populous countries as horizontal bars, sorted in descending order. The chart uses React to render SVG elements, with d3-scale for creating the linear x- and band y-scales, and d3-format to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a CSV file using d3.csv, and a tooltip appears on each bar via an SVG `<title>` element. The visualization demonstrates a clean, minimal styling with custom font and color choices.

MMatthew Talty Colvard