Skip to main content
SimilarExport ZIP
100%

line chart

✓ Published0🌍 Public
JJefferson Abreu
Last edited Jul 23, 2019
Created on Jul 18, 2019
Forked from Hello VizHub

A line chart plots the win-difference values of eight Overwatch teams over time, with each team labeled on the x-axis and the numeric difference on the y-axis. The chart uses a black, five-pixel-wide stroke to connect the data points, which are loaded from a CSV file. The visualization is built with d3.v5, using `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `line` to generate the path, with axes added via `axisBottom` and `axisLeft`.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example displays a horizontal bar chart of Overwatch team match times, with each bar’s length proportional to its numeric difficulty value. Hovering a bar highlights it with a black stroke and logs the team name to the console. It uses d3.scaleLinear and d3.scaleBand for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.csv to load the dataset. The SVG renders through d3 selections, with mouseover and mouseout events triggering an onHover callback that updates the chart state.

JJefferson Abreu
73% match
Loading thumbnail…

Making a Multiline Chart

Eight weeks of simulated playoff power rankings are shown as eight colored, semi-transparent lines, one per team, across the x-axis (week) and y-axis (power rank). Hovering over a line thickens it and increases its opacity. Built with D3 v5, it uses `d3.line()`, `d3.nest()`, `d3.scaleOrdinal()`, and a custom legend from `d3.axisLeft()` calls, reading the `data.csv` file. Lines are drawn as SVG paths, and hover effects use D3's `.transition()` for animation.

HHirsh Gupta
70% match
Loading thumbnail…

Fork of Line graph

This interactive line graph visualizes the historical win rates of NBA teams from 2010-11 through 2021-22, with the x-axis representing the season year and the y-axis showing each team’s winning percentage. A dropdown menu lets the viewer highlight one of 30 teams, whose line is drawn in red while the others remain black. Built with D3 v7, the visualization uses `scaleTime` and `scaleLinear` for axes, `line` for path generation, and a `join` pattern for updating SVG elements on state changes. The data is loaded from a CSV file parsed with `csvParse`.

QQingyang Wang Profolio
70% match
Loading thumbnail…

Multi-Series Line Chart

Two teams’ cumulative run totals are tracked across twenty overs, with each team rendered as a distinct colored line. The chart uses D3.js v4 to build an SVG scene, mapping overs to the x-axis and runs to the y-axis. The data is drawn from a hardcoded array, and an animated redraw on window resize re-renders the entire visualization. A legend identifies each team, and the code leverages d3.scaleOrdinal, d3.line, and d3.axisBottom to construct the graphic.

CChandrakantThakkarDigiCorp
69% match
Loading thumbnail…

Winrates

A small multiples chart displays winrates for a game, comparing opponents across a series of matches. Colored lines with smooth curves represent each opponent, and the legend maps colors to opponent names. The D3 code loads tab-separated data from a GitHub gist, uses `d3.line` with `curveBasis` for smoothing, and `d3.nest` to group by opponent. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and a custom `colorLegend` function draws the color key.

Ddbdr
69% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top six Dota 2 teams by earnings, using custom tick formatting that abbreviates large numbers with an “s” prefix and then converts “G” to “B” to show values in billions. The chart removes axis domains and gridlines from the y-axis while adding a custom axis label and title. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG. The data comes from a local CSV file with team names and earnings.

PPushkov Fedor
69% match
Loading thumbnail…

Line Charts

Two line charts display board game ratings from 2016 to 2020, comparing the number of ratings for games like Catan, Dominion, and Codenames across monthly dates. The example loads D3 v5 via a script tag and uses `d3.csv` to parse the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate SVG paths. Each game gets a distinct color from `d3.schemeCategory10`, with labels placed at the end of each line.

Oolin8
69% match
Loading thumbnail…

line chart time data

This line chart visualizes time-series data from a CSV file, plotting daily values over a period from late 2017 to mid-2018. Two distinct series are shown, with the primary line appearing nearly flat around 2,055,322 and a secondary series appearing later with slightly higher values. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart, with circles marking individual data points.

Oovalli
68% match