This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function($) { | |
$( document ).tooltip({ | |
items: "[data-tooltip]", | |
content: function() { | |
var element = $( this ); | |
var text = element.text(); | |
var url = element.attr('data-tooltip'); | |
return "<img class='map' alt='" + text + | |
"' src='" + url + "'>"; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Your title here</title> | |
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> | |
<script src="//code.jquery.com/jquery-1.10.2.js"></script> | |
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> | |
<script> | |
$(function() { | |
$( document ).tooltip({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Say, I'm writing a story set in Mexico City and I want to show you a photo of its <span style="background-color: #ffff66;" data-tooltip="http://upload.wikimedia.org/wikipedia/commons/9/98/Mexico_City_Zocalo_Cathedral.jpg">main square</span> without moving away from my narrative layout. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<meta property="og:locale" content="en_US" /> | |
<meta property="og:type" content="article" /> | |
<meta property="og:title" content="How AlJazeera plans its interactive storytelling projects - Storybench" /> | |
<meta property="og:description" content="AlJazeera has built several long-form storytelling projects that have infused investigative journalism with digital technology and allowed users to experience stories in engaging ways. See The War Across the River about refugees from the Central African Republic, or Freedom Denied, an interactive exploration of what happens to some Palestinians after they’re arrested by the Israeli military. Palestine Remix, one of the largest interactives [...]" /> | |
<meta property="og:url" content="http://www.storybench.org/how-aljazeera-plans-its-interactive-storytelling-projects/" /> | |
<meta property="og:site_name" content="Storybench" /> | |
<meta property="article:publisher" content="https://www.facebook.com/storybench" /> | |
<meta property="og:image" content="http://www.storybench.org/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<meta name="twitter:card" content="summary_large_image"/> | |
<meta name="twitter:description" content="AlJazeera has built several long-form storytelling projects that have infused investigative journalism with digital technology and allowed users to experience stories in engaging ways. See The War Across the River about refugees from the Central African Republic, or Freedom Denied, an interactive exploration of what happens to some Palestinians after they’re arrested by the Israeli military. Palestine Remix, one of the largest interactives [...]"/> | |
<meta name="twitter:title" content="How AlJazeera plans its interactive storytelling projects - Storybench"/> | |
<meta name="twitter:site" content="@storybench"/> | |
<meta name="twitter:domain" content="Storybench"/> | |
<meta name="twitter:image:src" content="http://www.storybench.org/wp-content/uploads/2015/05/interaljazeera.jpg"/> | |
<meta name="twitter:creator" content="@storybench"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function population(d) { | |
d.all = +d.all; | |
d.male = +d.male; | |
d.female = +d.female; | |
return d; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var marginbottom = 0, chartwidth = 90, chartheight = 30; //3D units | |
var xscale = d3.scale.linear().range([0, chartwidth]), | |
yscale = d3.scale.linear().range([0, chartheight]); |
OlderNewer