-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (121 loc) · 8.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<head>
<title>WRAL data interactives</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700%7CDroid+Sans:400,700%7CArvo:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/main.min.css?v=20150223a">
<link rel="Shortcut Icon" href="http://wwwcache.wral.com/favicon.ico" />
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body class="wral">
<div class="g-wrap">
<div class="container">
<div class="1-default">
<h2 style="margin-top:20px;">WRAL data interactives</h2>
<p>This is how the data team at WRAL News organizes recurring code for its interactives, visualizations and applications.</p>
<p><b>Note:</b> Although most of the code instructions contained on these pages will be specific for WRAL's content management system, feel free to make use of the code for the demos on the page (for example, by viewing the page's source).</p>
<h3 >Responsive mapping</h3>
<ul>
<li><h5 style="margin-bottom:0px;">Leaflet</h5>
<i>A javascript library for creating interactive, detailed maps using tile layers.</i></li>
<ul>
<li><a href="/leaflet-nc-counties.html">Mapping NC counties</a></li>
<li>Mapping US states (TK)</li>
</ul>
<li><h5 style="margin-bottom:0px;margin-top:10px;">D3</h5>
<i>A javascript library for visualization using HTML, CSS and SVG.</i></li>
<ul>
<li><a href="/d3-nc-counties.html">NC counties</a></li>
<li><a href="/d3-us-states.html">US states</a></li>
</ul>
</ul>
<h3 style="margin-top:20px;">Charts/graphics</h3>
<ul>
<li><a href="/jqplot-simple-bar.html">Simple bar chart with jqPlot</a></li>
<li><a href="/jqplot-simple-line.html">Simple line chart with jqplot<a/></li>
<li><a href="/jqueryui-searchable-input.html">Searchable input with jQuery</a></li>
<li><a href="/wordcloud.html">Word clouds</a></li>
</ul>
<h3>Loading external data</h3>
<ul>
<li><a href="/line-chart-buttons.html">Line chart with button options</a></li>
<li>Line chart with selectable input (TK)</li>
</ul>
<h3 style="margin-top:20px;">Common data/resources</h3>
<ul>
<li><a href="https://gist.github.com/mtdukes/ed03837107a7e173a56b71cf7c785424">NC counties, comma- and line-separated and text-qualified by single quotes</a></li>
<li><a href="https://gist.github.com/mtdukes/88e089e6dd08b12e57667dd7fe3b4305">NC Counties and court codes, as tuples</a></li>
<li><a href="https://gist.github.com/mtdukes/e6636bb7e7423fbf0faf52134257d675">State names and postal code abbreviations, comma- and line-separated and text-qualified by single quotes</a></li>
</ul>
<h3>Guiding principles</h3>
<p>• Data <a href="http://www.darkhorseanalytics.com/blog/data-looks-better-naked">look better naked</a></p>
<div style="max-width:400px; display: block;margin: 0;">
<img style="margin-bottom:10px;" src="./images/data-ink.gif" />
</div>
<p>• Internal consistency is crucial</p>
<p>• Advice from <a href="https://github.com/archietse/malofiej-2016/blob/master/tse-malofiej-2016-slides.pdf">NYT Deputy Graphics Director Archie Tse</a>:</p>
<ol>
<li>If you make the reader click or do anything other than scroll, something spectacular has to happen</li>
<li>If you make a tooltip or rollover, assume no one will see it. If content is important for readers to see, don't hide it</li>
<li>When deciding whether to make something interactive, remember that getting it to work on all platforms is expensive</li>
</ol>
<h3 style="margin-top:20px;">Responsive tables</h3>
<ul>
<li>Mapping with tables (TK)</li>
</ul>
<h3 style="margin-top:20px;">Quizzes</h3>
<ul>
<li>Random(TK)</li>
<li>Fixed(TK)</li>
</ul>
<h3 style="margin-top:20px;">Live examples</h3>
<ul>
<li><a href="http://www.wral.com/state-data-show-assaults-on-police-declined-over-decade/15843540/">Footables and dynamic charts generated by search</a></li>
<li><a href="http://www.wral.com/how-2-redrawn-districts-could-affect-most-nc-voters/15339226/">Steppable leaflet map views with triggered events</a></li>
<li><a href="http://www.wral.com/why-new-districts-may-change-who-you-elect-to-congress/15383198/">Leaflet location with Wherewolf and selectable dataset</a></li>
<li><a href="http://www.wral.com/search-thousands-of-unc-scandal-records/15030171/">Searchable documents via DocumentCloud</a></li>
<li><a href="http://wral.com/14958080">User-filtered markers on NC map with leaflet</a></li>
<li><a href="http://www.wral.com/critics-say-proposal-to-cut-food-benefits-will-hit-rural-areas-hard/14943882/">Selectable choropleth of NC counties with D3, multiple variables</a></li>
<li><a href="http://www.wral.com/food-stamp-map/14943126/">Selectable NC counties with D3 (Storyteller/Fullscreen version)</a></li>
<li><a href="http://www.wral.com/both-sides-of-confederate-debate-pressure-mccrory-to-act/14790770/">Single variable choropleth of NC counties with D3</a></li>
<li><a href="http://www.wral.com/rural-hospitals-in-trouble/14614839/">U.S. states with D3</a></li>
<li><a href="http://www.wral.com/highway-funding-sees-federal-retreat-across-most-states/14437962/">U.S. states with D3 (selectable datasets)</a></li>
<li><a href="http://www.wral.com/explore-tests-of-well-water-near-duke-coal-ash-ponds/14735307/">Leaflet map of NC with custom markers</a></li>
<li><a href="http://www.wral.com/news/state/page/14027662/">Table/county map with Leaflet/Footables</a></li>
<li><a href="http://www.wral.com/news/state/nccapitol/page/14375698/">Leaflet location with Wherewolf</a></li>
<li><a href="http://www.wral.com/as-staff-shortages-persist-prison-chiefs-push-for-raises/14740160/">Selectable line chart with jqPlot</a></li>
<li><a href="http://www.wral.com/in-2014-midterm-turnout-shows-tiny-voter-shifts/14302061/">County map with D3 and graphs with jqPlot</a></li>
<li><a href="http://www.wral.com/fact-check-the-senate-debate/14053754/">Responsive table with Footable</a></li>
<li><a href="http://www.wral.com/across-nc-heavy-fines-wane-for-top-polluters/13571070/">Stacked bar charts with jqPlot</a></li>
<li><a href="http://www.wral.com/size-of-food-stamp-backlog-dwindles/13424836/">Fever chart with milestones</a></li>
<li><a href="http://www.wral.com/-price-of-vision-much-higher-for-nc-medicare-patients/13592597/">Simple bar chart with jqPlot</a></li>
<li><a href="http://www.wral.com/news/local/page/13499869/">Quiz with random question selection</a></li>
<li><a href="http://www.wral.com/lifestyles/healthteam/page/14459707/">Quiz with fixed question selection</a></li>
</ul>
<h3 style="margin-top:20px;">Other inspiration</h3>
<ul>
<li><a href="http://eyeseast.github.io/visible-data/">Visible Data // Chris Amico</a></li>
<li><a href="https://github.com/mbostock/d3/wiki/Gallery">D3 example gallery // Mike Bostock</li>
<li><a href="http://www.jqplot.com/deploy/dist/examples/">jqPlot example gallery</a></li>
<li><a>Source: journalism code and the people who make it</a></li>
<li><a href="https://www.propublica.org/article/how-information-graphics-reveal-your-brains-blind-spots">How Information Graphics Reveal Your Brain’s Blind Spots</a></li>
<li><a href="https://www.washingtonpost.com/news/wonk/wp/2016/04/11/the-dirty-little-secret-that-data-journalists-arent-telling-you/">Why visualizing data is sometimes more art than science</a></li>
</ul>
<h3 style="margin-top:20px;">Docs docs docs</h3>
<ul>
<li><a href="http://leafletjs.com/reference.html">Leaflet documentation</a></li>
<li><a href="http://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet tile options</a></li>
<li a href="http://jqueryui.com/demos/">jQuery UI docs</li>
<li><a href="https://github.com/mbostock/d3/wiki">D3 docs</a></li>
<li><a href="http://fooplugins.com/footable-demos/">Footable docs</a></li>
<li><a href="http://www.jqplot.com/docs/files/usage-txt.html">jqPlot docs</a></li>
<li><a href="http://colorbrewer2.org/">Colorbrewer for selecting map color thresholds</a></li>
</ul>
<p>Questions? <a href="mailto:[email protected]">Contact Tyler Dukes</a>.</p>
</div>
</div>
</div>
</body>