D3 Examples - Barley

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
/*  svg {
        border: 1px solid #f0f;
    }*/
    body {
        font-family: 'arial', sans-serif;
        font-size: 9px;
        width: 960px;
        margin: 40px auto;
    }
    h1 {
        font-size: 36px;
    }
    h3 {
        margin-bottom: 0px;
    }
    .g-site {
        display: inline-block;
        margin-right: 20px;
    }
    .axis path {
        display: none;
    }
    .year-1931 {
        fill: red;
    }
    .year-1932 {
        fill: blue;
    }
</style>
​
<body>
    <h1>Barley</h1>
</body>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
​
<script>
​
    var marginCore = 20;
    var margin = {top: 20, right: marginCore, bottom: 20, left: 100};
    var width = 300 - margin.left - margin.right,
        height = 150 - margin.top - margin.bottom;
​
    d3.tsv("barley.tsv", function(error, data) {
        if (error) throw error;
​
        // format your data
        data.forEach( function (d) {
​
            d.yield = +d.yield;
            d.year = +d.year;
​
        });
​
​
​
        // use map to strip out jobs_change
        var morrisData = data.filter( function (d) { return d.site == "Morris"; });
        // console.log(morrisData);
        var allVarieties = data.map( function (d) { return d.variety; });
        var morrisVarieties = d3.set(allVarieties).values();
        // console.log(morrisVarieties);
​
        var morrisYields = morrisData.map( function (d) { return d.yield; });
        // console.log(morrisYields);
        var morrisMax = d3.max(morrisYields);
        // console.log(morrisMax);
​
        morrisData.sort( function (a,b) { return b.yield - a.yield; });
​
        var dataYields = data.map( function (d) { return d.yield; });
        var dataMax = d3.max(dataYields);
        console.log(dataMax);
​
        // x and y scale domain and range
        var xScale = d3.scale.linear()
            .range([0,width])
            .domain([0, dataMax]);
​
        var yScale = d3.scale.ordinal()
            .rangeBands([height, 0], 0.333)
            .domain(morrisVarieties);
​
​
​
        var yieldsBySite = d3.nest()
            .key( function (d) { return d.site; })
            // .rollup - use this to add additional nodes with which to sort
            // assign node another value to use to sort
            // really important to have entries
            .entries(data);
​
        yieldsBySite
​
        console.log(yieldsBySite);
​
        var site = d3.select('body').selectAll('.g-site')
            .data(yieldsBySite)
            .enter()
            .append('div')
            .attr('class', function (d) { return d.key + ' g-site'; });
​
        site.append('h3').text( function (d) { return d.key; });
​
        var svg = site.append('svg')
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .tickSize(3)
            .tickPadding(0)
            .orient("top");
​
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .tickSize(3)
            .tickPadding(6)
            .orient("left");
​
        // var varietyGroup = svg.selectAll(".variety-group")
        //  .data(morrisData)
        //  .enter()
        //  .append("g")
        //  .attr("class", "variety-group")
        //  .attr('transform', function (d) { return 'translate(0,' + yScale(d.variety) + ')'; })
        //  // kind of weird, but because it's only morrisData, you only want for each variety
        //  // I was really thrown when I .data(data) instead of .data(morrisData)
        //  ;
​
        // // varietyGroup.append('circle')
        // //   .attr('r', 5)
        // //   .attr('cx', function (d) { return xScale(d.yield); });
​
        // varietyGroup.append('rect')
        //  .attr('fill-opacity', 0.5)
        //  .attr('class', function (d) { return 'year-' + d.year; })
        //  .attr('x', xScale(0))
        //  .attr('width', function (d) { return xScale(d.yield); })
        //  .attr('height', yScale.rangeBand());
​
        svg.append("g")
            .attr("class", "axis xAxis")
            .call(xAxis);
        svg.append("g")
            .attr("class", "axis yAxis")
            .call(yAxis);
​
        var varietyGroup = svg.selectAll(".variety-group")
            .data( function (d) { return d.values; })
            // it's a data join in a data join
            // data join inception
            .enter()
            .append("g")
            .attr("class", "variety-group")
            .attr('transform', function (d) { return 'translate(0,' + yScale(d.variety) + ')'; })
            ;
​
        // varietyGroup.append('circle')
        //  .attr('r', 5)
        //  .attr('cx', function (d) { return xScale(d.yield); });
​
        varietyGroup.append('rect')
            .attr('fill-opacity', 0.5)
            .attr('class', function (d) { return 'year-' + d.year; })
            .attr('x', xScale(0))
            .attr('width', function (d) { return xScale(d.yield); })
            .attr('height', yScale.rangeBand());
​
​
​
​
    });
​
</script>
    