D3 Examples - Specialization Index chart

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.

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