D3 Examples - Homework1.1

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Dsnap - Charts</title>
    <style>
    #xaxis .domain {
        fill:none;
        stroke:#000;
    }
    #xaxis text, #yaxis text {
        font-size: 12px;
    }
    </style>
</head>
<body>
    <div id="wrapper">
    </div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
    
    
    
        var hour= [, 0,1,2,3,5,6,8,9,10,11,13,14,15,16,17,18,19,20,21,22,23];
​
        var numRecords = [9,5,4,3,1,2,1,2,2,1,3,2,8,7,5,5,2,5,3,7,7];
​
​
​
        var grid = d3.range(25).map(function(i){
            return {'x1':0,'y1':0,'x2':0,'y2':470};
        });
​
        var tickVals = grid.map(function(d,i){
            if(i>0){ return i; }
            else if(i===0){ return "100";}
        });
​
        var xscale = d3.scale.linear()
                        .domain([0,10])
                        .range([0,722]);
​
        var yscale = d3.scale.linear()
                        .domain([0,hour.length])
                        .range([0,480]);
​
​
        var canvas = d3.select('#wrapper')
                        .append('svg')
                        .attr({'width':900,'height':550});
​
    
​
    
        var grids = canvas.append('g')
                          .attr('id','grid')
                          .attr('transform','translate(150,10)')
                          .selectAll('line')
                          .data(grid)
                          .enter()
                          .append('line')
                          .attr({'x1':function(d,i){ return i*72; },
                                 'y1':function(d){ return d.y1; },
                                 'x2':function(d,i){ return i*72; },
                                 'y2':function(d){ return d.y2; },
                            })
                          .style({'stroke':'#adadad','stroke-width':'1px'});
​
        var xAxis = d3.svg.axis();
            xAxis
                .orient('bottom')
                .scale(xscale)
                .tickValues(tickVals)
      ;
​
    
        var yAxis = d3.svg.axis();
            yAxis
                .orient('left')
                .scale(yscale)
                .tickSize(2)
                .tickFormat(function(d,i){ return hour[i]; })
                .tickValues(d3.range(25));
​
        var y_edit = canvas.append('g')
                          .attr("transform", "translate(150,0)")
                          .attr('id','yaxis')
                          .call(yAxis)
                ;
        var x_edit = canvas.append('g')
                          .attr("transform", "translate(150,480)")
                          .attr('id','xaxis')
                          .call(xAxis);
​
        var chart = canvas.append('g')
                            .attr("transform", "translate(150,0)")
                            .attr('id','bars')
                            .selectAll('rect')
                            .data(numRecords)
                            .enter()
                            .append('rect')
                            .attr('height',15)
                            .attr({'x':0,'y':function(d,i){ return yscale(i)+12; }})
                            .style('fill','#0076b2')
                            .attr('width',function(d){ return 0; });
​
​
        var transit = d3.select("svg").selectAll("rect")
                            .data(numRecords)
                            .transition()
                            .duration(1000) 
                            .attr("width", function(d) {return xscale(d); })
    
    
     x_edit.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", 450)
    .attr("y", 40)
    .text("Number of Records (thousands)");
    
    y_edit.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("x", -20)
    .attr("y", 0)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-0)")
    .text("Hour of Time");     
    ;
​
​
​
​
    </script>
</body>
</html>
​
    