training

100%

✓ Published0🌍 Public

Last edited Nov 10, 2016

Created on Nov 10, 2016

A data plot shows a polyline connecting five fixed data points across a Cartesian coordinate system. The chart maps x and y values through d3.scaleLinear, with the line rendered using d3.line and styled with a steelblue stroke. The SVG canvas is generated by appending an SVG element to the body via d3.select, and the data is loaded directly from a JavaScript array using d3.data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Page Template

This example demonstrates a simple SVG line chart template using D3.js, where a red polyline connects six data points across a 500x400 canvas. The visualization shows a basic yet effective pattern for plotting series data, with points positioned at varying y-coordinates to create a descending then ascending trend. The code relies on D3 v7 loaded via CDN and constructs the line using an SVG path element with the `d` attribute, specifying coordinates through a path string. The `stroke` and `stroke-width` attributes control the visual styling, while `fill="none"` keeps the area under the curve transparent. This serves as a minimal starting template for building more complex D3 visualizations in plain HTML.

RRona Xu

77% 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…

Line Chart

This line chart shows a jagged polyline connecting five points across a white canvas, with a single black stroke of 20-pixel width tracing an upward and downward path. The chart is rendered as static SVG markup directly in the HTML, using a `path` element with explicit coordinates and a `rect` background. No JavaScript libraries are involved; the example relies on raw SVG geometry and minimal CSS for text styling, with an unused `index.js` that merely logs a message.

Iibaird6@gatech.edu

75% 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…

Simple line graph in d3.js

This simple line graph visualizes a small dataset of numeric date-value pairs loaded from a CSV file. It shows a single steel-blue polyline plotted against linear x and y axes, with five ticks per axis. The example uses d3.js v3 to parse the CSV, apply linear scales, and render the chart as SVG. It defines axes with d3.svg.axis and constructs the line path with d3.svg.line, demonstrating core D3 data-binding and scaling techniques for teaching purposes. The graph focuses on the essential structure of a D3 chart without additional interactivity or annotations.

MMNoichl

74% match

Loading thumbnail…

basic line

This example displays a simple line chart rendered as an SVG path using data from an inline JavaScript array. The visualization employs a call to `d3.axis` for the x- and y-axes and uses `d3.attRail` to map the data points to a polyline via `d3.line`. The chart is drawn with default styling, and the `d3.select` selection method is used to apply a stroke to the path.

RRobinL

72% match

Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

CCaged

72% match

Loading thumbnail…

Viz - Line - Default

This example shows a simple line chart rendered as an SVG polyline, with four data points plotted on a 960×500 canvas. The line uses a steelblue stroke and a slight transform offset, displaying the default styling of the viz.line API from the Viz.js library. The code loads D3 v4 and Viz.js 1.3.0, then passes an array of objects—each containing a key and value—to the viz.line function via the d3.select("g").call(...) method, producing the minimal line visualization.

NNPashaP

72% match