d3 v4 tutorial

A basic d3.v4 tutorial explaining how to create a simple chart binding to data

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="viz" width="400" height="400" />

JavaScript

var zoom = d3.zoom()
        .scaleExtent([0.3,2])
        .on("zoom", zoomed);

        var svg = d3.select("#viz")

        var width = svg.attr("width");
        var height = svg.attr("height");
        
        var zoomer = svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .call(zoom);
           
        var g = svg.append("g");

        var aCircle = g.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 200)
        .attr("cy", 200)
        .on("mousedown", () => centerNode(200, 200));

        var bCircle = g.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 400)
        .attr("cy", 400)
        .on("mousedown",  () => centerNode(400, 400));

        var cCircle = g.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 600)
        .attr("cy", 600)
        .on("mousedown",  () => centerNode(600, 600));

        function zoomed() {
        g.attr("transform", d3.event.transform);
        }

        function centerNode(xx, yy){
        g.transition()
        .duration(500)
        .attr("transform", "translate(" + (width/2 - xx) + "," + (height/2 - yy) + ")scale(" + 1 + ")")
        .on("end", function(){ zoomer.call(zoom.transform, d3.zoomIdentity.translate((width/2 - xx),(height/2 - yy)).scale(1))});
        }