D3 Examples - AIDS poster ICONCLASS

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>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.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;
    }
    
    .axis-label, .legend {font-size: 10px}
    
    .tipsy { font-size: 16px; position: absolute; padding: 5px; z-index: 100000; }
    .tipsy-inner { background-color: #000; color: #FFF; min-width:150px; max-width:340px;padding: 3px 15px 10px 15px; text-align: left; }
    
    /* Rounded corners */
    .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
    
    /* Uncomment for shadow */
    /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
    
    .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
    
    /* Rules to colour arrows */
    .tipsy-arrow-n { border-bottom-color: #000; }
    .tipsy-arrow-s { border-top-color: #000; }
    .tipsy-arrow-e { border-left-color: #000; }
    .tipsy-arrow-w { border-right-color: #000; }
    
    .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
    .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
    .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
    
</style>
<script type="text/javascript">     
    
    
    var w = 880;
    var h = 400;
    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) {
        
        xScale.domain([ 
            d3.min(data, function(d) {
                return +d.weight_avg;
            }), 
            d3.max(data, function(d) {
                return +d.weight_avg;
            })
        ]);
        
        yScale.domain([
            d3.max(data, function(d) {
                return +d.ic_count;
            }),
            d3.min(data, function(d) {
                return +d.ic_count;
            })
        ]);
        
        var circles = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle");
        
        circles.attr("cx", function(d) {
            return xScale(d.weight_avg);
        })
        .attr("cy", function(d) {
            return yScale(d.ic_count);
        })
        .attr("r", 8)
        .attr("class","data")
        .attr("opacity",0.3)
        .attr("fill", function(d){return legendColor(d.ic_d1)})
        .attr("stroke-width", function(d){
            d1 = d.ic_d1;
            return d1 == 0 ? 2 :
            0 ;
        })                    
        .attr("stroke","#000")
        // .append("title")
        // .text(function(d) {
        //  return d.ic_stem + ", Avg Weight: " + d.weight_avg + ", Count: " + d.ic_count ;
        // });
        
        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
        .call(xAxis);
        
        svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
        .call(yAxis);
        
        svg.append("text")
        .attr("class", "x axis-label")
        .attr("x", w/3)
        .attr("y", h - 6)
        .text("average weight of Iconclass code");
​
        svg.append("text")
        .attr("class", "y axis-label")
        .attr("text-anchor", "end")
        .attr("y", 0)
        .attr("dx", -h/3)
        .attr("dy", '0.75em')
        .attr("transform", "rotate(-90)")
        .text("count of code observations");
        
        var lgnd = svg.append("g")
        .attr("class","legend")
        .attr("transform","translate(750,50)")
        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);
        }
        
        
        $('svg circle.data').tipsy({ 
            // gravity: 'w', 
             html: true, 
             title: function() {
                 var d = this.__data__;
                 return '<div><p>Code:&nbsp;' + d.ic_stem + '</p><p>Description:<br>' + d.ic_text + '</p><p>AvgWeight:&nbsp;' + d3.format(".2r")(d.weight_avg) + '</p><p>Count:&nbsp;' + d.ic_count + '</p></div>'; 
             }
            });
        
    });
    
​
</script>
​
        </body>
</html>
    