Wednesday, December 21, 2016

Presidential Assassination Attempts

This blog post looks at presidential assassination attempts while using d3.js, dc.js and crossfilter as it's core technologies. This quick example of crossfilter ties together a pie chart, a row chart (horizontal bar chart) and a datatable. The source code follows the components.

The example here represents assassination attempts, rumored assassinations and assassinations on American presidents.  The dataset was compiled from information presented by wikipedia.

The components shown here in this blog (e.g., pie and bar charts) are clickable.

Parties Targeted

Assassination Type

Presidents

President Party Type


<!DOCtype html>
<html lang="en">
<body>
<div class="container">
    <div id="parties-id"><h4>Parties Targeted</h4></div>
    <div id="type-id"><h4>Assassination Type</h4></div>
    <div id='table-id'><h4>Presidents</h4>
        <table  class='table table-hover' >
            <thead>
            <tr class='header'>
                <th>President</th>
                <th>Party</th>
                <th>Type</th>
            </tr>
            </thead>
        </table>
    </div>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
    <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
    <script atype="text/javascript">
        var assassinationData = [
            {president: 'Abraham Lincoln', party: 'Republican', atype: 'assassinated'},
            {president: 'James A. Garfield', party: 'Republican', atype: 'assassinated'},
            {president: 'William McKinley', party: 'Republican', atype: 'assassinated'},
            {president: 'John F. Kennedy', party: 'Democratic', atype: 'assassinated'},
            {president: 'Abraham Lincoln', party: 'Republican',atype: 'attempted-assassination'},
            {president: 'Abraham Lincoln', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'John F. Kennedy', party: 'Democratic',atype: 'attempted-assassination'},
            {president: 'Andrew Jackson', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'William Howard Taft', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Theodore Roosevelt', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Herbert Hoover', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Franklin D. Roosevelt', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Franklin D. Roosevelt', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Harry S. Truman', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'Harry S. Truman', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'Richard Nixon', party: 'Republican',  atype: 'attempted-assassination'},
            {president: 'Richard Nixon', party: 'Republican',  atype: 'attempted-assassination'},
            {president: 'Gerald Ford', party: 'Republican',atype: 'attempted-assassination'},
            {president: 'Gerald Ford', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Jimmy Carter', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'Ronald Reagan', party: 'Republican',atype: 'attempted-assassination'},
            {president: 'George H.W. Bush', party: 'Republican',atype: 'attempted-assassination'},
            {president: 'Bill Clinton', party: 'Democratic',atype: 'attempted-assassination'},
            {president: 'Bill Clinton', party: 'Democratic',atype: 'attempted-assassination'},
            {president: 'Bill Clinton', party: 'Democratic',atype: 'attempted-assassination'},
            {president: 'Bill Clinton', party: 'Democratic',atype: 'attempted-assassination'},
            {president: 'George W. Bush', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'George W. Bush', party: 'Republican', atype: 'attempted-assassination'},
            {president: 'Barack Obama', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'Barack Obama', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'Barack Obama', party: 'Democratic', atype: 'attempted-assassination'},
            {president: 'Zachary Taylor', party: 'Whig', atype: 'rumored-assassination'},
            {president: 'Warren G. Harding', party: 'Republican', atype: 'rumored-assassination'},
        ];

        // DATA, DIMENSIONS AND GROUPS        var ndx = crossfilter(assassinationData);
        partyDimension = ndx.dimension(function (d) {
            return d.party;
        })
        partySumGroup = partyDimension.group()
        atypeDimension = ndx.dimension(function (d) {
            return d.atype;
        })
        var atypeGroupCount = atypeDimension.group()
            .reduceCount(function (d) {
                return d.atype;
            })
        modelDimension = ndx.dimension(function (d) {
            return d.model;
        })
        var modelGroupCount = modelDimension.group()
            .reduceCount(function (d) {
                return d.model;
            })

        //        //        // PRESIDENTIAL PARTIES INVOLVED IN ASSASSINATIONS (AND ATTEMPTS)        //        //
        var chart1 = dc.pieChart("#parties-id");
        chart1            .width(384)
            .height(240)
            .slicesCap(4)
            .innerRadius(25)
            .dimension(partyDimension)
            .group(partySumGroup)
            .renderLabel(true)
            .legend(dc.legend())
            .title(function (d) {
                return d.value;
            });

        //        //        // ASSASSINATION TYPES        //        //


        var chart2 = dc.rowChart("#type-id");
        chart2
            .width(480)
            .x(d3.scale.linear().range([6,20]))
            .margins({top: 5, left: 10, right: 10, bottom: 20})
            .colors(d3.scale.category10())
            .dimension(atypeDimension)
            .group(atypeGroupCount)
            .elasticX(true)
            .xAxis().ticks(5);

        //        //        // TABLE OF PRESIDENT, THEIR PARTIES AND ASSASSINATION TYPES        //        //
        var table1 = dc.dataTable("#table-id");
        table1            .width(250).height(800)
            .dimension(partyDimension)
            .group(function (d) {
                return ' '            })
            .size(100)
            .columns([

                function (d) {
                    return d.president;
                },
                function (d) {
                    return d.party;
                },
                function (d) {
                    return d.atype;
                },

            ])

        dc.renderAll();


    </script>

</div>
</body>

6 comments:

  1. Nice tutorials and samples..

    Any idea how could i able to connect the data dynamically on my php mysql database.

    ReplyDelete
  2. Fantastic question... I'm trying to figure that out myself... will let you know what I discover. -- Robert

    ReplyDelete
  3. Replies
    1. Hi Mike, looking forward to see how you'll able to work with it . Thanks..

      Delete
  4. Hello again.. Anyone succeed this in php mysql. Thanks..

    ReplyDelete
  5. Some party use aluminium scaffolding for dinning table. Such as 300 member food taken in 60 Set of aluminium scaffolding table model.

    ReplyDelete

The source code for gliesians.com is for sale on Ebay.

I've decided to shut down gliesians.com and sell the source code. If anyone is looking to purchase the related source, you can find it...