A data driven news package I pitched and built for the 2015 Online News Association Student Newsroom.
Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>ONA 15 Attendees: Demographic Breakdown</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- Latest compiled and minified Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link href='https://fonts.googleapis.com/css?family=Crimson+Text:400,600,700,400italic,600italic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css" /></head><body class=""> <div id="main-wrapper" class=""> <div id="main-content" class="container"> <header class="row"> <div class="social-links col-md-12"></div> <div class="col-md-12"> <h1 class="text-center">ONA 15 Attendees: <br>Demographic Breakdown</h1> <div class="byline text-center">By <a href="https://twitter.com/Jeremy_CF_Lin">Jeremy C.F. Lin</a>, <a href="https://twitter.com/asilver360">Andrew Silver</a> and <a href="https://twitter.com/ernestorivera">Ernesto Rivera</a> </div> <div class="meta text-center"> Published September 25, 2015 </div> </div> </header> <section class="row map-row"> <div class="col-md-5 globe-text"> <h3>A Global Contingent</h3> <p>ONA conference has grown from a couple of hundred attendees in its first few years to more than 2,000 journalists from around the world. The conference sold out for its ninth year in a row and broke its record for number of attendees.</p> <p><span class="instruction">Drag and zoom for more detail.</span> </p> <button type="button" class="btn btn-default reset-btn disabled background">Reset Map</button> </div> <div class="col-md-7"> <div id="map" class="chart"></div> </div> <div class="col-md-12"> </div> </section> <section class="charts"> <div class="row fix_margin"> <div class="col-md-7 desc"> <h3>Top Countries</h3> <p>With approximately 300 attendees from other countries, there are three times as many international journalists than last year. They packed their meetup Thursday to standing-room only. </p> </div> <div class="col-md-5 chart"> <table class="table table-condensed"> <tr> <th>Rank</th> <th>Country</th> <th class='num'>Attendees</th> </tr> <tr> <td>1</td> <td>United States</td> <td class='num'>1,811</td> </tr> <tr> <td>2</td> <td>Canada</td> <td class='num'>93</td> </tr> <tr> <td>3</td> <td>Norway</td> <td class='num'>23</td> </tr> <tr> <td>4</td> <td>England</td> <td class='num'>17</td> </tr> <tr> <td>5</td> <td>Italy</td> <td class='num'>14</td> </tr> <tr> <td>6</td> <td>Denmark</td> <td class='num'>12</td> </tr> <tr> <td>7</td> <td>Japan</td> <td class='num'>11</td> </tr> <tr> <td>8</td> <td>Brasil</td> <td class='num'>8</td> </tr> <tr> <td>8</td> <td>Germany</td> <td class='num'>8</td> </tr> <tr> <td>8</td> <td>Ukraine</td> <td class='num'>8</td> </tr> </table> </div> </div> <div class="row fix_margin"> <div class="col-md-7 desc"> <h3>Top Organizations</h3> <p>The New York Times and The Los Angeles Times are the most represented organizations, with other media and tech giants also topping the list. Freelancers, however, almost made it to the top 10, coming in at 11.</p> </div> <div class="col-md-5 chart"> <table class="table table-condensed"> <tr> <th>Rank</th> <th>Affiliation</th> <th class='num'>Attendees</th> </tr> <tr> <td>1</td> <td>CNN</td> <td class='num'>40</td> </tr> <tr> <td>2</td> <td>The New York Times</td> <td class='num'>38</td> </tr> <tr> <td>3</td> <td>Freelance</td> <td class='num'>35</td> </tr> <tr> <td>4</td> <td>Los Angeles Times</td> <td class='num'>33</td> </tr> <tr> <td>5</td> <td>Google</td> <td class='num'>27</td> </tr> <tr> <td>6</td> <td>Gannett</td> <td class='num'>26</td> </tr> <tr> <td>7</td> <td>Twitter, Inc.</td> <td class='num'>23</td> </tr> <tr> <td>8</td> <td>NPR</td> <td class='num'>21</td> </tr> <tr> <td>9</td> <td>Associated Press</td> <td class='num'>19</td> </tr> <tr> <td>10</td> <td>The Washington Post</td> <td class='num'>18</td> </tr> </table> </div> </div> <div class="row fix_margin"> <div class="col-md-7 desc"> <h3>Newcomers</h3> <p>More than 42 percent of people at ONA15 are attending the conference for the first time, down from 52 percent last year. More than 10 percent have been to three or more conferences.</p> </div> <div class="col-md-5 chart"> <table class="table table-condensed"> <tr> <th>Conference attendended</th> <th>Attendees</th> <th class='num'>Percentage</th> </tr> <tr> <td>This will be my first conference</td> <td>899</td> <td class='num'>42.4%</td> </tr> <tr> <td>1</td> <td>241</td> <td class='num'>11.4%</td> </tr> <tr> <td>2</td> <td>104</td> <td class='num'>4.9%</td> </tr> <tr> <td>3</td> <td>105</td> <td class='num'>5.0%</td> </tr> <tr> <td>4-7</td> <td>166</td> <td class='num'>7.8%</td> </tr> <tr> <td>NO ANSWER</td> <td>606</td> <td class='num'>28.6%</td> </tr> </table> </div> </div> </section> <footer> <div id="source-line" class="text-center">Source: ONA Registration database current as of Sept. 21, 2015. Note: Some location data could not be parsed. Some organizations and locations were missing from the data.</div> </footer> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js'></script> <script src="d3.geo.zoom.js"></script> <script src='arc.js'></script> <script src="script.js"></script></body></html> https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js
https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js