D3 Examples - Iconclass observation counts

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AIDS poster ICONCLASS</title> 
<div id="d3-scatter-avgweight-count" width="100%" height=400></div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
​
<style type="text/css">
    
    body {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
    }
    
    h1 {
        font-size: 24px;
        margin: 0;
    }
    
    p {
        font-size: 14px;
        margin: 10px 0 0 0;
    }
    
    svg {
        background-color: white;
    }
    
    circle:hover {
        opacity:1;
    }
    
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
    
    .legend {font-size: 10px}
    
</style>
<script type="text/javascript">     
    
    
    var w = 880;
    var h = 1200;
    var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
    
    
    
    var xScale = d3.scale.linear()
    .range([ padding[3], w - padding[1] - padding[3] ]);
    
    var yScale = d3.scale.linear()
    .range([ padding[0], h - padding[2] ]);
    
    
    
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
    
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
    
    
    
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
    var legend = {
        0 : {label:"Abstract", color:'rgb(255,255,255)'},
        1 : {label:"Religion", color:'rgb(225,223,85)' },
        2 : {label:"Nature", color:'rgb(164,231,15)' },
        3 : {label:"Humans", color:'rgb(15,197,149)' },
        4 : {label:"Culture", color:'rgb(133,95,227)' },
        5 : {label:"Ideas", color:'rgb(127,127,127)' },
        6 : {label:"History", color:'rgb(0,0,0)' },
        7 : {label:"Bible", color:'rgb(224,171,0)'} ,
        8 : {label:"Literature", color:'rgb(128,98,0)' },
        9 : {label:"Mythology", color:'rgb(113,88,143)' }
    }
    
    var legendColor = function(n){
            return +n < 10 ? legend[n].color : 'rgb(0,0,0)' ;
        }
    
    
    d3.csv("ic_stats.csv", function(data) {
        data.sort(function(a,b){
            return b.ic_count - a.ic_count;
        });
        xScale.domain([ 
            d3.min(data, function(d) {
                return +d.ic_count;
            }), 
            d3.max(data, function(d) {
                return +d.ic_count;
            })
        ]);
        
        var rects = svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect");
​
        rects.attr("x", 0)
            .attr("y", function(d, i) {
                return i * 2;
            })
            .attr("width", function(d) {
                return d.ic_count * 2;
            })
            .attr("height", 2)
            .attr("fill",function(d){return legendColor(d.ic_d1)})
            .append("title")
            .text(function(d) {
                return "[" + d.ic_count + "]   Code: " + d.ic_stem + " " + d.ic_text;
            });
        
        var lgnd = svg.append("g")
        .attr("class","legend")
        .attr("transform","translate(200,100)")
        for (i=0; i < 10; i++) {
            lgnd.append("circle")
            .attr("fill", legendColor(i))
            .attr("r",6)
            .attr("cx",0)
            .attr("cy",i*20 - 4)
            .attr("opacity",0.6)
            .attr("stroke","#000")
            .attr("stroke-width", i == 0 ? 1 : 0);
            lgnd.append("text")
            .attr("x",12)
            .attr("y",i*20)
            .text(i + " : " + legend[i].label);
        }
        
        
    });
    
​
</script>
​
        </body>
</html>
    