%%html
<div id="d3-lab">

%%javascript

require.config({paths: {d3: "/files/d3.v3.min"}});

require(["d3"], function(d3) {
  d3.select("#d3-lab").append("b").text("My insanely cool visualization.");
});

%%html
<div id="d3-bind">

%%javascript

require.config({paths: {d3: "/files/d3.v3.min"}});

require(["d3"], function(d3) {
  //Setup local variables.
  var w = 500;
  var h = 100;
  var barPadding = 1;
    
  //Set up our dataset.
  var dataset = [15,12,21,42,12,10,1];
    
  //Create an svg element that's w x h in size.
  var svg = d3.select("#d3-bind")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
  //Bind our data to SVG and create a rectangle for each one
  //This is where the magic happens!
  var bars = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect");
    
  //For each bar, set its attributes as a function of its position
  //in the dataset and 
  bars.attr("x", function(d, i) { return i * (w / dataset.length); })
    .attr("y", function(d) { return h - (d * 4); })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) { return d * 4; })
    .attr("fill", "teal");
});

%%html
<div id="d3-scale">

%%javascript

require.config({paths: {d3: "/files/d3.v3.min"}});

require(["d3"], function(d3) {
  //Setup local variables.
  var w = 500;
  var h = 400;
  var barPadding = 20;
  var padding = 50;
    
  //Set up our dataset.
  var dataset = [15,12,21,42,12,10,5,85];
    
  //Define your scales here
  var xScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([padding,(w-padding)]); 
    
  var widthScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([0, (w-2*padding)]);  
    
  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([h-padding,padding]);

  var heightScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0,h-2*padding]);
    
  //Create an svg element that's w x h in size.
  var svg = d3.select("#d3-scale")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
  //Bind our data to SVG and create a rectangle for each one
  //This is where the magic happens!
  var bars = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect");
    
  //For each bar, set its attributes as a function of its position
  //in the dataset and its value.
  bars.attr("x", function(d, i) { return xScale(i); })
    .attr("y", function(d) { return yScale(d); })
    .attr("width", widthScale(0.8))
    .attr("height", function(d) { return heightScale(d); })
    .attr("fill", "teal");
});

%%html
<div id="d3-update">

%%javascript

require.config({paths: {d3: "/files/d3.v3.min"}});

require(["d3"], function(d3) {
  //Setup local variables.
  var w = 500;
  var h = 400;
  var barPadding = 20;
  var padding = 50;
    
  //Set up our dataset.
  var dataset = [ 15, 12, 21, 42, 12, 10, 5, 85 ];
    
  //Define your scales here
  var xScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([padding,(w-padding)]); 
    
  var widthScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([0, (w-2*padding)]);  
    
  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([h-padding,padding]);

  var heightScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0,h-2*padding]);
    
  //Clear out old content, then create an svg element that's w x h in size.
  d3.select("#d3-update").selectAll("*").remove();  
    
  var svg = d3.select("#d3-update")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
  //Bind our data to SVG and create a rectangle for each one
  //This is where the magic happens!
  var bars = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect");
    
  //For each bar, set its attributes as a function of its position
  //in the dataset and 
  bars.attr("x", function(d, i) { return xScale(i); })
    .attr("y", function(d) { return yScale(d); })
    .attr("width", widthScale(0.8))
    .attr("height", function(d) { return heightScale(d); })
    .attr("fill", "teal");
    
  //Add a text element to our div
  d3.select("#d3-update").append("p").text("Click here to update our data.")
  
  //On click, update with new data.
  d3.select("#d3-update").select("p")
    .on("click", function() {

        //New values for dataset
        dataset = [ 11, 12, 62, 20, 18, 17, 16, 18 ];

        //Update all rects
        svg.selectAll("rect")
           .data(dataset)
           .attr("y", function(d) {
                return yScale(d);
           })
           .attr("height", function(d) {
                return heightScale(d);
           });

    });
});

%%html
<div id="d3-interactive">

%%javascript

require.config({paths: {d3: "/files/d3.v3.min"}});

require(["d3"], function(d3) {
  //Setup local variables.
  var w = 500;
  var h = 400;
  var barPadding = 20;
  var padding = 50;
    
  //Set up our dataset.
  var dataset = [ 15, 12, 21, 42, 12, 10, 5, 85 ];
    
  //Define your scales here
  var xScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([padding,(w-padding)]); 
    
  var widthScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([0, (w-2*padding)]);  
    
  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([h-padding,padding]);

  var heightScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0,h-2*padding]);
    
  //Clear out old content, then create an svg element that's w x h in size.
  d3.select("#d3-interactive").selectAll("*").remove();  
    
  var svg = d3.select("#d3-interactive")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
  //Bind our data to SVG and create a rectangle for each one
  //This is where the magic happens!
  var bars = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect");
    
  //For each bar, set its attributes as a function of its position
  //in the dataset and 
  bars.attr("x", function(d, i) { return xScale(i); })
    .attr("y", function(d) { return yScale(d); })
    .attr("width", widthScale(0.8))
    .attr("height", function(d) { return heightScale(d); })
    .attr("fill", "teal");
    
  //Create a tooltip.
  var tip = d3.select("#d3-interactive")
    .append("div")
    .attr("id", "tooltip");
    
  tip.append("p")
    .attr("id", "value")
    .style("text-align", "center");
  
  tip.style("width", "30px")
    .style("background-color", "white")
    .style("position", "absolute")
    .style("border", "2px solid");
  
  
  
  //Your code for the DIY goes here.
});