Fork of shish's ice7- areachart

100%

Fork of shish's ice7- areachart

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 28, 2025

This area chart displays the top 10 countries by their share of the world population in 2025, using a smooth monotone curve and orange point markers. The visualization loads data from a CSV file via `d3.csv`, sorts it by the `World_Share` column, and renders an SVG area chart with `d3.area` and `d3.scalePoint` for the categorical country axis. Axis labels and rotated country names are added using `d3.axisBottom` and `d3.axisLeft`, with light blue fill and steel blue stroke styling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

shish's ice7-piechart

This pie chart displays the top 10 countries by world population share in 2025, with each slice labeled by country name and accompanied by a color-coded legend. Built with d3.v7 and rendered as SVG, it loads data from a CSV file, sorts by the World_Share column, and uses `d3.pie()` to generate the arcs. Slice colors come from `d3.scaleOrdinal()` with the `d3.schemeCategory10` palette, while `d3.arc()` defines the pie geometry. The visualization includes stroke outlines and text labels positioned at arc centroids, with a legend appended to the right of the chart.

SSai Shishir Koppula

85% match

Loading thumbnail…

shish's ice7- linechart

A line chart displays the top 10 countries by world population share for 2025, with each country plotted along the x-axis and its percentage of the global population on the y-axis. The chart highlights the dominant positions of India and China, which together account for roughly 35% of the world's population. Built with D3 v7, the visualization loads CSV data, sorts entries by World_Share, and renders an SVG path using d3.line, with orange circles marking each data point and rotated axis labels for readability.

SSai Shishir Koppula

85% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart displays the current population of different countries over time, using a smooth, basis-curved line and an orange fill beneath it. The visualization is built with D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` and `area` generators with `curveBasis`. Data is loaded from a remote CSV file and rendered as an SVG, with a grid, axis labels, and a title.

0057SatvikDamera

84% match

Loading thumbnail…

Shish's ICE7- Reusable scatter plot

This scatter plot visualizes world population data for 2025, comparing each country’s population against its median age. Using D3.js v7, the code loads a CSV file, parses numeric values, and renders circles scaled with `d3.scaleLinear` for both axes. The SVG visualization includes axis labels, hover effects that change circle color, and tooltips via appended `title` elements. Data comes from a GitHub-hosted CSV source, and rendering uses standard D3 SVG primitives with margins and transitions.

SSai Shishir Koppula

84% match

Loading thumbnail…

Shish's Barchart- ICE6

This bar chart displays the top 10 most populous countries in 2025, using a horizontal axis for country names and a vertical axis for population counts. The bars are colored by continent using a Tableau10 color scheme. Built with D3 v7, the visualization loads CSV data, sorts it, and slices the top ten entries. It renders as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes.

SSai Shishir Koppula

83% match

Loading thumbnail…

shish's ice7-reusable scatter plot

This scatter plot visualizes projected 2025 world population data, showing each country’s total population against its urban population percentage, with circle size encoding each nation’s share of the global population. Built with D3 v7, it renders as an SVG with linear scales for both axes and a square-root scale for radius. Interactive tooltips appear on mouseover, displaying the country name, population, urban percentage, and world share. The chart loads data from a CSV file and uses D3’s `d3.csv`, `d3.scaleLinear`, and `d3.scaleSqrt` APIs.

SSai Shishir Koppula

82% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most populous countries from a 2019 CSV dataset, using horizontal bars to compare population sizes. Built with React and D3 v5, the visualization renders SVG marks and channels, with x and y scales created via `d3.scaleLinear` and `d3.scaleBand`. The code loads data using `d3.csv`, maps population values, and generates SVG rectangles, axis ticks, and labels through React components, supported by `d3.axisLeft` and `d3.axisBottom` for coordinate reference.

SSheshidharreddy

82% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This chart displays the top 10 most populous countries in 2019 as a horizontal bar chart, ranking them by population value. The visualization uses React functional components with the useState and useEffect hooks to fetch CSV data, while D3’s scaleBand and scaleLinear handle the spatial mapping of country names and population counts to SVG rectangles. Rendering occurs as pure React elements, with D3’s axis utilities replaced by manually drawn tick lines and labels. The x-axis scale is derived from the maximum population in the dataset, and the chart updates dynamically after the CSV loads.

SSheshidharreddy

82% match