Old school D3 from simpler times

All examples By author By category About

satacroteam

Full window Github gist

Projet

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">

<head>

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">

<style>
        .axis path {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: Lato;
            font-size: 13px;
        }
    </style>

</head>

<body>

<div class="container">

<div class="jumbotron">

<svg id="visualisation" width="1000" height="500"></svg>
            <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = [{
                        "sale": "202",
                        "year": "1"
                    }, {
                        "sale": "215",
                        "year": "2"
                    }, {
                        "sale": "179",
                        "year": "3"
                    }, {
                        "sale": "199",
                        "year": "4"
                    }, {
                        "sale": "134",
                        "year": "4"
                    }, {
                        "sale": "176",
                        "year": "6"
                    }, {
                        "sale": "189",
                        "year": "7"
                    }];
                    var data2 = [{
                        "sale": "152",
                        "year": "1"
                    }, {
                        "sale": "189",
                        "year": "2"
                    }, {
                        "sale": "179",
                        "year": "3"
                    }, {
                        "sale": "199",
                        "year": "4"
                    }, {
                        "sale": "134",
                        "year": "5"
                    }, {
                        "sale": "176",
                        "year": "6"
                    }, {
                        "sale": "197",
                        "year": "7"
                    }];
                    var vis = d3.select("#visualisation"),
                        WIDTH = 464,
                        HEIGHT = 360,
                        MARGINS = {
                            top: 20,
                            right: 20,
                            bottom: 20,
                            left: 50
                        },
                        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0, 7]),
                        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]),
                        xAxis = d3.svg.axis()
                        .scale(xScale),
                        yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left");
                    
                    vis.append("svg:g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                        .call(xAxis);
                    vis.append("svg:g")
                        .attr("class", "y axis")
                        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                        .call(yAxis);
                    var lineGen = d3.svg.line()
                        .x(function(d) {
                            return xScale(d.year);
                        })
                        .y(function(d) {
                            return yScale(d.sale);
                        })
                        .interpolate("basis");
                    vis.append('svg:path')
                        .attr('d', lineGen(data))
                        .attr('stroke', 'green')
                        .attr('stroke-width', 2)
                        .attr('fill', 'none');
                    vis.append('svg:path')
                        .attr('d', lineGen(data2))
                        .attr('stroke', 'blue')
                        .attr('stroke-width', 2)
                        .attr('fill', 'none');
                }
                InitChart();
            </script>
        </div>

</div>

</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js