Old school D3 from simpler times

All examples By author By category About

tomshanley

Full window Github gist

Spread operator for reading an array

Example of using Spread Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Built with blockbuilder.org

forked from tomshanley's block: Spread operator for reading an array

forked from tomshanley's block: Spread operator for reading an array

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <p>Trying out blockbuilder and spreadoperator</p>
  <div id="viz"></div>
  <script>
    
    var data = [80, 50, 60];
    var gap = 250;
    var indent = 100;
    
    var max = Math.max(...data); //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
    
    var circleScale = d3.scale.sqrt().domain([0, max]).range([0, 50]); //https://animateddata.co.uk/articles/d3/scales/
    
   	var svg = d3.select("#viz").append("svg");
    
    svg.selectAll("circle")
    		.data(data)
    		.enter()
    	.append("circle")
      	.attr("cy", 100)
   			.attr("cx", function(d, i) {return (i * gap) + indent ;})
    		.attr("r", function(d) {return circleScale(d) ;})
      	.style({ fill: "#a72d1a"})
      	.transition().duration(3000).ease("bounce")
      	.style({ fill: "#5db9e3"});

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <p>Trying out blockbuilder and spreadoperator</p>
  <div id="viz"></div>
  <script>
    
    var data = [80, 50, 60];
    var gap = 250;
    var indent = 100;
    
    var max = Math.max(...data); //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
    
    var circleScale = d3.scale.sqrt().domain([0, max]).range([0, 50]); //https://animateddata.co.uk/articles/d3/scales/
    
    var svg = d3.select("#viz").append("svg");
    
    svg.selectAll("circle")
            .data(data)
            .enter()
        .append("circle")
        .attr("cy", 100)
            .attr("cx", function(d, i) {return (i * gap) + indent ;})
            .attr("r", function(d) {return circleScale(d) ;})
        .style({ fill: "#a72d1a"})
        .transition().duration(3000).ease("bounce")
        .style({ fill: "#5db9e3"});
​
    
  </script>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js