Brush for data visualisation

Built with blockbuilder.org

Interview testing 1:

the SVG and its PNG files can be downloaded in client-side;
No matter how mach data there will be, using brush can extract them and represented on main graph area;
hoove on a specific item will show a information tips;
The graph chart can be reusable;
The Data is json which combined with drawing data and chart options.

forked from 1Cr18Ni9's block: Brush for data visualisation

forked from Thanaporn-sk's block: Brush for data visualisation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="TurncatingChart.js"></script>
  <link rel="stylesheet" href="style.css" />
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
<div id="cont1" class="container">
    <div class="inner">
        <span  class="menu">☰</span>
        <button class="saveSVG">Save as SVG</button>
        <button class="savePNG">Save as PNG</button>
    </div>
</div>
<canvas width="960" height="500" style="display:none"></canvas>
<script>
    d3.json('data1.json', function(error, rawData){
        if(error){ throw error };
        var myChart = TurncatingChart();
        var opt = rawData.option;
        // updata all data according to json
        for(var key in opt){
            if(myChart[key]) myChart[key](opt[key]);
        }
        d3.select('#cont1').datum(rawData.data).call(myChart);
    })

d3.selectAll(".saveSVG").on("click", svgURI);
    d3.selectAll(".savePNG").on("click", pngURI);

function svgURI(){
        var svg = d3.select(this.parentNode.parentNode)
            .select('svg');
        var imgsrc = svgData(svg);
        var a = document.createElement("a");
          a.download = "sample.svg";
          a.href = imgsrc;
              document.body.appendChild(a);
          a.click();
    }

function pngURI(){
        var svg = d3.select(this.parentNode.parentNode)
            .select('svg');
        var imgsrc = svgData(svg);
        var img = '<img src="'+ imgsrc +'">';
        // a canvas tag to be predefined in HTML
        var canvas = document.querySelector("canvas")
        canvas.width = svg.attr('width');
        canvas.height = svg.attr('height');
        var context = canvas.getContext("2d");

var image = new Image;
        image.src = imgsrc;
        image.onload = function() {
            context.drawImage(image, 0, 0);
            var canvasdata = canvas.toDataURL("image/png");
            // append a link tag then remove it when finished.
            var a = document.createElement("a");
            a.download = "sample.png";
            a.href = canvasdata;
            document.body.appendChild(a);
            a.click();
            // document.body.removeChild(a);
        };
    }

// extract svg content
    function svgData(svg){
        // source is the svg element in string
        var html = svg.node().innerHTML;
        html = "<svg width=" +
            '"' + svg.attr('width') + '"' +
            " height=" + '"' + svg.attr('height') + '"' +
            ' version="1.1" xmlns="https://www.w3.org/2000/svg">' +
            html +
            "</svg>"

var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
        console.log(html);
        return imgsrc;
    }

// window.btoa(unescape(encodeURIComponent(html)));
</script>
</body>

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