Specialization Index chart

Custom chart to show the Specialization Index in a series of Universitites

Specialization Index

In bilbiometrics, the SI is an indicator that describes the intensity of research of an entity (e.g., an institution) in a given related field relative to the intensity of the country or world in the same field.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<style>
	body {
		font-family: sans-serif, Arial;
		margin-top: 40px;
		margin-left: 40px;
	}
	.intro {
		width: 500px;
		font-size: 12px;
		margin-bottom: 40px;
	}
	.axis line, .axis path {
	    fill: none;
	    stroke-width: 1;
	    stroke: #555;
	    shape-rendering: auto;
	}

.axis text {
	    fill: #555;
	}

.x.axis>path {
	    stroke: none;
	}

.axis text, .generic-legend-text {
	    stroke: none;
	    font: 10px sans-serif;
	}

.si-threshold-label{
	  line& {
	    stroke: rgb(0, 0, 0);
	    stroke-width: 1;
	    stroke-dasharray: @stroke-dasharray;
	  }
	  circle&{
	    fill: black;
	  }
	  text& {
	    tspan {
	    font: 12px sans-serif;
	    fill: #666666;
	    font-style: italic;
	    }
	  }
	}
	line.si-threshold-label {
	    stroke: #000;
	    stroke-width: 1;
	    stroke-dasharray: 2,4;
	}
	circle.si-threshold-label {
    	fill: #000;
	}
	text.areaName {
	    font: 11px sans-serif;
	    text-anchor: middle;
	    text-shadow: 0 1px 0 rgba(255,255,255,.75), 1px 0 0 rgba(255,255,255,.75), 0 -1px 0 rgba(255,255,255,.75), -1px 0 0 rgba(255,255,255,.75);
	}
	text.si-threshold-label tspan {
	    font: 12px sans-serif;
	    fill: #666;
	    font-style: italic;
	}
	</style>
</head>
<body>
	<p>Select a university, or national data</p>
	<div id="select-placeholder">
	</div>
	<svg></svg>
	<script src="lodash.min.js" charset="utf-8"></script>
	<script src="d3.v3.min.js" charset="utf-8"></script>
	<script src="code.js" charset="utf-8"></script>
</body>

</html>