FiscalNote - State wrap-up - Arizona

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">D</span>
    <h1>Arizona 2015 Legislature Wrap-Up</h1>
    <div class="lead">
        <h2>After 61 days the New Mexico legislature session ended on March 21, 2015. Governor Susana Martinez had until April 10 to sign bills into law; the rest were pocket vetoed. 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>303</span>bills enacted</div>
        <div id="total"><span>1163</span>bills introduced</div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="party-balance">
        <h2>New Mexico is a split government, with a Republican House and Democratic Senate; although Democrats sponsored more bills, Republicans had more enacted. Few bills had bi-partisan sponsors.</h2>
        <div id="balance" style="height:170px;"></div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="legislators">
        <h2>Further analysis shows which individual New Mexico legislators led in bill sponsorships this past session.</h2>
        <div class="legislators">
            <div>
                <div class="face"></div>
                <div class="name">Sen. Daniel A. Ivey-Soto<br/>(D)</div>
                <div class="desc">Most bi-partisan legislator; Ivey-Soto co-sponsored 17 bills with Republicans and a total of 25 bills.</div>
            </div>
            <div>
                <div class="face"></div>
                <div class="name">Sen. Mary Kay Papen<br/>(D)</div>
    ...

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: 23em;
    line-height:1;
    z-index:-1;
    /* http://propublica.github.io/stateface/ */
    right: 0;
    top: -70px;            /* 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: 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 – 303',  303],
                ['Passed one chamber – 154',   154],
                ['Passed both chambers – 53',   53],
                ['Resolutions passed – 22',   22],
                ['Vetoed – 20',   20],
                {
                    name: 'No action / Failed – 699',    
                    y: 699,
                    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 },
       ...