Skip to main content
SimilarExport ZIP
100%

D3 v4 Line Chart

✓ Published0🌍 Public
663anp3ca
Last edited Oct 31, 2018
Created on Oct 31, 2018

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.

AI-generated description

D3 v4 Line Chart Example

This is a example for basic line chart using D3. We are using the newest version of D3, version 4. As for all visualizations, we can break down this work into a checklist.

Line Chart Checklist
  1. Add an SVG to draw our line chart on
  2. Use the D3 standard margin convetion
  3. Create an x axis
  4. Create a y axis
  5. Create an x scale
  6. Create a y scale
  7. Create a line generator
  8. Create a random dataset
  9. Create a path object for the line
  10. Bind the data to the path object
  11. Call the line generator on the data-bound path object
  12. Add circles to show each datapoint
  13. Add some basic styling to the chart so its easier on the eyes

Read through the code below to see where each part of the checklist is completed.

forked from <a href='http://bl.ocks.org/pstuffa/'>pstuffa</a>'s block: <a href='http://bl.ocks.org/pstuffa/26363646c478b2028d36e7274cedefa6'>D3 v4 Line Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca
82% match
Loading thumbnail…

simple line chart

This example shows a simple line chart that visualizes a randomly generated dataset of thirty points, with each point’s y-value incrementing by a random offset from the previous point. The chart displays the overall trend of the series, with a final value label and x-axis tick labels for each data index. The code uses D3 v3 to append an SVG, create linear scales for the x and y axes, and draw the line via `d3.svg.line()`. The data is generated inline using JavaScript’s `Math.random()` within a `d3.range()` map, and the chart is rendered as an SVG path with a black stroke.

BBrunoDumas
81% match
Loading thumbnail…

Untitled

This example renders a simple line chart with twenty-one randomly generated data points using D3 version 5. The chart uses `d3.scaleLinear` for both axes and `d3.line` with `d3.curveMonotoneX` smoothing to draw the line, while individual data points appear as circles. The SVG output is styled with CSS classes for the line and dots, and mouseover events log data to the console. The visualization demonstrates basic D3 plotting techniques without external data sources, relying on `d3.randomUniform` for its synthetic dataset.

EEvan Burchard
81% match
Loading thumbnail…

d3 v4 realtime line chart

A real-time line chart appends a new random data point every ten milliseconds, streaming it across a 500-pixel SVG canvas. The visualization displays both a raw path and a smoothed cardinal-curve version, with the x-axis domain shifting as new values arrive. The code uses d3.scaleLinear, d3.line, d3.axisBottom, and d3.curveCardinal from d3.v4, with d3.transition and d3.easeLinear animating the axis and path translations to create the continuous scrolling effect.

KKevinGutowski
81% match
Loading thumbnail…

Line Chart Method

This example demonstrates how to build a basic line chart using D3 v7. It plots a small dataset of five points with varying radii, rendering a single steelblue path using the `d3.line()` generator alongside axes created with `d3.axisLeft()` and `d3.axisBottom()`. The scales are defined with `d3.scaleLinear()` and `d3.extent()` to map data coordinates to the full browser viewport. Circle radii from the data are divided by 2.5 and stored in marks but are not rendered. The SVG output fills the entire window.

Fferneyhoughedward@gmail.com
80% match
Loading thumbnail…

Untitled

A line chart visualizes a dataset of 13 coordinate pairs, plotting dependent values against independent variables across a 500x400 SVG canvas. The example uses D3 v4 within a React framework to construct a linear chart with labeled axes, a title, and red circular markers. The code specifically employs `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a custom line generator via `d3.line` with monotone curve smoothing to connect the data points. The visualization is rendered entirely as SVG elements, with fixed margins and translated groups for positioning.

Nnamansinghal1420
80% match
Loading thumbnail…

first line chart

This example demonstrates a basic time-series line chart using D3.js version 4, plotting data points over a date range against numeric values. The visualization renders an SVG path with a thick orange stroke to represent the trend, while axes are drawn using D3’s `d3.axisBottom` and `d3.axisLeft`. The code loads tab-separated data via `d3.tsv` from an external URL, parses dates with `d3.timeParse`, and maps values using `d3.scaleTime` and `d3.scaleLinear`. The line is generated with `d3.line`, and the chart is positioned within a configured margin. The data source is a static TSV file, and the rendering is fully SVG-based.

335degrees
80% match
Loading thumbnail…

Untitled

A line chart displays 21 randomly generated data points as a smoothed orange curve, with dots marking each value along the x-axis. The visualization uses D3’s `d3.line` generator with `curveMonotoneX` for interpolation, while `d3.scaleLinear` maps the data index and random y-values to pixel coordinates. SVG circles are appended for each point, and mouseover events log the bound datum to the console, though no tooltip or interactive highlight is implemented. The chart includes x and y axes via `d3.axisBottom` and `d3.axisLeft`.

Hhaiyangwhy1015
80% match