D3 Examples - 2014 World Press Freedom Index

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: #f2e6de;
                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: #f2e6de;
            }
​
            rect:hover {
                fill: #6cacc4;
            }
            
            .axis path,
            .axis line {
                fill: black;
                stroke: #fbf3e3;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                
                font: bold 6px "Century Schoolbook", Georgia, Times, serif;
    color: #827c74;
                
            }
​
            .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: 2em;
    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>2014 World Press Freedom Index</h1>
​
        <p>The 2014 World Press Freedom Index spotlights the
negative impact of conflicts on freedom of information
and its protagonists. 
​
 Source: <a href="https://rsf.org/index2014/en-index2014.php">Reporters Without
Borders</a>, 2014.</p>
​
<p>The questions consider six general criteria. Using a
system of weighting for each possible response,
countries are given a score of between 0 and 100
for each of the six overall criteria. These scores are
then used as indicators in calculating each country’s
final score.Reporters Without Borders meanwhile calculates a
score of between 0 and 100 reflecting the level of
violence against journalists during the period
considered.</p>
​
<br></br>
​
​
<ol class="simple-list">
  <li><p>Pluralism:
Measures the degree of representation of views
in the media space</p></li>
  <li><p>Media independance:
Measures the degree to which the media are able
to function independently of theauthorities</p></li>
  <li><p>Environment and self-censorship:
Analyses the environment in which journalists work</p></li>
   <li><p>Legislative framework:
Analyses the quality of the legislative framework and
measures its effectiveness</p></li>
    <li><p>Transparency:
Measures the transparency of the institutions and
procedures that affect the productionof news and
information </p></li>
<li><p>Infrastructure:
Measures the quality of the infrastructure that
supports the production of news andinformation </p></li>
</ol>  
​
        <script type="text/javascript">     
​
​
            var w = 800;
            var h = 900;
            var padding = [ 0, 10, 0, 150 ];  //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("right");
​
​
​
            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.ascending(+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", "white")
                    .append("title")
                    .text(function(d) {
                        return d.countryName + "'s 2014 WORLD PRESS FREEDOM INDEX is " + d.score + " (the lower the better)";
                    });
​
                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</h1>
​
<ol class="simple-list">
  <li><p>Finland tops the index for the fourth year running,
closely followed by Netherlands and Norway, like last
year. At the other end of the index, the last three
positions are again held by Turkmenistan, North
Korea and Eritrea, three countries where freedom of
information is non-existent. Despite occasional
turbulence in the past year, these countries continue
to be news and information black holes and living
hells for the journalists who inhabit them</p></li>
​
  <li><p>This year’s index covers 180 countries, one more
than last year. The new entry, Belize, has been
assigned an enviable position (29th). Cases of
violence against journalists are rare in Belize but there
were some problems: defamation suits involving
demands for large amounts in damages, national
security restrictions on implementation of the
Freedom of Information Act and sometimes unfair
management of broadcast frequencies. </p></li>
  <li><p>The formation of a government led by Mohamed
Morsi in Egypt (159th, unchanged) in the summer
2012 was accompanied by an increase in abuses
against journalists and all-out efforts to bring the
media under the Muslim Brotherhood’s control. That
was brought to a complete halt by the army’s return to
power a year later. The ensuing persecution of the
Muslim Brotherhood affected not only Egyptian
journalists but also their Turkish, Palestinian and
Syrian colleagues. In the Persian Gulf, especially the
United Arab Emirates (118th, -3), bloggers and
journalists were arrested and tried on charges of links
to the Brotherhood.</p></li>
   <li><p>Israel’s 17-place rise must be offset against its 20-
place fall in the 2013 index as a result of Operation
“Pillar of Defence” in November 2012, when two
Palestinian journalists were killed, and the many raids
it carried out against Palestinian media. Security
needs continue to be used as an excuse to limit
freedom of information. The Israeli media are able to
be outspoken but media located in “Israeli territory”
must comply with prior military censorship and gag
orders. Investigative reporting involving national
security is not welcome.
Abusive treatment of Palestinian and foreign
journalists by the Israel Defence Forces is common,
especially during the weekly demonstrations at the
Separation Wall. Many photojournalists were
deliberately targeted when leaving the demonstrations
in November 2013. On 4 December, an Israeli high
court endorsed the seizure of equipment from Wattan
TV during an IDF raid in February 2012.</p></li>
    <li><p>Vietnam (173rd, -1), Uzbekistan (166th, -1) and
Saudi Arabia (164th, unchanged), to name but
three, continue to tighten their grip on news and
information and adapt their methods of radical
censorship to the digital era. The cruellest punishments
await those of their citizens who have the courage to
resist. In Kazakhstan (161st, unchanged) and
Azerbaijan (160th, -3), media pluralism is in the
process of succumbing to the increasingly repressive
tendencies of rulers clinging to power.</p></li>
</ol>  
​
​
    </body>
</html>
    