FiscalNote - State wrap-up - Kentucky

by Adam Nekola

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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" class="social">-->
<div id="graphic" class="">
    <img id="leadlogo" src="http://localhost:3000/assets/logos/logofull_153.png"/>
    <span class="stateface">Q</span>
    <h1>Kentucky 2015 Legislature Wrap-Up</h1>
    <div class="lead">
        <h2>After 78 days – 29 in session – the Kentucky legislature session ended on March 24, 2015. Governor Steve Beshear had an additional 10 days following the session to veto legislation. At the end of the session, the status of each bill is as follows:</h2>
        <div id="container" style="height: 190px;"></div>
        <div id="passed"><span>124</span>bills enacted</div>
        <div id="total"><span>1242</span>bills introduced</div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="party-balance">
        <h2>Kentucky is a split government, with a Republican Senate and Democratic House, but Democrats sponsored more bills and had more enacted. Bipartisan bills had the best likelihood of passage; of the 253 introduced, 20.5% were enacted.</h2>
        <div id="balance" style="height:170px;"></div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="legislators">
        <h2>Further analysis of Kentucky bill sponsors shows which individual legislators were leaders in this past session. Dean Schamore led all categories in his first term and Democrats were the top 5 of each category.</h2>
        <div class="legislators">
            <div>
                <div class="name">Most bills<br/>sponsored</div>
                <div class="desc">Dean Schamore (D), 101<br/>Mitchel B. Denham Jr. (D), 94<br/>Linda Howlett Belcher (D), 91<br/>Jody Richards (D), 89<br/>Cluster Howard (D),...

CSS

@font-face {
    font-family: 'StateFaceRegular';
    src: local('StateFace-Regular');
}

* {
    font-family: "proxima-nova",sans-serif;
}
#leadlogo {
    margin-top: 20px;
    height:25px;
}
h1 {
    color: #333333;
    line-height:125%;
    font-size: 2em;
    font-weight: bold;
    padding-top: 10px;
    margin-top: 0;
    margin-bottom: -20px;
}
#graphic:not(.social) h1 {
    margin-bottom: -10px;
    font-size: 2.5em;
    padding-right: 170px;
}
h2 {
    color: #6A6A6A;
    font-size: 1.2em;
    line-height:135%;
    font-weight: 100;
    margin: 30px 0 30px;
}
#graphic:not(.social) h2 {
    margin-top:30px;
}
#graphic { width: 620px; position: relative; margin:0 auto; padding: 0 10px;}
.content div {
    width:180px;
}
#graphic.social .stateface,
#graphic.social #leadlogo {
    display:none;
}
#graphic:not(.social) .stateface {
    display: block;
    color: white;
    color: rgb(212, 201, 219);
    font-family: 'StateFaceRegular';
    position: absolute;
    font-size: 31em;
    line-height:1;
    z-index:-1;
    /* http://propublica.github.io/stateface/ */
    right: 0;
    top: -160px;            /* This will need to change state-by-state */
    padding-left: 10px;    /* This will need to change state-by-state */
    padding-bottom: 20px;  /* This will need to change state-by-state */
    padding-right:10px;
}
#container {
    width: 400px;
    float:right
}
/* just temp */
.lead             { display: block; }
#party-balance    { display: block; }
#legislators      { display: block; }
.legislators > div:first-of-type     { display: block;}
.legislators > div:nth-of-type(2)    { display: block;}
.legislators > div:last-of-type      { display: block;}
#categories       { display: block; }
#timeline         { display: block; }

/* ---------------------- */
.lead span {
    font-weight:500;
    display:block;
    font-size:3em;
    line-height:1;
    padding-bottom: 10px;
}
.lead h2 { padding-right:10px; margin-top:30px; }
#total, #passed { text-transform:...

JavaScript

$(function () {
    $('#container').highcharts({
        chart: { type: 'pie', 
                marginTop: 0, marginBottom: 0, marginLeft:0,
                marginRight:210, backgroundColor: false },
        colors: ['#AC6FB5','#85498E',  '#592C5F', /*'#B5ADBC',*/ '#908399', '#6A5977', '#50435A', '#dfdfdf'],
        title: { text: '' },
        subtitle: { enabled: false },
        plotOptions: {
            pie: {
                dataLabels: { enabled: false },
                showInLegend: true,
                //borderWidth: 0
            },
            series: {
                pointPadding: 0,
                groupPadding: 0.1
            }
        },
        tooltip: { enabled: false },
        legend: { 
            enabled: true,
            align: 'right',
            layout: 'vertical' 
        },
        credits: { enabled: false },
        xAxis: { title: { text: null } },
        series: [{
            data: [
                ['Enacted – 124',  124],
                ['Passed one chamber – 83',   83],
                ['Resolutions passed – 337',   337],
                ['Vetoed – 5',   5],
                {
                    name: 'No action / Failed – 703',    
                    y: 703,
                    color: '#dfdfdf',
                    showInLegend: false                 
                }
            ]
        }]
    }); 
    
    /* ------------------------------------------ */
    /* ------------------------------------------ */
    /* ------------------------------------------ */
    /* ------------------------------------------ */
    
    $('#balance').highcharts({
        chart: { type: 'bar', marginLeft: 200, marginTop:0, backgroundColor: false },
        colors: ['#ccc', /*'#AC6FB5',*/ '#5782e0', '#ea3a3a'],
        title: { text: '' },
        subtitle: { enabled: false },
        tooltip: { enabled: false },
        legend: { enabled: true, reversed: true },
        credits: { enabled: false },
        yAxis: {
            min:...