FiscalNote 15-04-13 - Regulation

by Adam Nekola

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="//use.typekit.net/zht7wtz.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

<div id="graphic">
    <h1>Comments on EPA's Clean Power Plan are majority negative</h1>
    <h2>Sentiment analysis of the approximately 7,000 comments on regulations.gov shows mostly negative response. Comments were given for a variety of reasons.</h2>
    <div id="container" style="height: 120px;"></div>
    <table>
        <tr>
            <td>
                <ul>
                    <li>Energy prices</li> 
                    <li>Coal industry</li> 
                    <li>Jobs</li> 
                    <li>Nuclear power</li> 
                    <li>The EPA doesn't have the authority to do this</li> 
                    <li>Negative comments about EPA in general</li>
                </ul>
            </td>
            <td>
                <ul>
                    <li>Climate change</li> 
                    <li>Pollution</li> 
                    <li>Health</li> 
                    <li>Children</li> 
                    <li>Natural gas</li>
                    <li>Positive comments about EPA in general</li>
                </ul>
            </td>
        </tr>
    </table>
    
    <div id="credit">Source: FiscalNote
        <img src="http://localhost:3000/assets/logos/logofull_153.png"/>
    </div>
</div>

CSS

* {
    font-family: "proxima-nova",sans-serif;
}
h1 {
color: #333333;
line-height:125%;
font-size: 1.2em;
font-weight: bold;
}
h2 {
color: #aaa;
font-size: 0.9em;
line-height:135%;
font-weight: 100;
    margin-bottom: 0;
}
#graphic { width: 300px; }
#graphic .wide { width: 600px; }
#credit {
    padding: 10px;
    background:#f4f4f4;
    font-size:0.7em;
    line-height:20px;
    color:#aaa;
}
#credit img {
    height: 20px;
    width:auto;
    float:right;
}
td {
    width: 49%;
    vertical-align:top;
    border-top:4px solid #76B852;
}
td:first-of-type {
    margin-right:2%;
    border-top:4px solid #D9534F;
}
ul {
    padding-left: 3px;
}
li {
    list-style:none;  
    font-size: 0.8em;
    padding-bottom: 8px;
}

JavaScript

$(function () {
    $('#container').highcharts({
        chart: { type: 'pie', 
                marginTop: 0, marginBottom: 0, marginLeft:0,
                marginRight:0},
        colors: ['#76B852', '#D9534F'],
        title: { text: '' },
        subtitle: { enabled: false },
        yAxis: {
            min: 0,
            title: {
                text: 'Total # of bills',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: 10,
                    useHTML: true,
                    formatter: function(){
                        return '<b>'+this.point.name+'</b> ('+this.y+'%)';
                    }
                }
            },
            series: {
                pointPadding: 0,
                groupPadding: 0.1
            }
        },
        tooltip: { enabled: false },
        legend: { enabled: false },
        credits: { enabled: false },
        xAxis: { title: { text: null } },
        series: [{
            data: [
                ['Positive<br/>comments',   41],
                ['Negative<br/>comments',   59]
            ]
        }]
    }); 
    
});