D3 Examples - j14Eidan

xxxxxxxxxx
 
<!doctype html>
​
<html>
    
    <head>
        <title></title>
    <!-- fetch d3 library -->
    <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
​
    <body>
        
    <script>
            var width = 500;
            var height = 500;
            var padding = 50;
            //load data
            d3.csv("data.csv", function(data){
                
                //i need just the age of each person i create new array consists ages
                //map is going through the array and build new one, i is refernce for each element in the array
                var map = data.map(function(i){ return parseInt(i.rent11);})
                    //console.log(map);
​
                //histogram
                var histogram = d3.layout.histogram()
                                    .bins(7)
                                    (map)
                    //console.log(histogram);
​
                var y = d3.scale.linear()
                            .domain([0, d3.max(histogram.map(function(i) {return i.length;}))])
                            .range([0, height]);
​
                var x = d3.scale.linear()
                            .domain([0,d3.max(map) ])
                            .range([0, width])
​
                var xAxis = d3.svg.axis()
                                .scale(x)
                                .orient("bottom")
​
                //canvas
                var canvas = d3.select("body").append("svg")
                                .attr("width", width)
                                .attr("height",height + padding)
                                .append("g")
                                    .attr("transform", "translate(20,0)");
​
                var group = canvas.append("g")
                                .attr("transform", "translate(0," + height + ")" )
                                .call(xAxis);
​
                //bind data to the documents - create a g elemen foreach data element
                var bars = canvas.selectAll(".bar")
                                .data(histogram)
                                .enter()
                                .append("g")
​
                bars.append("rect")
                    .attr("x", function(d){return x(d.x);})//horizontal cordinate
                    .attr("y",function(d){return 500 - y(d.y);})
                    .attr("width", function(d){return x(d.dx)-2;}) //dx = range
                    .attr("height", function(d){return y(d.y);})
                    .attr("fill", "steelblue")
​
                bars.append("text")
                    .attr("x", function(d){return x(d.x);})
                    .attr("y", function(d){return 500 - y(d.y);})
                    .attr("dy", "20px" )
                    .attr("dx", function(d){return x(d.dx)/2;})
                    .attr("fill", "#fff")
                    .attr("text-anchor" , "middle")
                    .text(function(d){return d.y;}) //d.y = number of elements
            })
​
    </script>
​
<p> x = שכירות שנת 2011</p>
<p> y = כמות מוחאים</p>
    </body>
​
</html>
    