-
Notifications
You must be signed in to change notification settings - Fork 36
Expand file tree
/
Copy pathexamples.html
More file actions
173 lines (170 loc) · 15.1 KB
/
examples.html
File metadata and controls
173 lines (170 loc) · 15.1 KB
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" type="text/css" href="css/fixed-nav-bar.css" />
<link rel="stylesheet" type="text/css" href="css/markdown.css" />
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="sitename" href="http://arnicas.github.io/interactive-vis-course/index.html">Interactive Data Vis</a>
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="http://arnicas.github.io/interactive-vis-course/index.html">Course Home</a></li>
<li><a href="http://arnicas.github.io/interactive-vis-course/examples.html">Examples List</a></li>
<li><a href="http://github.com/arnicas/interactive-vis-course/">Repo</a></li>
<li><a href="http://www.ghostweather.com">Lynn's Site</a></li>
<li><a href="//twitter.com/arnicas">@arnicas</a></li>
</ul>
</div>
</nav>
<h1 id="all-local-examples-in-the-course">All Local Examples in the Course</h1>
<h2 id="week1-intro">Week1: Intro</h2>
<ul>
<li><a href="Week1/console_javascript.html">console_javascript.html</a>: Console action only.</li>
<li><a href="Week1/d3_load_csv_json.html">d3_load_csv_json.html</a>: Loading simple CSV (and JSON) files with d3.</li>
</ul>
<h2 id="week2-loading-data-highcharts-other-libs">Week2: Loading Data, Highcharts, Other Libs</h2>
<ul>
<li><a href="Week2/highcharts_dot.html">highcharts_dot.html</a>: A not great hack at a dot plot in Highcharts, using data in the chart object.</li>
<li><a href="Week2/highcharts_dot_csv.html">highcharts_dot_csv.html</a>: Another attempted dot plot in Highcharts using external csv data, which is kind of hard.</li>
<li><a href="Week2/highcharts_slope.html">highcharts_slope.html</a>: A not terrible slope chart hacked up in Highcharts.</li>
<li><a href="Week2/simpler_switcher.html">simpler_switcher.html</a>: A simple demo for the logic in the next example, but using 2 buttons.</li>
<li><a href="Week2/highcharts_switch.html">highcharts_switch.html</a>: Template example for a button switch between Highcharts charts, extracted from <a href=<a href="http://datatools.urban.org/Features/wealth-inequality-charts/" class="uri">http://datatools.urban.org/Features/wealth-inequality-charts/</a>">Urban Institute wealth inequality project.</a></li>
<li><a href="Week2/dimple_barchart.html">dimple_barchart.html</a>: Making a bar chart with Dimple.js.</li>
<li><a href="Week2/dimple_dotplot.html">dimple_dotplot.html</a>: A dotplot with Dimple.js.</li>
<li><a href="Week2/d3_simple_append.html">d3_simple_append.html</a>: Appending to the DOM with d3.</li>
<li><a href="Week2/create_p_from_data.html">create_p_from_data.html</a>: Create paragraphs from csv data and append to the DOM - not using a good D3 enter() method yet.</li>
</ul>
<h2 id="week3-more-data-loading-tables-in-d3">Week3: More Data Loading, Tables in D3</h2>
<ul>
<li><a href="Week3/jquery_error_on_load.html">jquery_error_on_load.html</a>: This errors, needs fixing.</li>
<li><a href="Week3/d3_process_data.html">d3_process_data.html</a>: Processing data on load.</li>
<li><a href="Week3/d3_new_obj_data.html">d3_new_obj_data.html</a>: Making new objects with loaded data.</li>
<li><a href="Week3/d3_process_data_dates.html">d3_process_data_dates.html</a>: Doing some data handling in data.</li>
<li><a href="Week3/d3_simplePTable.html">d3_simplePTable.html</a>: Create a bunch of rows using d3's enter/append and a datum header. P elements without real table structure.</li>
<li><a href="Week3/d3_table.html">d3_table.html</a>: A D3 table with real table structure.</li>
<li><a href="Week3/d3_tabulate_function.html">d3_tabulate_function.html</a>: A function to draw a table with.</li>
</ul>
<h2 id="week4-tables-scales-svg">Week4: Tables, Scales, SVG</h2>
<ul>
<li><a href="Week4/d3_data_datum.html">d3_data_datum.html</a>: Some demos of data joins and selection gotchas.</li>
<li><a href="Week4/d3_tabulate_function_sortable.html">d3_tabulate_function_sortable.html</a>: A sortable table using jquery after D3 table creation.</li>
<li><a href="Week4/scale_examples.html">scale_examples.html</a>: Showing some d3 scale code.</li>
<li><a href="Week4/d3_table_heatmap.html">d3_table_heatmap.html</a>: A table with a color heatmap shading.</li>
<li><a href="Week4/SVG_example.html">SVG_example.html</a>: An intro to SVG shapes.</li>
<li><a href="Week4/svg_to_fix.html">svg_to_fix.html</a>: SVG homework.</li>
<li><a href="Week4/d3_dynamic_domain.html">d3_dynamic_domain.html</a>: First bar chart! Using scales in D3 for bar size.</li>
</ul>
<h2 id="week5-bar-charts-axes-text-labels-scatterplots">Week5: Bar Charts, Axes, Text Labels, Scatterplots</h2>
<ul>
<li><a href="Week5/bar_axes_labels.html">bar_axes_labels.html</a>: Labeling axes in bar charts</li>
<li><a href="Week5/scatter_formatting_ticks.html">scatter_formatting_ticks.html</a>: Formatting ticks</li>
<li><a href="Week5/scatter_skeleton.html">scatter_skeleton.html</a>: A starter scatterplot to fix</li>
<li><a href="Week5/dot_plot.html">dot_plot.html</a>: A dot plot example</li>
</ul>
<h2 id="week6-line-charts-events-tooltips">Week6: Line Charts, Events, Tooltips</h2>
<ul>
<li><a href="Week6/scatter_skeleton_fixed.html">scatter_skeleton_fixed.html</a>: The finished version of the scatterplot to fix</li>
<li><a href="Week6/bar_axes_labels_on_data.html">bar_axes_labels_on_data.html</a>: Ordinal axis for Y, data labels on ends of bars</li>
<li><a href="Week6/d3_date_parsing.html">d3_date_parsing.html</a>: Handling dates in your data (read and format)</li>
<li><a href="Week6/emissions_time_scatterplot.html">emissions_time_scatterplot.html</a>: Scatterplot</li>
<li><a href="Week6/emissions_lineplot.html">emissions_lineplot.html</a>: Plotting a line or two</li>
<li><a href="Week6/emissions_lineplot_label.html">emissions_lineplot_label.html</a>: Labeling the end of a single line</li>
<li><a href="Week6/multiple_lines.html">multiple_lines.html</a>: Plotting a lot of lines</li>
<li><a href="Week6/multiple_lines_mouseover.html">multiple_lines_mouseover.html</a>: Just bold the moused-over line</li>
<li><a href="Week6/emissions_scatterplot_tooltip.html">emissions_scatterplot_tooltip.html</a>: Tooltips</li>
<li><a href="Week6/multiple_lines_mouseover_tooltip.html">multiple_lines_mouseover_tooltip.html</a>: More tooltips (on entire line, not point)</li>
</ul>
<h2 id="week7-improved-line-charts-transitions">Week7: Improved Line Charts, Transitions</h2>
<ul>
<li><a href="Week7/emissions_linescatterplot.html">emissions_linescatterplot.html</a>: Dots and lines in the lineplot, with tooltips. Single line.</li>
<li><a href="Week7/multiple_lines_labels.html">multiple_lines_labels.html</a>: Labels on ends of specific lines, with tooltip on data points. Many lines.</li>
<li><a href="Week7/multiple_lines_labels_tooltips.html">multiple_lines_labels_tooltips.html</a>: Tooltips on dots, plus a highlight of the line itself when you mouse over the dots.</li>
<li><a href="Week7/multiple_lines_labels_hover.html">multiple_lines_labels_hover.html</a>: Labels on some lines, plus a hover effect to bold line and reveal hidden labels.</li>
<li><a href="Week7/lines_d3nest.html">lines_d3nest.html</a>: Nesting data to plot lines with d.values</li>
<li><a href="Week7/lines_with_more_data.html">lines_with_more_data.html</a>: Structure for the data that makes access to values easier for interaction</li>
<li><a href="Week7/multiple_lines_voronoi.html">multiple_lines_voronoi.html</a>: Using voronoi overlay to make it easier to target points</li>
<li><a href="Week7/scatter_transition_in.html">scatter_transition_in.html</a>: Delay on arriving dots</li>
<li><a href="Week7/scatter_transition_move_in_slow.html">scatter_transition_move_in_slow.html</a>: A different arrival method, all moving up from origin.</li>
<li><a href="Week7/emissions_linescatterplot.html">emissions_linescatterplot.html</a>: Mouseover triggers a transition</li>
<li><a href="Week7/scatter_data_transition.html">scatter_data_transition.html</a>: Click causes data change and animation (only works once)</li>
<li><a href="Week7/scatter_data_transition_toggle.html">scatter_data_transition_toggle.html</a>: Buttons toggle between data sets, with animation. Just uses an if-check.</li>
<li><a href="Week7/lines_transition.html">lines_transition.html</a>: Button clicks change line chart data, multiple series. (Map is static.)</li>
</ul>
<h2 id="week8-updates-to-data-more-transitions">Week8: Updates to Data, More Transitions</h2>
<ul>
<li><a href="Week8/bar_updates_no_key.html">bar_updates_no_key.html</a>: Update the dumb way, without object constancy</li>
<li><a href="Week8/bostock_bar_updates_simpler.html">bostock_bar_updates_simpler.html</a>: Simplified example of Mike Bostock's Object Constancy example</li>
<li><a href="Week8/bar_updates_key.html">bar_updates_key.html</a>: Updated using a key and coloring by "remaining" bar</li>
<li><a href="Week8/bar_updates_key_sorted.html">bar_updates_key_sorted.html</a>: Data values sorted, update with key, change color to consistent final color.</li>
<li><a href="Week8/scatter_data_update.html">scatter_data_update.html</a>: Restructure to show update pattern with select menu, and new ones come from the "right" direction.</li>
<li><a href="Week8/scatter_homework.html">scatter_homework.html</a>: Finish this.</li>
<li><a href="Week8/bar_homework.html">bar_homework.html</a>: Finish this.</li>
</ul>
<h2 id="week9-stacking-chart-types-grouped-bars">Week9: Stacking Chart Types, Grouped Bars</h2>
<ul>
<li><a href="Week9/bar_homework_done_safe.html">bar_homework_done_safe.html</a>: Final bar homework.</li>
<li><a href="Week9/area_plot.html">area_plot.html</a>: Area plot.</li>
<li><a href="Week9/stacked_area.html">stacked_area.html</a>: Using stacked layout, you can switch easily to the streamgraph display.</li>
<li><a href="Week9/stacked_area_to_stream.html">stacked_area_to_stream.html</a>: UI to do the switch to stream with transition.</li>
<li><a href="Week9/stacked_bar.html">stacked_bar.html</a>: Using a stack for the bar display.</li>
<li><a href="Week9/stacked_bar_transitions.html">stacked_bar_transitions.html</a>: Normalizing is easy with a transition.</li>
<li><a href="Week9/grouped_bars.html">grouped_bars.html</a>: Bars in groups.</li>
<li><a href="Week9/bostock_stacked_to_group.html">bostock_stacked_to_group.html</a>: Transition from stacked to grouped and back!</li>
<li><a href="Week9/js_homework.html">js_homework.html</a>: Homework on js.</li>
</ul>
<h2 id="week10-small-multiples">Week10: Small Multiples</h2>
<ul>
<li><a href="Week10/stacked_area_invert.html">stacked_area_invert.html</a>: Shows how to use an invert on a scale and a bisect to look up values for a tooltip.</li>
<li><a href="Week10/small_multiples_simple.html">small_multiples_simple.html</a>: Static small multiple area charts.</li>
<li><a href="Week10/small_multiples_each.html">small_multiples_each.html</a>: Drawn another way, using "each".</li>
<li><a href="Week10/linked_small_mults.html">linked_small_mults.html</a>: Linked, using code from Jim Vallandingham and a jquery plugin (Isotope) for sorting them.</li>
<li><a href="Week10/linked_small_mults_d3pure.html">linked_small_mults_d3pure.html</a>: No plugin for sorting, done in pure d3 with absolute positions.</li>
<li><a href="Week10/small_multiples_each_trans.html">small_multiples_each_trans.html</a>: Code based on Nathan Yau example, shared scale for axes.</li>
<li><a href="Week10/small_multiples_each_trans_diffaxis.html">small_multiples_each_trans_diffaxis.html</a>: Updated code to have unique scale for each, shows change over time but on local scale.</li>
<li><a href="Week10/africa_map.html">africa_map.html</a>: Map starter code.</li>
</ul>
<h2 id="week11-maps-d3-leaflet-cartodb">Week11: Maps (D3, Leaflet, CartoDB)</h2>
<ul>
<li><a href="Week11/africa_map.html">africa_map.html</a>: Map of borders only.</li>
<li><a href="Week11/africa_map2.html">africa_map2.html</a>: Using country features now.</li>
<li><a href="Week11/africa_map3.html">africa_map3.html</a>: Using a data file, choropleth it.</li>
<li><a href="Week11/word_map_regions.html">world_map_regions.html</a>: Countries colored by regions - data bugs remain! Also d3.legend.</li>
<li><a href="Week11/carto_db_example.html">carto_db_example.html</a>: Using Carto DB!</li>
<li><a href="Week11/africa_map_clicker.html">africa_map_clicker.html</a>: Click on a map to trigger stuff</li>
<li><a href="Week11/rats_in_NYC.html">rats_in_NYC.html</a>: Pure d3 dots on boroughs, no undermap</li>
<li><a href="Week11/rats_in_NYC_leaflet.html">rats_in_NYC_leaflet.html</a>: pure Leaflet map of recent rats</li>
<li><a href="Week11/coloring_us_counties.html">coloring_us_counties.html</a>: US Counties</li>
<li><a href="Week11/coloring_us_counties_with_data.html">coloring_us_counties_with_data.html</a>: Using data to color counties on click</li>
<li><a href="Week11/coloring_florida_with_data.html">coloring_florida_with_data.html</a>: Using data to color Florida counties on click</li>
<li><a href="Week11/us_states_data.html">us_states_data.html</a>: Simple US choropleth plus markers</li>
<li><a href="Week11/us_states_data_leaflet.html">us_states_data_leaflet.html</a>: Same as above but svg layers on top of a Leaflet base map.</li>
<li><a href="Week11/world_comparisons.html">world_comparisons.html</a>: Example based on a Nathan Yau tutorial, complex tooltips too</li>
</ul>
<h2 id="week12-storytelling-scrollers-and-steppers">Week12: Storytelling (Scrollers and Steppers)</h2>
<ul>
<li><a href="Week12/stepper_buttons.html">stepper_buttons.html</a>: Some sketchy logic for next/prev buttons and code for state handling.</li>
<li><a href="Week12/scroller_template_lines2.html">scroller_template_lines2.html</a>: Improved, with more page context and moveToFront() in action.</li>
</ul>
<h2 id="week13-animation-in-ui">Week13: Animation in UI</h2>
<ul>
<li><a href="Week13/animated_lines.html">animated_lines.html</a>: A variety of methods for animated line drawing.</li>
<li><a href="Week13/animated_map_path.html">animated_map_path.html</a>: A dot travels across a map with a play/pause button.</li>
<li><a href="Week13/africa_map_slider.html">africa_map_slider.html</a>: Change data on choropleth map by year, using a play button/slider</li>
<li><a href="Week13/africa_map3_responsive.html">africa_map3_responsive.html</a>: A responsive map example.</li>
<li><a href="Week13/africa_map_tooltips_graph.html">africa_map_tooltips_graph.html</a>: Tooltips have a line chart in them.</li>
<li><a href="Week13/animation_end.html">animation_end.html</a>: Chained sequence of simple animations.</li>
</ul>
<h2 id="week14-reusable-charts-map-click">Week14: Reusable Charts, Map Click</h2>
<ul>
<li><a href="Week14/lines_transition_map.html">lines_transition_map.html</a>: Click on a map to update the line.</li>
<li><a href="Week14/using_reusable_barchart.html">using_reusable_barchart.html</a>: Reusable barchart code in use.</li>
</ul>
</body>
</html>