FiscalNote - State wrap-up - Utah

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="social">
    <img id="leadlogo" src="http://localhost:3000/assets/logos/logofull_153.png"/>
    <span class="stateface">r</span>
    <h1>Utah 2015 Legislature Wrap-Up</h1>
    <div class="lead">
        <h2>After 45 days – 33 in session – the Utah legislature adjourned on March 12, 2015. Governor Gary Herbert had an additional 20 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>551</span>bills enacted</div>
        <div id="total"><span>1227</span>bills introduced</div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="party-balance">
        <h2>The party balance in Utah is heavily weighted to Republicans and thus most bills were sponsored by Republicans. Bipartisan bills still had the best likelihood of passage; of the 49 introduced, 77.5% were enacted.</h2>
        <div id="balance" style="height:150px;"></div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="legislators">
        <h2>Further analysis of Utah bill sponsors shows which individual legislators were leaders in this past session:</h2>
        <div class="legislators">
            <div>
                <div class="face"></div>
                <div class="name">Sen. Karen Mayne<br/>(D)</div>
                <div class="desc">Most bi-partisan legislator; Mayne co-sponsored 16 bills with Republicans and a total of 25 bills.</div>
            </div>
            <div>
                <div class="face"></div>
                <div class="name">Sen. Curtis...

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: 21em;
    line-height:1;
    z-index:-1;
    /* http://propublica.github.io/stateface/ */
    right: 0;
    top: -45px;            /* 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: none; }
#party-balance    { display: none; }
#legislators      { display: block; }
.legislators > div:first-of-type     { display: none;}
.legislators > div:nth-of-type(2)    { display: block;}
.legislators > div:last-of-type      { display: none;}
#categories       { display: none; }
#timeline         { display: none; }

/* ---------------------- */
.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 – 551',  551],
                ['Passed one chamber – 174',   174],
                ['Vetoed – 5',   5],
                {
                    name: 'No action / Failed – 497',    
                    y: 497,
                    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: {
        ...