D3.js Template

by Neeraj

HTML

<svg></svg>
<p>My name is neeraj</p>
<p>My name is Niel</p>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background: #ffd;
}
svg {
    width : 400px;
    height: auto;
}

JavaScript

var svg = d3.selectAll('svg');

var dataSet = [10, 20, 30, 40, 50];

svg.selectAll('circle')
    .data([10, 50, 70, 90])
    .enter().append('circle')
    .attr({
    r: function (d) {
        return Math.sqrt(d);
    },
    cx: function (d, i) {
        return i * 100 + 50;
    },
    cy: 50,
    fill: 'blue'
});





d3.select("body").selectAll("p")
    .data([4, 12, 13, 45])
    .enter().append("p")
//.exit().remove()
//.update().append("p")
.text(function (d, i) {
    return "I’m number " + d + " and index value is" + i + "!";
});

d3.selectAll("p").style("color", function () {
    return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
/* making a bar chart */

var svgD = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 100);

svgD.selectAl("rect")
    .data(dataSet)
    .enter()
    .append("rect")
    .attr("x", function (d, i) {
    return i * d;
})
    .attr("y", function (d, i) {
    return d;
});