My Line Chart

100%

✓ Published0🌍 Public

Last edited Apr 12, 2022

Created on Apr 12, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

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

92% 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

89% match

Loading thumbnail…

Line Chart

This line chart displays the usage of mobile devices over a ten-year period, with the x-axis representing years and the y-axis showing usage values. The visualization uses D3 v5 to load CSV data and render an SVG chart, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for labeled tick marks. The data is fetched from a GitHub gist, with a blue stroked line and styled text elements.

DDineshK2602

81% match

Loading thumbnail…

Line chart Visualization

This line chart visualizes Google’s annual user counts from 2011 to 2021, loaded from a GitHub-hosted CSV file using d3.csv. It renders an SVG with d3.scaleTime for the x-axis (years) and d3.scaleLinear for the y-axis (users), alongside d3.axisBottom and d3.axisLeft with gridlines. A d3.line generator creates the path, while axis labels and a title are added via SVG text elements. The chart employs d3.extent and d3.max to set domain bounds and custom margins for layout.

DDanthalakirankumar

78% match

Loading thumbnail…

GLOBAL INTERNET USAGE

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.

DDeegutla123

77% match

Loading thumbnail…

Line Chart

This line chart displays the annual number of Facebook users from 2008 to 2017. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG with labeled axes and a red, bold stroke. The data is loaded via `d3.csv` from a GitHub gist, with year values parsed into Date objects and user counts converted to numbers. The chart includes a title, axis labels, and grid lines styled via CSS.

RRupeshGandham

77% match

Loading thumbnail…

Internet Line chart

This chart shows the average time spent surfing the internet for different ages, using a line graph with individual data points marked by circles. It plots age on the x-axis against average hours on the y-axis. The visualization is built with D3 v7, using `d3.csv` to load data from a remote file, `d3.group` and `d3.mean` to aggregate the data by age, and `d3.line`, `scaleLinear`, and `axisBottom`/`axisLeft` to render the line, scales, and axes as SVG elements.

BBhanuGadde@my.unt.edu

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

76% match