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>
            <div style={{width: 800}}>
            <svg style={{border: '1px solid black'}} id="viz" width="800" height="800">

            </svg>
            </div>

JavaScript

var svg = d3.select("#viz")
        var width = svg.attr("width");
        var height = svg.attr("height");

        var testLayer = svg.append('g');     
        var aRect = testLayer.append("rect")       // attach a rectangle
        .attr("x", 0)         // position the left of the rectangle
        .attr("y", 0)          // position the top of the rectangle
        .attr("height", 800)    // set the height
        .attr("width", 800)   // set the width
        .attr("fill", 'green');
        
        var aCircle = testLayer.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 200)
        .attr("cy", 200)
        .on("mousedown", zoomToMe);

        function zoomToMe(){
            console.log("do the zoom")
        }

        var zoom = d3.zoom()
        .scaleExtent([.5, 40])
        .translateExtent([[0, 0], [width, height]])
        .on("zoom", zoomed);

        svg.call(zoom);

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

        svg.on("click", function() {
            var coords = d3.mouse(this);
        })