FiscalNote - State wrap-up - Wyoming

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">x</span>
    <h1>Wyoming 2015 Legislature Wrap-Up</h1>
    <div class="lead">
        <h2>After 56 days, the Wyoming legislature session ended on March 9, 2015. Governor Matt Mead had an additional 15 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>207</span>bills enacted</div>
        <div id="total"><span>410</span>bills introduced</div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="party-balance">
        <h2>The party balance in Wyoming is heavily weighted to Republicans; Democrats co-sponsored 30% of all bills, but no bill solely sponsored by Democrats was enacted.</h2>
        <div id="balance" style="height:150px;"></div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="legislators">
        <h2>Further analysis of Wyoming bill sponsors shows which individual legislators were leaders in this past session:</h2>
        <div class="legislators">
            <div>
                <div class="face"></div>
                <div class="name">Rep. Mary Throne<br/>(D)</div>
                <div class="desc">Most bi-partisan legislator; Throne co-sponsored 29 bills with Republicans and a total of 34 bills.</div>
            </div>
            <div>
                <div class="face"></div>
                <div class="name">Sen. Ogden Driskill<br/>(R)</div>
                <div class="desc">Most bills...

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: 18em;
    line-height:1;
    z-index:-1;
    /* http://propublica.github.io/stateface/ */
    right: 0;
    top: -30px;            /* 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:25px;
}
#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 – 207',  207],
                ['Passed one chamber – 41',   41],
                ['Vetoed – 1',   1],
                {
                    name: 'No action / Failed – 160',    
                    y: 160,
                    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: 0,
            max: 100,
            title: {
              ...