D3 Examples - d3

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3xter test</title>  
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
    <script src="lib.js" charset="utf-8"></script>
​
    <style>
        body {font-family: monospace; line-height: 160%; font-size: 18px; }
        svg path, svg line {
          fill: none;
          stroke: black;
        }
        svg text {
          font-size: 11px;
        }
    </style>
</head>
<body>
    <div id='elementID'></div>
    <script type="text/javascript">
​
      var x = [-0.8234, 0.0952, 1.9594, -0.2831, -0.4147, 1.5859, 0.5326, 0.0925, 0.3293, 1.3635, 0.3396, 0.0677, -0.6739, 0.4084, -1.4487, -0.1101, -0.7521, -1.2118, 1.7191, 0.2020, -0.1573, -0.2298, -0.8230, 1.7924, 0.4511];
      var y = [-1.4166, 1.353, -0.6294, 0.0567, 1.4157, 0.32806, 0.2377, -0.2262, -1.0602, -1.8150, 0.1075, -1.3516, 1.0137, 0.0183, -0.5466, 0.6416, -0.6655, 0.6874, -0.4616, -0.2808, 1.3443, -1.0518, -0.1332, -1.0097, 0.3643];
      var z  = [1.1011, 0.8724, -1.5972, -0.2027, -1.2296, -0.0543, 0.2415, 0.3584, 1.0202, -1.7524, -0.6787, 0.8113, 0.0206, -1.9769, 1.2008, 1.0440, 1.0141, -0.6452, -0.6115, 0.6687, 2.9415, -1.1146, -1.2889, -0.2562, -1.1781];
​
​
      var config = {
        xLab: 'random x-values', //x-axis label (defaults to '')
        yLab: 'random y-values', //y-axis label (defaults to '')
        selector: '#elementID', //Selector for DOM element to append the plot to (defaults to < body >)
        width: 900, //pixel width (defaults to 500)
        height: 500, //pixel height (defaults to 500)
​
        //size and sizeLab are used in bubble charts like the top-right example.
        size: z, //array of numeric values which map to sizes of the circles plotted at the corresponding x-y point (defaults to undefined for a standard scatter)
        sizeLab: 'random size values' //label for size values (defaults to '')
      }
​
      var scatter = scatter(x,y,config);
​
      //modify the color of the circles with D3 syntax
      scatter.selectAll('circle').style('fill','#EE3124');
​
    </script>
</body>
</html>
</html>
​
    