D3 Examples - homework

xxxxxxxxxx
 
​
<!DOCTYPE html>
<html>
 <head>
    <title>Bar Transition Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="bar.js"></script>
​
    <style type="text/css">
        #demo { 
            float: left;        
        }
        #vimeo {
            padding: 40px;
            float: left;
        }
   #data1 {
    width:85px;
    height:85px;
    background:#f4f4f4;
    box-shadow:2px 2px 8px #aaa;
    font:bold 13px Arial;
    border-radius:50%;
    color:#555;
}
      #data2 {
    width:85px;
    height:85px;
    background:#fafafa;
    box-shadow:2px 2px 8px #aaa;
    font:bold 13px Arial;
    border-radius:50%;
    color:#555;
}
   #random {
    width:97px;
    height:97px;
    background:#00ccb4;
    font:bold 14px Arial;
    border-radius:50%;
    border:none;
    color:#080046;
}
    </style>
 </head>
 <body>
​
    <div id="demo">
        <div id="buttons">
        <button id="data1"> transaction vers donnée 1 </button>
        <button id="data2"> transaction vers donnée 2 </button>
        <button id="random"> Donnée aléatoire </button>
        <input id="num" value=15></input>
        </div>
   <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" id="svg"></svg>
    </div>
​
    <script type="text/javascript">
var data1 = [ 94, 24, 65, 30, 83, 22, 17, 9]
​
var data2 = [ 32, 70, 45, 84, 19, 39, 93]
​
function random(n)
{
    val = []
    for(i = 0; i < n; i++)
    {
        val.push(Math.random() * 100)
    }
    return val
}
      var w = 350
      var h = 350
​
​
function bars(data)
{
​
    max = d3.max(data)
​
  
    x = d3.scale.linear()
        .domain([0, max])
        .range([0, w])
​
    y = d3.scale.ordinal()
        .domain(d3.range(data.length))
        .rangeBands([0, h], .2)
​
​
    var vis = d3.select("#barchart")
  
    var bars = vis.selectAll("rect.bar")
        .data(data)
​
  
    bars
        .attr("fill", "#8f00ef")
        .attr("stroke", "#3b00ff")
​
   
    bars.enter()
        .append("svg:rect")
        .attr("class", "bar")
        .attr("fill", "#fff070")
        .attr("stroke", "#003d89")
​
​
    //exit 
    bars.exit()
    .transition()
    .duration(300)
    .ease("exp")
        .attr("width", 0)
        .remove()
​
​
    bars
        .attr("stroke-width", 4)
    .transition()
    .duration(300)
    .ease("quad")
        .attr("width", x)
        .attr("height", y.rangeBand())
        .attr("transform", function(d,i) {
            return "translate(" + [0, y(i)] + ")"
        })
​
}
​
​
function init()
{
    var svg = d3.select("#svg")
        .attr("width", w+100)
        .attr("height", h+100)
    svg.append("svg:rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("stroke", "#000")
        .attr("fill", "none")
​
    svg.append("svg:g")
        .attr("id", "barchart")
        .attr("transform", "translate(50,50)")
    
    
    d3.select("#data1")
        .on("click", function(d,i) {
            bars(data1)
        })   
    d3.select("#data2")
        .on("click", function(d,i) {
            bars(data2)
        })   
    d3.select("#random")
        .on("click", function(d,i) {
            num = document.getElementById("num").value
            bars(random(num))
        })   
​
    bars(data1)
}
     
    
    init();
      
    </script>
​
   
 </body>
</html>
​
​
​
​
    