Skip to content

Instantly share code, notes, and snippets.

@karmi

karmi/README.markdown

Last active January 9, 2016 18:06
Download ZIP

Revisions

  1. karmi revised this gist Jan 7, 2016. 1 changed file with 24 additions and 5 deletions.
    29 changes: 24 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,6 +21,9 @@
    stroke-width: 2px;
    opacity: 0.7;
    }
    #chart circle.hidden {
    display: none;
    }
    #chart circle:hover {
    fill: #bf3e05;
    opacity: 1;
    @@ -51,6 +54,9 @@
    z-index: -1;
    padding: 10px 0px 1px 10px;
    }
    div.legend.visible {
    display: block;
    }
    div.legend p {
    font-size: 80%;
    padding: 0;
    @@ -189,11 +195,11 @@
    return c
    })
    .on('mouseover', function(d, i) {
    d3.select('#legend-'+i).style('display', 'block')
    d3.select('#legend-'+i).classed('visible', true)
    d3.select('.x.axis').style('opacity', '0.5')
    })
    .on('mouseout', function(d, i) {
    d3.select('#legend-'+i).style('display', 'none')
    d3.select('#legend-'+i).classed('visible', false)
    d3.select('.x.axis').style('opacity', '1')
    })
    .on('click', function(d, i) {
    @@ -236,11 +242,24 @@
    .text(function(d) { return d })
    .on('click', function(d) {
    if ( 'All' === d ) {
    svg.selectAll('circle').style('display', 'block')
    svg.selectAll('circle')
    .transition().duration(150)
    .style('opacity', 0.7)
    .each('end', function() { d3.select(this).classed('hidden', false) })

    d3.select('#chart .total strong').text( d3.sum(data, function(d) { return d.fatalities }) )
    } else {
    svg.selectAll('circle').style('display', 'none')
    svg.selectAll('circle.' + d.toLowerCase().replace(/\s/, '-')).style('display', 'block')
    svg.selectAll('circle')
    .filter(function(e) { return e.region != d })
    .transition().duration(150)
    .style('opacity', 0)
    .each('end', function() { d3.select(this).classed('hidden', true) })

    svg.selectAll('circle')
    .filter(function(e) { return e.region == d })
    .transition().duration(150)
    .style('opacity', 0.7)
    .each('end', function() { console.log(d3.select(this)); d3.select(this).classed('hidden', false) })
    d3.select('#chart .total strong').text( d3.sum(data.filter(function(e) { return e.region == d }), function(e) { return e.fatalities }) )
    }
    d3.selectAll('a.switch').classed('active', false)
  2. karmi revised this gist Jan 6, 2016. 1 changed file with 12 additions and 2 deletions.
    14 changes: 12 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,9 @@
    fill: #bf3e05;
    opacity: 1;
    }
    #chart circle.has_link:hover {
    cursor: pointer;
    }

    .x.axis path.domain {
    display: none;
    @@ -181,7 +184,9 @@
    .attr('cy', height/2)
    .attr('r', function(d) { return rScale(d.fatalities) })
    .attr('class', function(d, i) {
    return !!d.region ? (d.region.toLowerCase().replace(/\s/, '-')) : ''
    c = !!d.link ? 'has_link' : ''
    c += !!d.region ? (' ' + d.region.toLowerCase().replace(/\s/, '-')) : ''
    return c
    })
    .on('mouseover', function(d, i) {
    d3.select('#legend-'+i).style('display', 'block')
    @@ -190,7 +195,12 @@
    .on('mouseout', function(d, i) {
    d3.select('#legend-'+i).style('display', 'none')
    d3.select('.x.axis').style('opacity', '1')
    });
    })
    .on('click', function(d, i) {
    return !!d.link ? window.open(d.link, '_blank') : null
    })
    .append('title')
    .text(function(d) { return d.link ? 'Click for more info' : '' });

    var legend = d3.select('#chart').selectAll('div.legend')
    .data(data)
  3. karmi revised this gist Jan 6, 2016. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -110,6 +110,25 @@
    font-weight: 900;
    padding-right: 0.1em;
    }

    .footer {
    color: #bfbfbf;
    font-size: 65%;
    font-weight: 200;
    text-align: left;
    position: absolute;
    bottom: 0em;
    right: 42px;
    width: 8.75em;
    }
    .footer small:after { content:"\A"; white-space:pre; } {
    }
    .footer p {
    margin: 0; padding: 0;
    }
    .footer a {
    color: #bfbfbf;
    }
    </style>
    </head>
    <body>
    @@ -228,6 +247,11 @@
    return '<p><strong>' + d + '</strong> fatalities</p>'
    });

    d3.select('#chart')
    .append('div')
    .attr('class', 'footer')
    .html('<p><small>Data sources</small> <a href="http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?_r=3">NYT</a>, <a href="https://en.wikipedia.org/wiki/List_of_Islamist_terrorist_attacks#2015.E2.80.93present">Wikipedia</a></p>');

    if (document.location.hash.length > 0) {
    var path = d3.select('.' + document.location.hash.replace('#', ''))
    path.on('click').call(path.node(), path.datum())
  4. karmi revised this gist Jan 6, 2016. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -227,6 +227,11 @@
    .html(function(d) {
    return '<p><strong>' + d + '</strong> fatalities</p>'
    });

    if (document.location.hash.length > 0) {
    var path = d3.select('.' + document.location.hash.replace('#', ''))
    path.on('click').call(path.node(), path.datum())
    };
    });
    </script>

  5. karmi revised this gist Jan 6, 2016. 1 changed file with 31 additions and 1 deletion.
    32 changes: 31 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -73,7 +73,7 @@

    .region-switch {
    position: absolute;
    top: 0;
    top: 1.75em;
    right: 40px;
    }
    a.switch {
    @@ -90,6 +90,26 @@
    color: #ccc;
    background: #444;
    }

    div.total {
    color: #666;
    font-size: 80%;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: -0.05em;
    position: absolute;
    top: 0;
    right: 40px;
    }
    div.total p {
    margin: 0 0.45em 0 0;
    padding: 0;
    }
    div.total strong {
    font-size: 140%;
    font-weight: 900;
    padding-right: 0.1em;
    }
    </style>
    </head>
    <body>
    @@ -188,15 +208,25 @@
    .on('click', function(d) {
    if ( 'All' === d ) {
    svg.selectAll('circle').style('display', 'block')
    d3.select('#chart .total strong').text( d3.sum(data, function(d) { return d.fatalities }) )
    } else {
    svg.selectAll('circle').style('display', 'none')
    svg.selectAll('circle.' + d.toLowerCase().replace(/\s/, '-')).style('display', 'block')
    d3.select('#chart .total strong').text( d3.sum(data.filter(function(e) { return e.region == d }), function(e) { return e.fatalities }) )
    }
    d3.selectAll('a.switch').classed('active', false)
    d3.select(this).classed('active', true)
    });

    d3.select('a.switch.all').classed('active', true);

    var total = d3.select('#chart')
    .insert('div', ':first-child')
    .datum(d3.sum(data, function(d) { return d.fatalities }))
    .attr('class', 'total')
    .html(function(d) {
    return '<p><strong>' + d + '</strong> fatalities</p>'
    });
    });
    </script>

  6. karmi revised this gist Jan 6, 2016. 1 changed file with 46 additions and 0 deletions.
    46 changes: 46 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,6 +70,26 @@
    color: #666;
    font-size: 65%;
    }

    .region-switch {
    position: absolute;
    top: 0;
    right: 40px;
    }
    a.switch {
    color: #444;
    background: #ccc;
    font-size: 80%;
    text-decoration: none;
    margin: 0 0.25em 0.2em 0;
    padding: 0.25em 0.5em 0.25em 0.5em;
    border-radius: 0.4em;
    display: block;
    }
    a.switch.active {
    color: #ccc;
    background: #444;
    }
    </style>
    </head>
    <body>
    @@ -121,6 +141,9 @@
    .attr('cx', function(d) { return xScale(d3.time.format('%Y-%m-%d').parse(d.date)) })
    .attr('cy', height/2)
    .attr('r', function(d) { return rScale(d.fatalities) })
    .attr('class', function(d, i) {
    return !!d.region ? (d.region.toLowerCase().replace(/\s/, '-')) : ''
    })
    .on('mouseover', function(d, i) {
    d3.select('#legend-'+i).style('display', 'block')
    d3.select('.x.axis').style('opacity', '0.5')
    @@ -151,6 +174,29 @@

    return html
    });

    d3.select('#chart')
    .insert('div', ':first-child')
    .attr('class', 'region-switch')
    .selectAll('a.switch')
    .data(['All', 'Middle East', 'Africa', 'Europe', 'North America', 'Asia'])
    .enter()
    .append('a')
    .attr('href', function(d) { return '#' + d.toLowerCase().replace(/\s/, '-') })
    .attr('class', function(d) { return 'switch ' + d.toLowerCase().replace(/\s/, '-') })
    .text(function(d) { return d })
    .on('click', function(d) {
    if ( 'All' === d ) {
    svg.selectAll('circle').style('display', 'block')
    } else {
    svg.selectAll('circle').style('display', 'none')
    svg.selectAll('circle.' + d.toLowerCase().replace(/\s/, '-')).style('display', 'block')
    }
    d3.selectAll('a.switch').classed('active', false)
    d3.select(this).classed('active', true)
    });

    d3.select('a.switch.all').classed('active', true);
    });
    </script>

  7. karmi revised this gist Jan 6, 2016. 1 changed file with 72 additions and 1 deletion.
    73 changes: 72 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,12 +11,20 @@
    margin: 40px;
    }

    #chart {
    position: relative;
    }

    #chart circle {
    fill: orange;
    stroke: #bf3e05;
    stroke-width: 2px;
    opacity: 0.7;
    }
    #chart circle:hover {
    fill: #bf3e05;
    opacity: 1;
    }

    .x.axis path.domain {
    display: none;
    @@ -30,6 +38,38 @@
    fill: #999;
    font-weight: 100;
    }

    div.legend {
    color: #444;
    background-color: #fff;
    position: absolute;
    display: none;
    border-left: 1px solid #bf3e05;
    z-index: -1;
    padding: 10px 0px 1px 10px;
    }
    div.legend p {
    font-size: 80%;
    padding: 0;
    margin: 0 0 0.25em 0;
    }
    div.legend p:last-child {
    padding-top: 0.28em;
    margin-bottom: -0.20em;
    }
    div.legend small {
    color: #878787;
    font-size: 70%;
    font-weight: 200;
    text-transform: uppercase;
    }
    div.legend .fatalities {
    font-size: 140%;
    }
    div.legend .link {
    color: #666;
    font-size: 65%;
    }
    </style>
    </head>
    <body>
    @@ -77,9 +117,40 @@
    .data(data)
    .enter()
    .append('circle')
    .attr('id', function(d, i) { return ('circle-'+i) })
    .attr('cx', function(d) { return xScale(d3.time.format('%Y-%m-%d').parse(d.date)) })
    .attr('cy', height/2)
    .attr('r', function(d) { return rScale(d.fatalities) });
    .attr('r', function(d) { return rScale(d.fatalities) })
    .on('mouseover', function(d, i) {
    d3.select('#legend-'+i).style('display', 'block')
    d3.select('.x.axis').style('opacity', '0.5')
    })
    .on('mouseout', function(d, i) {
    d3.select('#legend-'+i).style('display', 'none')
    d3.select('.x.axis').style('opacity', '1')
    });

    var legend = d3.select('#chart').selectAll('div.legend')
    .data(data)
    .enter()
    .append('div')
    .attr('id', function(d, i) { return ('legend-'+i) })
    .attr('class', 'legend')
    .attr('style', function(d) {
    return 'top: ' + ((height/2)) + 'px; left:' + xScale(d3.time.format('%Y-%m-%d').parse(d.date)) + 'px;' + 'padding-top: ' + ((height/2)+20) + 'px'
    })
    .html(function(d) {
    var format = d3.time.format('%B %d, %Y');
    html = '<p class="fatalities"><strong>' + d.fatalities + '</strong> <small>fatalities</small></p> ' +
    '<p class="description">' + d.description + '</p>' +
    '<p class="location"><small>Location </small>' + d.location + '</p> ' +
    '<p class="date"><small>Date </small>' + format(d3.time.format('%Y-%m-%d').parse(d.date)) + '</p> ';
    if ( d.link ) {
    html += '<p class="link">' + d.link + '</p>';
    }

    return html
    });
    });
    </script>

  8. karmi revised this gist Jan 6, 2016. 1 changed file with 76 additions and 0 deletions.
    76 changes: 76 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,84 @@
    <title>NYT ISIS Attacks Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
    body {
    font-family: 'Helvetica Neue', sans-serif;
    padding: 0;
    margin: 40px;
    }

    #chart circle {
    fill: orange;
    stroke: #bf3e05;
    stroke-width: 2px;
    opacity: 0.7;
    }

    .x.axis path.domain {
    display: none;
    }

    .x.axis line {
    stroke: #c1c1c1;
    shape-rendering: crispEdges;
    }
    .x.axis text {
    fill: #999;
    font-weight: 100;
    }
    </style>
    </head>
    <body>
    <div id="chart"></div>
    <script>
    d3.json('data.json', function(error, json) {

    var data = json.sort(function(a, b) { return b.fatalities - a.fatalities });

    var width = 1200,
    height = 200,
    margin = { top: 0, right: 100, bottom: 0, left: 50 };

    var svg = d3.select('#chart')
    .style({ width: (width+margin.right) + 'px' })
    .append('svg')
    .attr('width', width)
    .attr('height', height);

    var xScale = d3.time.scale();
    var rScale = d3.scale.sqrt();

    var xAxis = d3.svg.axis();

    xScale
    .domain( d3.extent( json, function(d) { return d3.time.format('%Y-%m-%d').parse(d.date) } ) )
    .range([margin.left, width-margin.right])

    rScale
    .domain( [0, d3.max(json, function(d) { return d.fatalities })] )
    .range([0, height/3])

    xAxis.scale(xScale);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (height-25) + ")")
    .call(xAxis);

    svg.selectAll('.x.axis line')
    .attr('y1', -height)
    .attr('y2', 0)

    var circle = svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', function(d) { return xScale(d3.time.format('%Y-%m-%d').parse(d.date)) })
    .attr('cy', height/2)
    .attr('r', function(d) { return rScale(d.fatalities) });
    });
    </script>

    <script>
    // Make the canvas wider on http://bl.ocks.org
  9. karmi revised this gist Jan 6, 2016. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,17 @@
    <head>
    <title>NYT ISIS Attacks Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>

    <script>
    // Make the canvas wider on http://bl.ocks.org
    if (document.location.hostname.indexOf("bl.ocks.org") > -1) {
    d3.select(parent.document).select('iframe').style('width', '1325px').style('height', '400px');
    d3.select(parent.document).select('body').style('width', '1325px').style('margin', '2em');
    d3.select(parent.document).select('.gist-source pre').style('border-left', 'none');
    }
    </script>
    </body>
    </html>
  10. karmi revised this gist Jan 6, 2016. 1 changed file with 433 additions and 0 deletions.
    433 changes: 433 additions & 0 deletions data.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,433 @@
    [
    {
    "date" : "2015-12-02",
    "fatalities" : 14,
    "location" : "California",
    "region" : "North America",
    "description" : "Shooting",
    "link" : "http://www.nytimes.com/interactive/2015/12/02/us/california-mass-shooting-san-bernardino.html"
    },

    {
    "date" : "2015-11-26",
    "fatalities" : 1,
    "location" : "Bangladesh",
    "region" : "Asia",
    "description" : "Attack on mosque",
    "link" : "http://www.nytimes.com/2015/11/27/world/asia/gunmen-strike-shiite-mosque-in-bangladesh.html"
    },

    {
    "date" : "2015-11-24",
    "fatalities" : 7,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Attack on hotel",
    "link" : null
    },

    {
    "date" : "2015-11-24",
    "fatalities" : 12,
    "location" : "Tunisia",
    "region" : "Middle East",
    "description" : "Suicide bomb",
    "link" : "http://www.nytimes.com/2015/11/26/world/middleeast/tunisia-suicide-bombing-presidenital-guard.html"
    },

    {
    "date" : "2015-11-13",
    "fatalities" : 130,
    "location" : "Paris",
    "region" : "Europe",
    "description" : "Attacks on club and restaurants",
    "link" : "http://www.nytimes.com/2015/11/15/world/europe/paris-terrorist-attacks.html"
    },

    {
    "date" : "2015-11-12",
    "fatalities" : 43,
    "location" : "Lebanon",
    "region" : "Middle East",
    "description" : "Suicide bombing",
    "link" : "http://www.nytimes.com/2015/11/13/world/middleeast/lebanon-explosions-southern-beirut-hezbollah.html"
    },

    {
    "date" : "2015-11-04",
    "fatalities" : 4,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Suicide bombing",
    "link" : "http://www.nytimes.com/2015/11/05/world/middleeast/egypt-bombing-sinai-police.html"
    },

    {
    "date" : "2015-11-04",
    "fatalities" : 1,
    "location" : "Bangladesh",
    "region" : "Asia",
    "description" : "Stabbing and shooting",
    "link" : "http://www.nytimes.com/2015/11/06/world/asia/isis-bangladesh-police-attack.html"
    },

    {
    "date" : "2015-10-31",
    "fatalities" : 224,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Russian plane downed",
    "link" : "http://www.nytimes.com/2015/11/10/world/middleeast/suspects-in-russian-jet-crash-risk-exposing-their-isis-allies-to-a-backlash.html"
    },

    {
    "date" : "2015-10-24",
    "fatalities" : 1,
    "location" : "Bangladesh",
    "region" : "Asia",
    "description" : "Bombings",
    "link" : "http://www.nytimes.com/2015/10/25/world/asia/isis-claims-responsibility-for-attack-in-bangladesh-targeting-shias.html"
    },

    {
    "date" : "2015-10-10",
    "fatalities" : 102,
    "location" : "Ankara",
    "region" : "Middle East",
    "description" : "Bombing of a peace rally",
    "link" : "http://www.nytimes.com/2015/10/11/world/europe/ankara-turkey-explosion-deaths.html"
    },

    {
    "date" : "2015-10-06",
    "fatalities" : 25,
    "location" : "Yemen",
    "region" : "Middle East",
    "description" : "Bombings",
    "link" : "http://www.nytimes.com/2015/10/07/world/middleeast/yemen-aden-hotel-explosion.html"
    },

    {
    "date" : "2015-10-03",
    "fatalities" : 1,
    "location" : "Bangladesh",
    "region" : "Asia",
    "description" : "Shooting",
    "link" : "http://www.nytimes.com/2015/10/04/world/asia/in-bangladesh-a-second-foreigner-is-violently-killed.html"
    },

    {
    "date" : "2015-09-28",
    "fatalities" : 1,
    "location" : "Bangladesh",
    "region" : "Asia",
    "description" : "Shooting",
    "link" : "http://www.nytimes.com/2015/09/30/world/asia/-isis-bangladesh-cesare-tavella.html"
    },

    {
    "date" : "2015-09-24",
    "fatalities" : 25,
    "location" : "Yemen",
    "region" : "Middle East",
    "description" : "Bombings",
    "link" : "http://www.nytimes.com/2015/09/25/world/middleeast/sana-yemen-mosque-suicide-attack.html"
    },

    {
    "date" : "2015-09-02",
    "fatalities" : 20,
    "location" : "Yemen",
    "region" : "Middle East",
    "description" : "Bombings",
    "link" : "http://www.nytimes.com/2015/09/03/world/middleeast/yemen-red-cross-workers-shot-dead.html"
    },

    {
    "date" : "2015-08-26",
    "fatalities" : 2,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Shooting of police officers",
    "link" : null
    },

    {
    "date" : "2015-08-12",
    "fatalities" : 1,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Beheading of Croatian worker",
    "link" : "http://www.nytimes.com/2015/08/13/world/middleeast/isis-egypt-croatian-beheading.html"
    },

    {
    "date" : "2015-08-07",
    "fatalities" : 15,
    "location" : "Saudi Arabia",
    "region" : "Middle East",
    "description" : "Sucide bombing at a mosque",
    "link" : "http://www.nytimes.com/2015/08/07/world/middleeast/suicide-bombing-saudi-arabia.html"
    },

    {
    "date" : "2015-07-20",
    "fatalities" : 32,
    "location" : "Turkey",
    "region" : "Middle East",
    "description" : "Suicide bombing",
    "link" : "http://www.nytimes.com/2015/07/23/world/europe/turkey-suruc-bombing.html"
    },

    {
    "date" : "2015-07-11",
    "fatalities" : 1,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Embassy explosion",
    "link" : "http://www.nytimes.com/2015/07/12/world/middleeast/egypt-bombing-at-italian-consulate-in-cairo.html"
    },

    {
    "date" : "2015-07-01",
    "fatalities" : 21,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Attacks on military bases",
    "link" : "http://www.nytimes.com/2015/07/02/world/middleeast/sinai-isis-attack.html"
    },

    {
    "date" : "2015-06-26",
    "fatalities" : 38,
    "location" : "Tunisia",
    "region" : "Middle East",
    "description" : "Shooting at beach resort",
    "link" : "http://www.nytimes.com/2015/06/27/world/africa/gunmen-attack-hotel-in-sousse-tunisia.html"
    },

    {
    "date" : "2015-06-26",
    "fatalities" : 27,
    "location" : "Kuwait",
    "region" : "Middle East",
    "description" : "Suicide bombing at a mosque",
    "link" : "http://www.nytimes.com/2015/06/27/world/middleeast/terror-attacks-france-tunisia-kuwait.html"
    },

    {
    "date" : "2015-06-26",
    "fatalities" : 70,
    "location" : "Somalia",
    "region" : "Africa",
    "description" : "Attack on African Union base",
    "link" : "http://www.nytimes.com/2015/06/27/world/africa/somalia-shabab-militants-attack-african-union-base.html"
    },

    {
    "date" : "2015-06-17",
    "fatalities" : 30,
    "location" : "Yemen",
    "region" : "Middle East",
    "description" : "Car bombings",
    "link" : "http://www.nytimes.com/2015/06/18/world/middleeast/isis-claims-responsibility-for-deadly-bombings-in-yemen.html"
    },

    {
    "date" : "2015-06-05",
    "fatalities" : 2,
    "location" : "Turkey",
    "region" : "Middle East",
    "description" : "Explosion",
    "link" : "http://www.nytimes.com/2015/06/06/world/europe/days-before-election-in-turkey-blasts-at-rally-kill-2.html"
    },

    {
    "date" : "2015-06-03",
    "fatalities" : 10,
    "location" : "Afghanistan",
    "region" : "Asia",
    "description" : "Beheading of Taliban members",
    "link" : "http://www.nytimes.com/2015/06/05/world/asia/afghanistan-taliban-face-insurgent-threat-from-isis.html"
    },

    {
    "date" : "2015-05-31",
    "fatalities" : 4,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Suicide bomber",
    "link" : "http://www.nytimes.com/2015/06/01/world/africa/western-officials-alarmed-as-islamic-state-expands-territory-in-libya.html"
    },

    {
    "date" : "2015-05-29",
    "fatalities" : 3,
    "location" : "Saudi Arabia",
    "region" : "Middle East",
    "description" : "Suicide bombing at a mosque",
    "link" : "http://www.nytimes.com/2015/05/30/world/middleeast/mosque-bombing-saudi-arabia-shiites-dammam.html"
    },

    {
    "date" : "2015-05-22",
    "fatalities" : 21,
    "location" : "Saudi Arabia",
    "region" : "Middle East",
    "description" : "Suicide bombing at a mosque",
    "link" : "http://www.nytimes.com/2015/05/23/world/middleeast/suicide-bombing-saudi-arabia-shiites-sunnis-yemen-mosque.html"
    },

    {
    "date" : "2015-04-30",
    "fatalities" : 15,
    "location" : "Yemen",
    "region" : "Middle East",
    "description" : "Killing of soldiers",
    "link" : null
    },

    {
    "date" : "2015-04-19",
    "fatalities" : 28,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Beheading and shooting",
    "link" : ""
    },

    {
    "date" : "2015-04-12",
    "fatalities" : 12,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Attack on police and military",
    "link" : "http://www.nytimes.com/2015/04/13/world/middleeast/sinai-group-kills-officers-in-bombings.html"
    },

    {
    "date" : "2015-04-12",
    "fatalities" : 2,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Shooting at embassy",
    "link" : "http://www.nytimes.com/2015/04/13/world/middleeast/fatal-shooting-at-south-korean-embassy-in-libya.html"
    },

    {
    "date" : "2015-04-08",
    "fatalities" : 2,
    "location" : "Saudi Arabia",
    "region" : "Middle East",
    "description" : "Shooting",
    "link" : null
    },

    {
    "date" : "2015-04-05",
    "fatalities" : 4,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Attack at security checkpoint",
    "link" : null
    },

    {
    "date" : "2015-04-02",
    "fatalities" : 13,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Car bombs",
    "link" : "http://www.nytimes.com/2015/04/03/world/middleeast/egypt-militants-attack-sinai-checkpoints.html"
    },

    {
    "date" : "2015-03-20",
    "fatalities" : 130,
    "location" : "Yemen",
    "region" : "Middle East",
    "description" : "Suicide bombing at a mosque",
    "link" : "http://www.nytimes.com/2015/03/21/world/middleeast/suicide-attacks-at-shiite-mosques-in-yemen.html"
    },

    {
    "date" : "2015-03-18",
    "fatalities" : 22,
    "location" : "Tunisia",
    "region" : "Middle East",
    "description" : "Shooting at a museum",
    "link" : "http://www.nytimes.com/2015/03/20/world/africa/miltants-isis-included-claim-tunisia-museum-attack.html"
    },

    {
    "date" : "2015-02-20",
    "fatalities" : 40,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Car bombs",
    "link" : "http://www.nytimes.com/2015/02/21/world/middleeast/militants-claiming-isis-ties-say-they-carried-out-libya-bombings.html"
    },

    {
    "date" : "2015-02-15",
    "fatalities" : 21,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Beheading of Egyptian Christians",
    "link" : "http://www.nytimes.com/2015/02/16/world/middleeast/islamic-state-video-beheadings-of-21-egyptian-christians.html"
    },

    {
    "date" : "2015-02-15",
    "fatalities" : 2,
    "location" : "Denmark",
    "region" : "Europe",
    "description" : "Shooting",
    "link" : "http://www.nytimes.com/2015/02/16/world/europe/copenhagen-attacks-suspect-is-killed-police-say.html"
    },

    {
    "date" : "2015-02-03",
    "fatalities" : 12,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Attack on air field",
    "link" : "http://www.nytimes.com/2015/02/05/world/middleeast/people-are-killed-in-attack-on-libyan-oil-field.html"
    },

    {
    "date" : "2015-01-29",
    "fatalities" : 44,
    "location" : "Egypt",
    "region" : "Middle East",
    "description" : "Bombings",
    "link" : "http://www.nytimes.com/2015/01/30/world/middleeast/bombings-of-security-facilities-in-sinai-kill-at-least-26.html"
    },

    {
    "date" : "2015-01-27",
    "fatalities" : 8,
    "location" : "Libya",
    "region" : "Middle East",
    "description" : "Armed assualt on Hotel",
    "link" : "http://www.nytimes.com/2015/01/28/world/middleeast/islamic-state-tripoli-libya-terror-attack.html"
    },

    {
    "date" : "2015-01-07",
    "fatalities" : 12,
    "location" : "France",
    "region" : "Europe",
    "description" : "Shootings",
    "link" : "http://www.nytimes.com/2015/01/08/world/europe/charlie-hebdo-paris-shooting.html"
    },

    {
    "date" : "2015-01-09",
    "fatalities" : 5,
    "location" : "France",
    "region" : "Europe",
    "description" : "Shootings",
    "link" : "http://www.nytimes.com/2015/03/14/world/europe/kosher-supermarket-attacked-in-paris-to-reopen.html"
    }
    ]
  11. karmi revised this gist Jan 6, 2016. 2 changed files with 5 additions and 1 deletion.
    4 changes: 4 additions & 0 deletions README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    A reconstruction of the chart from the
    [_Recent Attacks Demonstrate Islamic State’s Ability to Both Inspire and Coordinate Terror_](http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html)
    article in The New York Times, created during the course on data visualization held at the
    Charles University's [New Media Studies](https://www.facebook.com/stunome) department in winter 2015.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <title>NYT ISIS Attacks Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
  12. karmi revised this gist Jan 7, 2016. 1 changed file with 164 additions and 0 deletions.
    164 changes: 164 additions & 0 deletions Rakefile
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,164 @@
    task :default => :server

    # Serving files via Rack

    desc "Serve the files via Rack and Thin"
    task :server => [:dependencies] do
    port = ENV['PORT'] || 8000
    puts "Launching local webserver at <http://localhost:#{port}> ...", "-"*80

    begin
    Thin::Logging.silent = true
    Thin::Server.start port, lambda { |env|
    if env['PATH_INFO'] == '/'
    [200, {'Content-Type' => 'text/html'}, File.new('index.html')]
    else
    Rack::Directory.new('.').(env)
    end
    }
    rescue Exception => e
    if e.message =~ /no acceptor/
    puts "[!] Port #{port} not available, trying next one...", ""
    port += 1
    puts "Launching local webserver at <http://localhost:#{port}> ...", "-"*80
    retry
    end
    raise
    end
    end

    task :dependencies do
    %w| rack thin |.each do |lib|
    begin
    require lib
    rescue LoadError
    puts "[!] Required gem '#{lib}' not found, please install it with:", "",
    " $ gem install #{lib}", "",
    "-"*80
    raise
    end
    end
    end

    # Stepping through the tutorial

    begin
    require 'term/ansicolor'
    class String
    include Term::ANSIColor
    end
    rescue LoadError
    class String
    def black; self; end
    def on_green; self; end
    def on_yellow; self; end
    end
    end

    _ = '-'*80

    desc "List the steps of this tutorial"
    task :steps do
    puts _, "Steps of this tutorial", _
    current = GitSteps.current_step

    GitSteps.steps.each_with_index do |step, i|
    is_current = step.sha == current.sha ? "*" : " "
    puts "#{is_current} #{(i+1).to_s.rjust(3).bold} | #{step.subject.gsub(/^\[\d+\] /, '')}"
    end; puts
    end

    desc "Display current step"
    task :step => [:check] do
    step = GitSteps.current_step
    puts _, "#{step.sha} | #{step.subject.bold}",
    _, "#{step.body}"
    end

    desc "Start the tutorial or switch back to first step"
    task :start => [:check] do
    puts _, "Starting the tutorial with the first step".white.on_magenta, _
    step = GitSteps.steps.first
    puts "#{step.sha} | #{step.subject.bold}",
    "#{step.body}"
    exec "git checkout #{step.sha} > /dev/null 2>&1 "
    end

    desc "Step to the next step of tutorial"
    task :next => [:check] do
    if step = GitSteps.next_step
    puts _, "#{step.sha} | #{step.subject.bold}",
    _, "#{step.body}"
    exec "git checkout #{step.sha} > /dev/null 2>&1 "
    else
    puts "You have reached the end of the tutorial".white.on_green,
    "Start again with: rake start"
    end
    end

    desc "Step to the previous step of tutorial"
    task :previous => [:check] do
    if step = GitSteps.previous_step
    puts _, "#{step.sha} | #{step.subject.bold}",
    _, "#{step.body}"
    exec "git checkout #{step.sha} > /dev/null 2>&1 "
    else
    puts "You are at the beginning of the tutorial".white.on_green,
    "Follow the tutorial with: rake next"
    end
    end

    desc "Show differences between the current step and the previous step"
    task :diff do
    current = GitSteps.current_step
    previous = GitSteps.previous_step
    (puts "[!] Cannot find previous step".white.on_red; exit(1)) unless previous
    puts _, "Previous : #{previous.subject}",
    "Current : #{current.subject}", _
    exec "git diff --color --ignore-all-space --minimal HEAD^ HEAD | cat"
    end

    desc "Reset the tutorial and switch to master branch"
    task :reset => [:check] do
    exec "git checkout master > /dev/null"
    end

    task :check do
    if `which git` == ''
    puts "[!] ERROR: You need Git installed to step through the tutorial.".white.on_red
    exit(1)
    end
    end

    module GitSteps
    class Commit
    attr_reader :sha, :subject, :body
    def initialize(commit)
    @sha, @subject = commit.split('|||', 2)
    @body = %x[git log -n 1 --format='%b' #{sha}].chomp
    end
    def step?; subject =~ /^\[\d+\]/; end
    end

    def steps
    %x[git log --reverse --format='%h|||%s' master]
    .chomp
    .split("\n")
    .map { |commit| Commit.new(commit) }
    .select { |commit| commit.step? }
    end

    def current_step
    Commit.new( %x[git log -n 1--reverse --format='%h|||%s'].chomp )
    end

    def next_step
    steps.select { |step| step.subject > current_step.subject }.first
    end

    def previous_step
    steps.select { |step| step.subject < current_step.subject }.last
    end

    extend self
    end
  13. karmi created this gist Jan 5, 2016.
    10 changes: 10 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>

    </body>
    </html>