Old school D3 from simpler times

All examples By author By category About

hsuttong

Full window Github gist

d3 first svg

Working though the Frontend Masters d3js series. Built with blockbuilder.org

d3js data bind using reddit/r/pics.json as data.
This works in blockbuilder but not in bl.ocks.org, why?

forked from hsuttong's block: d3 first transition

<!DOCTYPE html>
<head>
  <meta charset="utf-8"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/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>
  <script>
    var margin = {top: 14, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
   
    var svg = d3.select("body").append("svg")
    	.attr("width", width + margin.left + margin.right)
    	.attr("height", height + margin.top + margin.bottom)
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var g = svg.append('g')
    	.attr("transform", "translate(0, -82)");
   
    var data = [];
   	d3.json("pics.json", function(error, d){
      if (error) throw error;
      
    	data = d.data.children; //tricky, narrow to the children arr b4 assignment
    });
      
   
    //create our circle souls
    d3.select('svg g').selectAll('circle')
    .data(data)
    .enter().append('circle')
    	.attr({
    		cx: function(d, i){ return (80 + i * 27) },
        cy: function(d, i){ return d.data.score },
      	r: 10
    	});
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/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>
  <script>
    var margin = {top: 14, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
   
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    var g = svg.append('g')
        .attr("transform", "translate(0, -82)");
   
    var data = [];
    d3.json("pics.json", function(error, d){
      if (error) throw error;
      
        data = d.data.children; //tricky, narrow to the children arr b4 assignment
    });
      
   
    //create our circle souls
    d3.select('svg g').selectAll('circle')
    .data(data)
    .enter().append('circle')
        .attr({
            cx: function(d, i){ return (80 + i * 27) },
        cy: function(d, i){ return d.data.score },
        r: 10
        });
  </script>
</body>
    

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