Old school D3 from simpler times

All examples By author By category About

MrMattSim

Full window Github gist

Count of Iconclass codes of depth 3

<!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;}
    .title {font-size: 30px;}
	
</style>
<script type="text/javascript">     
	
	
	var w = 880;
	var h = 650;
	var padding = [ 120, 10, 20, 50 ];  //Top, right, bottom, left
    
	var xScale = d3.scale.linear()
	.range([padding[3],w-padding[2]]);
	
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top");
	    
	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("d3_ic_d3_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;
//			}), 
            0,
			d3.max(data, function(d) {
				return +d.ic_count;
			})
		]);
		
		var rects = svg.selectAll("rect")
		.data(data)
		.enter()
		.append("rect");

var bar_gap = 2;
        var bar_height = 5;
        var bar_centers = bar_height + bar_gap;
        rects.attr("x", xScale(0))
            .attr("y", function(d, i) {
                return i * bar_centers + padding[0];
            })
            .attr("width", function(d) {
//                console.log(d.ic_count,xScale(d.ic_count));
                return xScale(d.ic_count)-xScale(0);
            })
            .attr("height", bar_height)
            .attr("fill",function(d){
                return legendColor(d.ic_d3.slice(0,1))
            })
            .attr("stroke","#000")
            .attr("stroke-width",function(d){
                 return d.ic_d3.slice(0,1)=="0" ? 1 : 0;})
            .append("title")
            .text(function(d) {
                return "[" + d.ic_count + "]   Code: " + d.ic_d3 + " " + d.ic_text;
            });
		
        var lgnd = svg.append("g")
        .attr("class","legend")
        .attr("transform","translate(200,200)")
        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.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h - 50) + ")")
                .call(xAxis);

svg.append("text")
        .attr("class", "x axis-label")
        .attr("x", w/3)
        .attr("y", h - 6)
        .text("count");
        
        svg.append("text")
        .attr("class", "title")
        .attr("x", 50)
        .attr("y", 100)
        .text("Count of Iconclass codes of depth 3");
        
		
	});

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