Fork of My Line Chart

100%

Fork of My Line Chart

✓ Published0🌍 Public

Last edited Jun 15, 2021

Created on Jun 15, 2021

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.

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

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

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

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

80% match

Loading thumbnail…

Fork of linechart

This example visualizes world population trends from 2010 to 2020 with a single line chart, mapping years on a time-scaled x-axis and population values on a linear y-axis. The SVG rendering uses d3.scaleTime and d3.scaleLinear to position data points, while d3.axisBottom and d3.axisLeft generate gridlines and tick labels. A d3.line generator creates the violet path connecting the parsed CSV data, which loads from a GitHub Gist. Custom CSS styles the axes, ticks, and labels with distinct colors for readability.

Aaashrithd4

79% match

Loading thumbnail…

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

0057SatvikDamera

79% match

Loading thumbnail…

Fork of Line chart

This line chart visualizes yearly sales data from a remote CSV file, mapping time on the x-axis and sales values on the y-axis. The code uses D3 v7’s `d3.csv` to load and parse data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.line` to generate a steelblue path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with custom formatting for years, and the SVG output is sized 800 by 400 pixels. The visualization demonstrates a clean, minimal line chart with labeled axes and no interactivity.

Mmadipadiga.raviteja@gmail.com

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

78% match