D3 Examples - The Global Innovation Index 2014

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Cleaning Up</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
            
            body {
                background-color: #fbf3e3;
                font-family: Helvetica, Arial, sans-serif;
            }
​
            h1 {
                font: bold 25px "Century Schoolbook", Georgia, Times, serif;
    color: #827c74;
    line-height: 90%;
    margin: .2em 0 .4em 0;
    letter-spacing: -2px;
            }
​
            p {
                color: #39677f;
        font-size: 10px;
        margin: 5px;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-size: 11px;
​
            }
​
            svg {
                background-color: #fbf3e3;
            }
​
            rect:hover {
                fill: #6cacc4;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 7px;
            }
​
            .y.axis path,
            .y.axis line {
                opacity: 4;
            }
​
ol.simple-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
     
    margin: 0;
    margin-left: 3em;
    padding: 0;
     
    counter-reset: li-counter;
}
ol.simple-list > li{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}
ol.simple-list > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;
     
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
 
    content: counter(li-counter);
    counter-increment: li-counter;
}
​
        </style>
    </head>
    <body>
​
        <h1>The Global Innovation Index 2014:</h1>
​
        <p>The Global Innovation Index 2014: Nurturing New Sources of Growth by Developing the Human Factor in Innovation’ written by Soumitra Dutta, Rafael Escalona Reynoso, and Alexandra L. Bernard from Cornell University; Bruno Lanvin from INSEAD; and Sacha Wunsch-Vincent from WIPO, introduces the theme of the human factor and discusses the results of this year’s rankings.
​
 Source: <a href="https://www.globalinnovationindex.org/content.aspx?page=gii-full-report-2014#pdfopener">Globalinnovationindex.org</a>, 2014</p>
​
        <script type="text/javascript">     
​
​
            var w = 700;
            var h = 1100;
            var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left
​
​
​
            var widthScale = d3.scale.linear()
                                .range([ 0, w - padding[1] - padding[3] ]);
            
            var heightScale = d3.scale.ordinal()
                                .rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
​
​
​
            var xAxis = d3.svg.axis()
                            .scale(widthScale)
                            .orient("bottom");
​
            var yAxis = d3.svg.axis()
                            .scale(heightScale)
                            .orient("left");
​
​
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
​
            d3.csv("data.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a.score, +b.score);
                });
​
                widthScale.domain([ 0, d3.max(data, function(d) {
                    return +d.score;
                }) ]);
​
                heightScale.domain(data.map(function(d) { return d.countryName; } ));
​
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect");
​
                rects.attr("x", padding[3])
                    .attr("y", function(d) {
                        return heightScale(d.countryName);
                    })
                    .attr("width", function(d) {
                        return widthScale(d.score);
                    })
                    .attr("height", heightScale.rangeBand())
                    .attr("fill", "#be1258")
                    .append("title")
                    .text(function(d) {
                        return d.countryName + "'s Global Innovation score is " + d.score;
                    });
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",0)")
                    .call(yAxis);
​
            });
​
​
        </script>
        <h1>Findings from the <a href="https://www.globalinnovationindex.org/content.aspx?page=gii-full-report-2014#pdfopener">report</a></h1>
​
<ol class="simple-list">
  <li><p>The need to gather more knowledge of, and a better
understanding of, the role that the human factor—
along with technology and capital—plays in innovation
is critical. Statistically and analytically capturing
this contribution and nurturing it through adequate
education, training, and motivation in schools, universities,
businesses, civil society, and the government
itself is a challenge."</p></li>
  <li><p>The top 10 economies in the GII 2014 edition are
Switzerland, the United Kingdom (UK), Sweden,
Finland, the Netherlands, the United States of
America (USA), Singapore, Denmark, Luxembourg,
and Hong Kong (China). Nine of these economies
were already in the GII top 10 in 2013; Ireland,
which was 10th in 2013, dropped to 11th this year,
and Luxembourg climbed up into the top 10 from
12th position in 2013.</p></li>
  <li><p>The GII 2014 confirms the continued existence
of global innovation divides even within income
groups. All top 25 economies are in the highincome
group. China and Malaysia are the only
upper-middle income countries getting closer to
these ranks.</p></li>
   <li><p>Sub-Saharan Africa is the region that sees the most
significant improvement in GII rankings in 2014.
Thirty-three countries make up the region in the
GII. Of these 33, 17 climb in the rankings this year,
three remain in the same position, two new countries
are added, and the remaining 11 exhibit a drop
in rank.</p></li>
    <li><p>Regional trends in the GII 2014 show some interesting
new aspects. The BRICS economies show signs
of divergence, with China improving at a significantly
faster pace than its BRICS counterparts and
India slipping back. If China continues to improve
at this pace, it would not be a surprise to see it move
from its current 29th position to within the top 25
within a few years. </p></li>
</ol>  
​
​
    </body>
</html>
    