Old school D3 from simpler times

All examples By author By category About

elangobharathi

Full window Github gist

pie chart

Built with blockbuilder.org

forked from sxywu's block: Selections: Data example

forked from sxywu's block: Selections: Enter example

forked from sxywu's block: Selections: Scale example

forked from sxywu's block: FEM: Exercise 1

forked from sxywu's block: FEM: Exercise 1 starter

forked from elangobharathi's block: Bar chart with x and y axis

forked from elangobharathi's block: Line chart with x and y axis

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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>
  <svg></svg>
  <script>  
    var city = 'New York';
    var margin = {top: 20, bottom: 20, left: 40, right: 20};
    var width = 800 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;

var svg = d3.select('svg')
    	.attr('width', width + margin.left + margin.right)
    	.attr('height', height + margin.top + margin.bottom);
    
    var chart = svg.append('g')
    	.attr('transform', 'translate (' + [200, 200] + ')');
    
    debugger;
    var colors = d3.scaleOrdinal(d3.schemeCategory10);
    var data = [1, 1, 2, 3, 5, 8, 13, 21];
    var pies = d3.pie()(data);
    console.log(pies[0]);
    
    var arc = d3.arc()
    	.innerRadius(0)
    	.outerRadius(150)
    	.startAngle(function(d) { return d.startAngle})
    	.endAngle(function(d) { return d.endAngle});

chart.selectAll('path')
    	.data(pies)
    	.enter()
    	.append('path')
    	.attr('d', function(d) { return arc(d); })
    	.attr('fill', function(d) { return colors(d.value); })
    	.attr('stroke', 'white');
    
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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>
  <svg></svg>
  <script>  
    var city = 'New York';
    var margin = {top: 20, bottom: 20, left: 40, right: 20};
    var width = 800 - margin.left - margin.right;
    var height = 400 - margin.top - margin.bottom;
​
    
    var svg = d3.select('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom);
    
    var chart = svg.append('g')
        .attr('transform', 'translate (' + [200, 200] + ')');
    
    debugger;
    var colors = d3.scaleOrdinal(d3.schemeCategory10);
    var data = [1, 1, 2, 3, 5, 8, 13, 21];
    var pies = d3.pie()(data);
    console.log(pies[0]);
    
    var arc = d3.arc()
        .innerRadius(0)
        .outerRadius(150)
        .startAngle(function(d) { return d.startAngle})
        .endAngle(function(d) { return d.endAngle});
​
     
        chart.selectAll('path')
        .data(pies)
        .enter()
        .append('path')
        .attr('d', function(d) { return arc(d); })
        .attr('fill', function(d) { return colors(d.value); })
        .attr('stroke', 'white');
    
  </script>
</body>
​
    

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