GLOBAL INTERNET USAGE

100%

GLOBAL INTERNET USAGE

✓ Published0🌍 Public

Last edited Jun 30, 2022

Created on Jun 30, 2022

The visualization displays global internet usage trends over time as a line chart, plotting yearly data. The chart uses D3.js v5 within a React framework to render an SVG, with axes labeled “Year” and “Automobile sales.” Data is loaded via the `d3.csv` method from a GitHub URL. The implementation leverages D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the coordinate system, while the line path is generated with `d3.line` and styled with a blue stroke.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

My Line Chart

This line chart visualizes a user’s daily internet usage in gigabytes throughout 2020. The graphic highlights values above 100 GB with a distinct background band, and an interactive tooltip reveals precise usage and date details on hover. Built with D3 v5, the visualization uses `d3.csv` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for the path. The SVG rendering includes labeled axes, a title, and a transparent listening rectangle for mouse interactions. The data is plotted from the `InternetUsage` and `Bill Date` fields of the CSV file.

Aaishwarya2111

79% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React and D3

This bar chart displays 2021 global internet usage rates for 16 countries, sorted by country name along the vertical axis and percentage values on the horizontal axis. The chart uses React functional components with hooks to load and manage data from a CSV file, while d3.scaleBand and d3.scaleLinear calculate the chart’s scales. The visualization is rendered as SVG, with bars drawn as rect elements and custom axis ticks created from d3’s scale methods.

DDeegutla123

79% match

Loading thumbnail…

Fork of My Line Chart

This line chart displays daily internet usage in gigabytes over the year 2020. The visualization uses d3.csv to load the dataset, then applies d3.scaleTime and d3.scaleLinear for the x and y axes respectively, with a d3.line generator creating the red stroke path. A peach-colored reference band highlights usage above 100 GB. Interactive features include a listening rectangle that captures mousemove events, displaying a tooltip with the date and usage value. The SVG rendering includes axis labels, a titled header, and a dotted vertical line that tracks the cursor position.

Aaishwarya2111

78% match

Loading thumbnail…

My Line Chart

This line chart visualizes a user’s 2020 internet usage in gigabytes over time, with a highlighted band marking usage above 100 GB. The D3 v5 code loads CSV data, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and draws the line with `d3.line`. It includes interactive tooltips triggered by `mousemove` events on a transparent overlay, using `d3.scan` to find the closest data point. The SVG rendering features custom axes, labels, and a dashed vertical guide.

FFramnk

77% match

Loading thumbnail…

Area Chart

This example shows the monthly expenditure of internet users over time, with a line tracing the trend and a light green area filling the space beneath it. The chart uses an SVG rendering with D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` and `d3.area` with `d3.curveBasis` to generate the smoothed paths. Data is loaded from a CSV file, parsed with `d3.csv` and `d3.timeParse`.

HHema1430

77% match

Loading thumbnail…

Line Chart

This line chart displays student growth rate from 1980 to 2005, plotting year on the x-axis and per capita mobile usage on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to create the SVG path, with gridlines from tick size and rotated axis labels. Data is loaded via `csv()` from a GitHub gist, and the chart includes a title and styled axes using CSS classes.

DDineshK2602

77% match

Loading thumbnail…

Line graph

This line graph displays car sales from 2010 to 2020, with years on the x-axis and sales on the y-axis. The visualization uses React with D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate an SVG chart. Data is loaded from a CSV file hosted on GitHub, and rendered with styled axes, a red line path, and a title. The chart includes labeled axes and gridlines via tick sizes.

Ssumanthsomu1

76% match

Loading thumbnail…

Fork of line chart naveed

This visualization shows trends in internet users across different global regions from 1990 to 2010, using multi-line chart with color-coded paths and an interactive tooltip that displays the region name on hover. The code uses d3.csv to load the data, d3.nest to group by entity, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the SVG paths. A d3.schemeCategory10 color scale assigns distinct colors to each line, while the legend is built manually using SVG text elements. The rendering relies on SVG with CSS-styled paths and axes, and mouse event handlers drive the tooltip display.

NNaveed945

75% match