AIDS poster ICONCLASS

<!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>

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js