Skip to main content
SimilarExport ZIP
100%

Fork of Activity7_Task2

✓ Published0🌍 Public
Ssaimanvith22@gmail.com
Last edited Nov 5, 2024
Created on Nov 5, 2024
Forked from Activity7_Task1

This area chart visualizes population values across a small set of years, with the data sorted by year to create a continuous filled shape. The visualization uses D3 v7 to render an SVG, employing linear scales for both axes, `d3.area()` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The chart is drawn with a steelblue fill, black stroke, and labeled axes for Year and Population, based on hardcoded sample data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity7_Task1_2

This visualization shows the 2010 population of 20 countries as a horizontal bar chart, with the data sorted by country name. The chart uses React components to render SVG elements, including custom `AxisBottom`, `AxisLeft`, and `Marks` components that call D3 scale functions like `scaleBand` and `scaleLinear`. Population values are loaded via `d3.csv` from a remote GitHub URL and formatted with `d3.format` to abbreviate large numbers (e.g., converting gigabytes to billions). The bars include a native SVG tooltip showing the formatted population value.

AArungopal Andalam
85% match
Loading thumbnail…

Fork of activity6_task1 question2

This visualization displays a horizontal bar chart that compares population counts by country for the year 2010. The chart uses a linear scale for the x-axis and a band scale for the y-axis, with bars rendered as SVG rectangles filled in steelblue. The code leverages d3.csv to load population data from a remote GitHub repository, then uses d3.axisBottom and d3.axisLeft to generate the axes. The x-axis labels are formatted using d3.format with the '.2s' specifier to abbreviate large numbers.

Ppuppireddyarchana@gmail.com
84% match
Loading thumbnail…

Fork of Activity6_Task1

This is a horizontal bar chart of population data for ten countries in the year 2000, rendered as SVG via React. The visualization uses React hooks (useState, useEffect) and D3 v5 scales including d3.scaleBand and d3.scaleLinear, with components for axes and marks. Data is loaded as CSV from a GitHub URL using d3.csv, with each bar’s width mapped to population via d3.max and tooltips formatted using d3.format. Axes are custom-built with React components, and the chart includes a labeled x-axis showing population in billions.

Kkrunalpatel@my.unt.edu
83% match
Loading thumbnail…

Fork of Activity7.1_Question2

This area chart displays world population growth from 1970 to 2022, aggregating country-level data from a CSV loaded via `d3.tsv`. The visualization uses `d3.area` and `d3.line` with a monotone curve, rendering an SVG with an axis generated by `d3.axisBottom` and `d3.axisLeft`, plus circles for each data point. The y-axis labels show population in billions, and the x-axis formats years as integers. The chart includes an accessible `<svg>` element with a title and descriptive aria-label.

GGunna,Praneeth Reddy
83% match
Loading thumbnail…

Fork of activity 6_Task 1

This horizontal bar chart visualizes the 2020 population for 30 countries, sorted from largest to smallest, with a green fill and blue axis ticks against a clean background. The chart loads data from a GitHub-hosted CSV via `d3.csv` and renders it as SVG using React components. D3's `scaleBand` and `scaleLinear` position the bars, while `format('.2s')` formats tick labels to show values in billions. Interactive tooltips display the exact population representation for each bar.

SSumanthnaidu213
83% match
Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the 2020 population for the top 30 countries, sorted along a horizontal axis with population values and a vertical axis listing country names. The visualization uses D3 v7 to load CSV data, create a linear x-scale and band y-scale, and render light-green SVG rectangles. Axis components are built with `d3.axisBottom` and `d3.axisLeft`, with tick formatting that converts values to a concise billion/million notation (e.g., "1.2B"). The chart is generated entirely in SVG, with margins and scaling calculated in JavaScript.

Nnavyabade05@gmail.com
82% match
Loading thumbnail…

Fork of activity 6_Task 1

This bar chart displays the 2020 population estimates for 30 countries, with country names on the y-axis and population values on the x-axis. The visualization uses React to structure SVG elements, with D3 v5's `scaleBand` and `scaleLinear` for positioning and `format` for tick labels. Data is loaded asynchronously from a CSV file using `d3.csv`. Marks are rendered as SVG rectangles with tooltip titles, while custom axis components generate ticks and labels.

Vvamsikrishnakanchukommala@my.unt.edu
82% match
Loading thumbnail…

Fork of Activity8_Task1_DV

This fork renders a horizontal bar chart of population data for 30 countries in 2020, using React to compose an SVG scene. The code imports D3 v5 utilities like `scaleBand`, `scaleLinear`, and `max` to position bars and axes, while custom components (AxisBottom, AxisLeft, Marks) generate tick lines and rectangles. Population values are loaded from a CSV via D3’s `csv` function, then formatted with `format('.2s')` to display billions with a 'B' suffix. The visual emphasizes green bars against a clean white background, with tooltips revealing precise values on hover.

Llikithabaddam@my.unt.edu
82% match