Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 12, 2024

Created on Apr 12, 2024

This visualization displays a filled area chart showing the total number of international students per year. The chart uses a steelblue area to represent the data, with labeled axes for "Year" and "Total International Students." The example loads a CSV dataset from a GitHub gist and parses it using `d3.csvParse` with `d3.autoType` to infer data types. The SVG rendering is built with D3.js v7, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and the `d3.area` generator to create the area path. Axis ticks are drawn with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.

Ssahithya.voleti@gmail.com

84% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes student and sports data from a CSV file, displaying key statistics such as total student count, unique favorite subjects, and the top team. It presents these findings in a simple SVG bar chart that shows team counts, with axes labeled using D3's `d3.axisBottom` and `d3.axisLeft`. The data is loaded via `d3.csv` and processed using `d3.rollups` and `d3.scaleBand`, resulting in an accessible chart with a summary section and rotated x-axis labels for readability.

SSYAM TEJ

84% match

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes a student sports dataset, showing a bar chart of team counts alongside text statistics for total students, unique subjects, and the top team. The code uses `d3.csv` with `d3.autoType` to fetch and parse the data, then `d3.rollups` with `d3.descending` to compute team frequencies. An SVG bar chart is rendered using `d3.scaleBand` and `d3.scaleLinear`, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. The page structure and styling come from the accompanying `index.html`, `styles.css`, and `script.js` files.

SSYAM TEJ

81% match

Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example visualizes country population and area data from a GitHub-hosted CSV file. It shows a bar chart of populations with value labels, alongside a data summary and a data table. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the SVG chart, plus `d3.format` for number formatting. The visualization also provides a computed summary of total population and the largest country by area.

Nnabeel.ahmed2003.na@gmail.com

81% match

Loading thumbnail…

Fork of Fork of fork of ICE-7

This example shows a line chart of the number of international students in the USA over time, with purple tick labels and a bold green stroke. The visualization uses the D3 v5 library, importing functions such as `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to build the SVG rendering. It loads a CSV dataset from a GitHub Gist, parses the year column using `d3.timeParse`, and formats axes with custom styling defined in an external stylesheet. The chart includes labeled axes and a grid-like background created by tick lines.

TTulluripallavi

81% match

Loading thumbnail…

Fork of Fork of Fork of fork of ICE-7

This visualization displays a line chart of the number of international students in the USA over time, using a green stroke to emphasize the trend. The code relies on D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart within an SVG. Data is loaded from a CSV file using `d3.csv`, with years parsed via `d3.timeParse`. Axis labels are added manually, and grid lines are created with tick sizes extending across the plot area.

TTulluripallavi

81% match

Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Ssahithya.voleti@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Pprathyusha-reddy-arch

80% match