D3.js Template

by k_sav

HTML

<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.bar {
  fill: steelblue;
}
.bar:hover {
  fill: brown;
}
.axis--x path {
  display: none;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}
.circle {
  fill: steelblue;
}

JavaScript

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


 var data = [
                    {
                        "month": "Jul",
                        "rate": "-1.697"
                    },
                    {
                        "month": "Aug",
                        "rate": "2.0212"
                    },
                    {
                        "month": "Sep",
                        "rate": "-5.374"
                    },
                    {
                        "month": "Oct",
                        "rate": "-7.5609"
                    },
                    {
                        "month": "Nov",
                        "rate": "-3.7344"
                    },
                    {
                        "month": "Dec",
                        "rate": "-1.4755"
                    },
                    {
                        "month": "Jan",
                        "rate": "-2.001"
                    },
                    {
                        "month": "Feb",
                        "rate": "-2.3581"
                    },
                    {
                        "month": "Mar",
                        "rate": "1.6865"
                    },
                    {
                        "month": "Apr",
                        "rate": "1.3401"
                    },
                    {
                        "month": "May",
                        "rate": "1.0605"
                    },
                    {
                        "month": "Jun",
                        "rate": "-0.3368"
                    }
                ]





  var line =...