Old school D3 from simpler times

All examples By author By category About

MrMattSim

Full window Github gist

Iconclass observation counts

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

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