Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


d3lines is a JavaScript library to display simple line charts on your website. D3 is an amazing data visualization library that allows you to display data with stunningly beautiful visuals. But sometimes, what you need to display can be very simple, like a line chart. This is where d3lines can help. d3lines is a simple wrapper around D3 that allows you to create a beautiful line chart with just a few lines of codes. It is designed for simplicity.



Because d3lines uses D3.v3, you need to include the following script:

<script src="" charset="utf-8"></script>

Then, once you download d3lines, just include the script on your page:

<script src="d3lines.js"></script>

or the minified version:

<script src="d3lines.min.js"></script>

To link directly to the latest release, you can use this script:

<script src=""></script>

or for the minimized version:

<script src=""></script>

Getting started with your first chart

First, make sure you have an svg tag on your webpage. For example:

<!DOCTYPE html>
<html lang="en">
    <link href=',400italic,300,400' rel='stylesheet' type='text/css'>
    <script src="" charset="utf-8"></script>
    <script src="d3lines.js"></script>
        svg {
            font-family: 'Open Sans', Palatino;
            font-weight: 300;
    <svg id="main-svg"></svg>

Then, you need some data to display. For example:

var data = [{x: 0, y: 0},
            {x: 0.262, y: 0.259},
            {x: 0.524, y: 0.5},
            {x: 0.785, y: 0.707},
            {x: 1.047, y: 0.866},
            {x: 1.309, y: 0.966},
            {x: 1.571, y: 1},
            {x: 1.833, y: 0.966},
            {x: 2.094, y: 0.866},
            {x: 2.356, y: 0.707},
            {x: 2.618, y: 0.5},
            {x: 2.88, y: 0.259},
            {x: 3.142, y: 0},
            {x: 3.403, y: -0.259},
            {x: 3.665, y: -0.5},
            {x: 3.927, y: -0.707},
            {x: 4.189, y: -0.866},
            {x: 4.451, y: -0.966},
            {x: 4.712, y: -1},
            {x: 4.974, y: -0.966},
            {x: 5.236, y: -0.866},
            {x: 5.498, y: -0.707},
            {x: 5.76, y: -0.5},
            {x: 6.021, y: -0.259},
            {x: 6.283, y: -0}];

And finally, here is the code to make the plot:

// Select the svg tag where you want the plot to appear
var svg ="#main-svg");

var options = {
    // Specify what data you are plotting
    data: data,
    // Specify which of the two data `keys` ("x" or "y" in this case but it could be anything) will appear on the x-axis
    xkey: "x",

// Make the plot
d3lines.plot(svg, options);

That's it!! It's that simple. You have a beautiful plot on your webpage, the rest is just tweaking a few options to make it look exactly the way you like it.


A JavaScript library to display simple line charts







No releases published


No packages published