Skip to main content
SimilarExport ZIP
100%

Line Chart

✓ Published0🌍 Public
RRicCheng
Last edited Sep 18, 2016
Created on Sep 18, 2016

This line chart displays a simple upward trend in y-values against x-values from 0 to 15, using a blue stroke with gridlines extending across the plot area. The chart is rendered as an SVG via D3 v3, with linear scales for both axes and axis components that use inner tick lines to create the grid. The data is hardcoded as an array of coordinate objects, and the line path is generated using `d3.svg.line` with axes oriented at the bottom and left.

AI-generated description

forked from <a href='http://bl.ocks.org/hunzy/'>hunzy</a>'s block: <a href='http://bl.ocks.org/hunzy/11110940'>Line Chart with Grid [D3]</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Line Chart - Trend

A line chart displays a quantitative trend over time, plotting five data points from 2018 to 2022 where values increase from 20 to 90. The SVG visualization uses d3.scaleLinear for both axes and a d3.line generator to create the blue stroked path. The chart includes labeled X and Y axes with tick marks, rendered using d3.axisBottom and d3.axisLeft. The code manually sets chart dimensions and margins, then appends the line and axes to a group element within the SVG canvas.

YYash Raj Mathur
83% match
Loading thumbnail…

Line Chart - Trend

This line chart displays a quantitative trend over time, plotting five yearly data points from 2018 to 2022, with values increasing from 20 to 90. The visualization renders in an SVG using D3 v7, with a linear x-scale for years and a linear y-scale for values. The code constructs the line path using `d3.line()`, applies axes via `d3.axisBottom()` and `d3.axisLeft()`, and labels the axes as "Year" and "Value," all within a 600×400 pixel canvas with specified margins.

Ggayathrisaxena23@gmail.com
81% match
Loading thumbnail…

Line Chart with Gridlines

This line chart displays a time series of closing values, with a smooth blue line connecting individual data points marked by red dots, overlaid on a light gray grid. The chart emphasizes the trend and distribution of values across the dates. The visualization is built with D3 v4, using an SVG renderer and D3's time scale for the x-axis and linear scale for the y-axis. It employs `d3.area` and `d3.line` to draw the area and line, while custom gridlines are generated via `d3.axisBottom` and `d3.axisLeft` with dashed strokes. The data is loaded from a tab-separated values file.

335degrees
78% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
77% match
Loading thumbnail…

Fork of Line Chart - Trend

This line chart shows a quantitative trend over time, plotting five data points from 2018 to 2022 where the value rises steadily from 20 to 90. The visualization uses D3 v7 within an HTML page, constructing an SVG with linear scales for both axes via `d3.scaleLinear` and `d3.extent`. The line is drawn as an SVG path using the `d3.line` generator, with a blue stroke. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, and the chart is labeled “Year” and “Value” on the respective axes.

Nnithinreddypinikesi@my.unt.edu
77% match
Loading thumbnail…

Line Chart

This example shows a line chart tracking score trends over time, using a blue stroke to connect data points across linear axes for time and score. It loads tab-separated data from a remote GitHub Gist via `d3.tsv`, parses the numeric fields, and renders the visualization with `d3.axisBottom` and `d3.axisLeft`. The line is drawn using `d3.line` with SVG `<path>` elements, while axis labels are added as SVG `<text>` nodes with rotated and anchored positioning.

TTejasriKari@my.unt.edu
77% match
Loading thumbnail…

Line Chart

This line chart shows monthly value trends across multiple years, with a smooth monotone curve plotted over time. The visualization uses D3.js v7, specifically the `d3.scaleTime` and `d3.scaleLinear` axes, and renders the line via `d3.line` with a `d3.curveMonotoneX` curve. Data is loaded from a CSV file using `d3.csv`, and the chart outputs to an SVG canvas with labeled axes and tick marks. The styling adheres to BBC-like color themes and font choices, though the core plot focuses on the steelblue line and its temporal variation.

LLikhitaMudagereShivaraj@my.unt.edu
76% match
Loading thumbnail…

Line chart_ static

A static line chart displays trends over time, plotting data points as circles connected by a path. The visualization uses React to render SVG elements, with D3 v5 utilities like `scaleLinear`, `extent`, and the `line` generator from `d3-shape` to map data coordinates. Axis components generate ticks and labels, while the `csv` loader fetches data from an external dataset. The chart includes axis labels and tooltips via SVG `<title>` elements, with styling applied through CSS classes.

NNYY
76% match