FiscalNote - State wrap-up lvl1

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">
    <span class="stateface">e</span>
    <h1>New Jersey 2015 Legislature Wrap-Up</h1>
    <div class="lead">
        <h2>After xxxxx days in session, the New Jersey legislature ended on March 3, 2015. At the end of the session, the final status of bills were dispersed as follows:</h2>
        <div id="container" style="height: 190px;"></div>
        <div id="total"><span>8,999</span>bills introduced</div>
        <div id="passed"><span>8,999</span>bills enacted</div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="party-balance">
        <h2>The party balance on New Jersey is heavily weighted to Republicans, but Democrats managed to be fairly successfull with bill passage</h2>
        <div class="parties">
            <div>Democrats</div>
            <div>Republicans</div>
        </div>
        <div id="balance" style="height:150px;"></div>
    </div>
    <!-- ------------------------------------------ -->
    <div id="legislators">
        <h2>An analysis of bill sponsors shows which legislators were leaders in this session.</h2>
        <div class="legislators">
            <div>
                <div class="face"></div>
                <div class="name">Rep. Bob Smith (R)</div>
                <div class="desc">Most bi-partisan legislator; Smith co-sponsored 15 bills with Democrats</div>
            </div>
            <div>
                <div class="face"></div>
                <div class="name">Rep. Bob Smith (R)</div>
                <div class="desc">Most bi-partisan legislator; Smith co-sponsored 15 bills with Democrats</div>
            </div>
            <div>
                <div class="face"></div>
                <div class="name">Rep....

CSS

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

* {
    font-family: "proxima-nova",sans-serif;
}
h1 {
    color: #333333;
    line-height:125%;
    font-size: 2.5em;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 170px;
    margin-bottom: -10px;
}
h2 {
    color: #6A6A6A;
    font-size: 1.2em;
    line-height:135%;
    font-weight: 100;
    margin: 30px 0;
}
#graphic { width: 620px; position: relative; margin:0 auto; padding: 0 10px;}
.content div {
    width:180px;
}
.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: -25px;            /* 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; }
#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; }
#total, #passed { text-transform: uppercase; color: #666; padding: 10px; line-height: 1; width: 180px;}
#total { padding: 0 10px 10px; }
#passed {background: #f4f4f4;}
#passed span {
    color: #AC6FB5;
}
/* ---------------------- */
.parties {
    margin-left:200px;
}
.parties div {
    float:left;
    width:50%;
    text-align:center;
    font-weight:600;
}
.legislators { overflow: auto; }
.legislators > div {
    float:left;
    padding: 0 15px;
    width: 33.3%;
    box-sizing:border-box;
   ...

JavaScript

$(function () {
    $('#container').highcharts({
        chart: { type: 'pie', 
                marginTop: 0, marginBottom: 0, marginLeft:0,
                marginRight:170, backgroundColor: false },
        colors: ['#592C5F', '#85498E', '#AC6FB5', '#B5ADBC', '#908399', '#6A5977', '#50435A', '#dfdfdf'],
        title: { text: '' },
        subtitle: { enabled: false },
        plotOptions: {
            pie: {
                dataLabels: { enabled: false },
                showInLegend: true
            },
            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: [
                ['Passed one chamber',   3],
                ['Passed both chambers',   3],
                ['Enacted',   3],
                ['Failed',   2],
                ['Vetoed',   2],
                {
                    name: 'No action',    
                    y: 27,
                    color: '#dfdfdf',
                    showInLegend: false                 
                }
            ]
        }]
    }); 
    
    /* ------------------------------------------ */
    /* ------------------------------------------ */
    /* ------------------------------------------ */
    /* ------------------------------------------ */
    
    $('#balance').highcharts({
        chart: { type: 'bar', marginLeft: 200 },
        colors: ['#ea3a3a', '#5782e0'],
        title: { text: '' },
        subtitle: { enabled: false },
        tooltip: { enabled: false },
        legend: { enabled: false },
        credits: { enabled: false },
        yAxis: {
            min: -100,
            max: 100,
            title: {
                enabled: false
            },
            labels: {...