Skip to main content
100%

Class: Line Graph

✓ Published0🌍 Public
VVirginiaHNg
Last edited Jun 27, 2017
Created on Jun 27, 2017

A smooth line graph plots five points from a hardcoded dataset, connecting them with a curved basis spline. The visualization uses D3 v4’s `d3.line` generator with `d3.curveBasis`, mapping the x- and y-coordinates through `d3.scaleLinear` domains of 0–100 to an SVG canvas sized 960×500. The single path element receives its `d` attribute from the generated line data, rendered with a grey stroke of width 5 and no fill.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Class: Area Graph

This example shows an area chart created from five data points, with a smooth curved boundary filling the space between the baseline and the data values. The visualization uses D3 v4 to render an SVG path, mapping x and y coordinates through linear scales. The `d3.area()` generator sets the baseline at y=0 and defines the upper boundary using a basis curve for smooth interpolation. The code appends a single path element with the generated `d` attribute, producing a gray, thick-stroked filled region that visually represents the trend across the dataset.

VVirginiaHNg
82% match
Loading thumbnail…

D3 v4 Line Chart

This example shows a basic line chart built with D3 v4, plotting a randomly generated dataset of 21 points against a linear x-axis and y-axis. The visualization uses an SVG canvas and follows the standard margin convention, with the line rendered via the `d3.line()` generator and a `curveMonotoneX` smoothing curve. Axis components are created using `d3.axisBottom` and `d3.axisLeft`, while circles representing each datapoint are appended using the `enter().append()` method. The chart demonstrates core D3 data-binding and scale APIs within a minimal, self-contained HTML file.

663anp3ca
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
76% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates how to render a simple line chart with D3.js, plotting five data points that form a gentle, non-monotonic curve. The visualization builds a path element using the `d3.line` generator, which maps x- and y-coordinates through scales to position the line within the SVG. The line is styled with a steelblue stroke, no fill, and is appended directly to an SVG container. The code relies on the core D3 v3 API, including the `line()` generator and append/datum methods, without any additional libraries or interactive behaviors.

Aanilthapa1.at23@gmail.com
75% match
Loading thumbnail…

simple line chart from dataset

A simple SVG line chart plots monthly values from an 11-point JSON dataset, with a black polyline, labeled x-axis dates, and a large final-value annotation. The visualization adds interactivity through gray circular markers at each data point; hovering a circle turns it red, reveals its value, and displays a vertical dashed guide line. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with mouseover and mouseout events controlling opacity and stroke transitions. Animation effects appear via `transition().duration(300)` when changing marker color and opacity.

GGaret005
75% match
Loading thumbnail…

simple line chart from dataset

A simple SVG line chart displays seven monthly data points from a local JSON dataset, plotting date against value. The D3 v4 code uses `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Circles mark each point, with hover effects changing their color to red and showing the same value label already displayed above each dot. The final value appears in larger text at the line’s end, while month labels sit below the chart.

EElisaDnr
74% match
Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr
74% match
Loading thumbnail…

test

A line chart displays five data points, connected by a smooth basis-closed curve, within a zoomable and pannable SVG stage. The visualization uses React to manage the interface and D3 for scaling, curve generation, and the zoom interaction. The `d3.zoom` API, applied via a selection, updates a transform state that repositions and scales the chart group. The chart itself renders as a single path element, with its coordinates mapped through linear scales, against a plain background.

Ppsabela
74% match