My Line Chart

100%

✓ Published1🌍 Public

Last edited Jun 15, 2021

Created on Jun 15, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

75% match

Loading thumbnail…

Fork of line chart section 3

This chart displays the number of smartphone users from 2010 to 2021 as a single blue line, with red tick labels and green gridlines. It loads CSV data from a GitHub gist and uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG graphic. The data is parsed with d3.timeParse for the year and numeric conversion for user counts, with margins and axis labels formatted via CSS.

PPallaviManupati

74% match