epubjs
Version:
Render ePub documents in the browser, across many devices
3 lines (2 loc) • 16.4 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg"><head><title>Interactive Data Visualization for the Web</title><link rel="stylesheet" type="text/css" href="core.css"/><meta name="generator" content="DocBook XSL Stylesheets V1.76.1"/><meta name="description" content="<p>Create and publish your own interactive data visualization projects on the Web&#8212;even if you have little or no experience with data visualization or web development. It&#8217;s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.</p>"/></head><body><h1>Interactive Data Visualization for the Web</h1><div class="toc"><div class="toc-title">Table of Contents</div><nav epub:type="toc"><ol><li><a href="upgrade_offer_front.html">Special Upgrade Offer</a></li><li><a href="examples_page.html">A Note Regarding Supplemental Files</a></li><li><a href="pr03.html">Preface</a><ol><li><a href="pr03.html#_conventions_used_in_this_book">Conventions Used in This Book</a></li><li><a href="pr03.html#_using_code_examples">Using Code Examples</a></li><li><a href="pr03.html#_safari_books_online">Safari® Books Online</a></li><li><a href="pr03.html#_how_to_contact_us">How to Contact Us</a></li><li><a href="pr03.html#_acknowledgments">Acknowledgments</a></li></ol></li><li><a href="ch01.html">1. Introduction</a><ol><li><a href="ch01.html#_why_data_visualization">Why Data Visualization?</a></li><li><a href="ch01.html#_why_write_code">Why Write Code?</a></li><li><a href="ch01.html#_why_interactive">Why Interactive?</a></li><li><a href="ch01.html#_why_on_the_web">Why on the Web?</a></li><li><a href="ch01.html#_what_this_book_is">What This Book Is</a></li><li><a href="ch01.html#_who_you_are">Who You Are</a></li><li><a href="ch01.html#_what_this_book_is_not">What This Book Is Not</a></li><li><a href="ch01.html#_using_sample_code">Using Sample Code</a></li><li><a href="ch01.html#_thank_you">Thank You</a></li></ol></li><li><a href="ch02.html">2. Introducing D3</a><ol><li><a href="ch02.html#_what_it_does">What It Does</a></li><li><a href="ch02.html#_what_it_doesn_t_do">What It Doesn’t Do</a></li><li><a href="ch02.html#_origins_and_context">Origins and Context</a></li><li><a href="ch02.html#alternatives_2">Alternatives</a><ol><li><a href="ch02.html#_easy_charts">Easy Charts</a></li><li><a href="ch02.html#_graph_visualizations">Graph Visualizations</a></li><li><a href="ch02.html#_geomapping">Geomapping</a></li><li><a href="ch02.html#_almost_from_scratch">Almost from Scratch</a></li><li><a href="ch02.html#_three_dimensional">Three-Dimensional</a></li><li><a href="ch02.html#_tools_built_with_d3">Tools Built with D3</a></li></ol></li></ol></li><li><a href="ch03.html">3. Technology Fundamentals</a><ol><li><a href="ch03.html#_the_web">The Web</a></li><li><a href="ch03.html#_html">HTML</a><ol><li><a href="ch03.html#_content_plus_structure">Content Plus Structure</a></li><li><a href="ch03.html#_adding_structure_with_elements">Adding Structure with Elements</a></li><li><a href="ch03.html#_common_elements">Common Elements</a></li><li><a href="ch03.html#_attributes">Attributes</a></li><li><a href="ch03.html#_classes_and_ids">Classes and IDs</a></li><li><a href="ch03.html#_comments">Comments</a></li></ol></li><li><a href="ch03.html#_dom">DOM</a></li><li><a href="ch03.html#developer_tools_3">Developer Tools</a></li><li><a href="ch03.html#_rendering_and_the_box_model">Rendering and the Box Model</a></li><li><a href="ch03.html#_css">CSS</a><ol><li><a href="ch03.html#_selectors">Selectors</a></li><li><a href="ch03.html#_properties_and_values">Properties and Values</a></li><li><a href="ch03.html#_comments_2">Comments</a></li><li><a href="ch03.html#_referencing_styles">Referencing Styles</a><ol><li><a href="ch03.html#_embed_the_css_in_your_html">Embed the CSS in your HTML.</a></li><li><a href="ch03.html#_reference_an_external_stylesheet_from_the_html">Reference an external stylesheet from the HTML.</a></li><li><a href="ch03.html#_attach_inline_styles">Attach inline styles.</a></li></ol></li><li><a href="ch03.html#_inheritance_cascading_and_specificity">Inheritance, Cascading, and Specificity</a></li></ol></li><li><a href="ch03.html#_javascript">JavaScript</a><ol><li><a href="ch03.html#_hello_console">Hello, Console</a></li><li><a href="ch03.html#_variables">Variables</a></li><li><a href="ch03.html#_other_variable_types">Other Variable Types</a></li><li><a href="ch03.html#_arrays">Arrays</a></li><li><a href="ch03.html#_objects">Objects</a></li><li><a href="ch03.html#_objects_and_arrays">Objects and Arrays</a><ol><li><a href="ch03.html#_json">JSON</a></li><li><a href="ch03.html#_geojson">GeoJSON</a></li></ol></li><li><a href="ch03.html#_mathematical_operators">Mathematical Operators</a></li><li><a href="ch03.html#_comparison_operators">Comparison Operators</a></li><li><a href="ch03.html#_control_structures">Control Structures</a><ol><li><a href="ch03.html#_if_only">if() only</a></li><li><a href="ch03.html#_for_now">for() now</a></li><li><a href="ch03.html#_what_arrays_are_made_for">What arrays are made for()</a></li></ol></li><li><a href="ch03.html#_functions">Functions</a></li><li><a href="ch03.html#_comments_3">Comments</a></li><li><a href="ch03.html#_referencing_scripts">Referencing Scripts</a></li><li><a href="ch03.html#_javascript_gotchas">JavaScript Gotchas</a><ol><li><a href="ch03.html#_dynamic_typing">Dynamic typing</a></li><li><a href="ch03.html#_variable_hoisting">Variable hoisting</a></li><li><a href="ch03.html#_function_level_scope">Function-level scope</a></li><li><a href="ch03.html#_global_namespace">Global namespace</a></li></ol></li></ol></li><li><a href="ch03.html#SVG_3">SVG</a><ol><li><a href="ch03.html#_the_svg_element">The SVG Element</a></li><li><a href="ch03.html#_simple_shapes">Simple Shapes</a></li><li><a href="ch03.html#_styling_svg_elements">Styling SVG Elements</a></li><li><a href="ch03.html#_layering_and_drawing_order">Layering and Drawing Order</a></li><li><a href="ch03.html#_transparency">Transparency</a></li></ol></li><li><a href="ch03.html#_a_note_on_compatibility">A Note on Compatibility</a></li></ol></li><li><a href="ch04.html">4. Setup</a><ol><li><a href="ch04.html#_downloading_d3">Downloading D3</a></li><li><a href="ch04.html#_referencing_d3">Referencing D3</a></li><li><a href="ch04.html#_setting_up_a_web_server">Setting Up a Web Server</a><ol><li><a href="ch04.html#_terminal_with_python">Terminal with Python</a></li><li><a href="ch04.html#_mamp_wamp_and_lamp">MAMP, WAMP, and LAMP</a></li><li><a href="ch04.html#_diving_in">Diving In</a></li></ol></li></ol></li><li><a href="ch05.html">5. Data</a><ol><li><a href="ch05.html#_generating_page_elements">Generating Page Elements</a><ol><li><a href="ch05.html#_chaining_methods">Chaining Methods</a></li><li><a href="ch05.html#_one_link_at_a_time">One Link at a Time</a></li><li><a href="ch05.html#_the_hand_off">The Hand-off</a></li><li><a href="ch05.html#_going_chainless">Going Chainless</a></li></ol></li><li><a href="ch05.html#_binding_data">Binding Data</a><ol><li><a href="ch05.html#_in_a_bind">In a Bind</a></li><li><a href="ch05.html#_data">Data</a><ol><li><a href="ch05.html#_loading_csv_data">Loading CSV data</a></li><li><a href="ch05.html#_loading_json_data">Loading JSON data</a></li></ol></li><li><a href="ch05.html#please_make_your_selection_5">Please Make Your Selection</a></li><li><a href="ch05.html#_bound_and_determined">Bound and Determined</a></li><li><a href="ch05.html#_using_your_data">Using Your Data</a></li><li><a href="ch05.html#_high_functioning">High-Functioning</a></li><li><a href="ch05.html#_data_wants_to_be_held">Data Wants to Be Held</a></li><li><a href="ch05.html#_beyond_text">Beyond Text</a></li></ol></li></ol></li><li><a href="ch06.html">6. Drawing with Data</a><ol><li><a href="ch06.html#_drawing_divs">Drawing divs</a><ol><li><a href="ch06.html#_setting_attributes">Setting Attributes</a></li><li><a href="ch06.html#_a_note_on_classes">A Note on Classes</a></li><li><a href="ch06.html#_back_to_the_bars">Back to the Bars</a></li><li><a href="ch06.html#_setting_styles">Setting Styles</a></li></ol></li><li><a href="ch06.html#_the_power_of_data">The Power of data()</a><ol><li><a href="ch06.html#_random_data">Random Data</a></li></ol></li><li><a href="ch06.html#_drawing_svgs">Drawing SVGs</a><ol><li><a href="ch06.html#_create_the_svg">Create the SVG</a></li><li><a href="ch06.html#_data_driven_shapes">Data-Driven Shapes</a></li><li><a href="ch06.html#_pretty_colors_oooh">Pretty Colors, Oooh!</a></li></ol></li><li><a href="ch06.html#_making_a_bar_chart">Making a Bar Chart</a><ol><li><a href="ch06.html#_the_old_chart">The Old Chart</a></li><li><a href="ch06.html#_the_new_chart">The New Chart</a></li><li><a href="ch06.html#_color">Color</a></li><li><a href="ch06.html#_labels">Labels</a></li></ol></li><li><a href="ch06.html#_making_a_scatterplot">Making a Scatterplot</a><ol><li><a href="ch06.html#_the_data">The Data</a></li><li><a href="ch06.html#_the_scatterplot">The Scatterplot</a></li><li><a href="ch06.html#_size">Size</a></li><li><a href="ch06.html#_labels_2">Labels</a></li></ol></li><li><a href="ch06.html#_next_steps">Next Steps</a></li></ol></li><li><a href="ch07.html">7. Scales</a><ol><li><a href="ch07.html#_apples_and_pixels">Apples and Pixels</a></li><li><a href="ch07.html#_domains_and_ranges">Domains and Ranges</a></li><li><a href="ch07.html#_normalization">Normalization</a></li><li><a href="ch07.html#_creating_a_scale">Creating a Scale</a></li><li><a href="ch07.html#_scaling_the_scatterplot">Scaling the Scatterplot</a><ol><li><a href="ch07.html#_d3_min_and_d3_max">d3.min() and d3.max()</a></li><li><a href="ch07.html#_setting_up_dynamic_scales">Setting Up Dynamic Scales</a></li><li><a href="ch07.html#_incorporating_scaled_values">Incorporating Scaled Values</a></li></ol></li><li><a href="ch07.html#_refining_the_plot">Refining the Plot</a></li><li><a href="ch07.html#_other_methods">Other Methods</a></li><li><a href="ch07.html#_other_scales">Other Scales</a></li></ol></li><li><a href="ch08.html">8. Axes</a><ol><li><a href="ch08.html#_introducing_axes">Introducing Axes</a></li><li><a href="ch08.html#_setting_up_an_axis">Setting Up an Axis</a></li><li><a href="ch08.html#_cleaning_it_up">Cleaning It Up</a></li><li><a href="ch08.html#_check_for_ticks">Check for Ticks</a></li><li><a href="ch08.html#_y_not">Y Not?</a></li><li><a href="ch08.html#_final_touches">Final Touches</a></li><li><a href="ch08.html#_formatting_tick_labels">Formatting Tick Labels</a></li></ol></li><li><a href="ch09.html">9. Updates, Transitions, and Motion</a><ol><li><a href="ch09.html#_modernizing_the_bar_chart">Modernizing the Bar Chart</a><ol><li><a href="ch09.html#_ordinal_scales_explained">Ordinal Scales, Explained</a></li><li><a href="ch09.html#_round_bands_are_all_the_range_these_days">Round Bands Are All the Range These Days</a></li><li><a href="ch09.html#_referencing_the_ordinal_scale">Referencing the Ordinal Scale</a></li><li><a href="ch09.html#_other_updates">Other Updates</a></li></ol></li><li><a href="ch09.html#_updating_data">Updating Data</a><ol><li><a href="ch09.html#_interaction_via_event_listeners">Interaction via Event Listeners</a></li><li><a href="ch09.html#_changing_the_data">Changing the Data</a></li><li><a href="ch09.html#_updating_the_visuals">Updating the Visuals</a></li></ol></li><li><a href="ch09.html#_transitions">Transitions</a><ol><li><a href="ch09.html#_duration_or_how_long_is_this_going_to_take">duration(), or How Long Is This Going to Take?</a></li><li><a href="ch09.html#_ease_y_does_it">ease()-y Does It</a></li><li><a href="ch09.html#_please_do_not_delay">Please Do Not delay()</a></li><li><a href="ch09.html#_randomizing_the_data">Randomizing the Data</a></li><li><a href="ch09.html#_updating_scales">Updating Scales</a></li><li><a href="ch09.html#_updating_axes">Updating Axes</a></li><li><a href="ch09.html#_each_transition_starts_and_ends">each() Transition Starts and Ends</a><ol><li><a href="ch09.html#_warning_start_carefully">Warning: Start carefully</a></li><li><a href="ch09.html#_end_gracefully">End gracefully</a></li><li><a href="ch09.html#_transitionless_each">Transitionless each()</a></li><li><a href="ch09.html#_containing_visual_elements_with_clipping_paths">Containing visual elements with clipping paths</a></li></ol></li></ol></li><li><a href="ch09.html#_other_kinds_of_data_updates">Other Kinds of Data Updates</a><ol><li><a href="ch09.html#_adding_values_and_elements">Adding Values (and Elements)</a><ol><li><a href="ch09.html#_select">Select</a></li><li><a href="ch09.html#_enter">Enter</a></li><li><a href="ch09.html#_update">Update</a></li></ol></li><li><a href="ch09.html#_removing_values_and_elements">Removing Values (and Elements)</a><ol><li><a href="ch09.html#_exit">Exit</a></li><li><a href="ch09.html#_making_a_smooth_exit">Making a smooth exit</a></li></ol></li><li><a href="ch09.html#_data_joins_with_keys">Data Joins with Keys</a><ol><li><a href="ch09.html#_preparing_the_data">Preparing the data</a></li><li><a href="ch09.html#_updating_all_references">Updating all references</a></li><li><a href="ch09.html#_key_functions">Key functions</a></li><li><a href="ch09.html#_exit_transition">Exit transition</a></li></ol></li><li><a href="ch09.html#_add_and_remove_combo_platter">Add and Remove: Combo Platter</a></li><li><a href="ch09.html#_recap">Recap</a></li></ol></li></ol></li><li><a href="ch10.html">10. Interactivity</a><ol><li><a href="ch10.html#_binding_event_listeners">Binding Event Listeners</a></li><li><a href="ch10.html#_introducing_behaviors">Introducing Behaviors</a><ol><li><a href="ch10.html#_hover_to_highlight">Hover to Highlight</a></li></ol></li><li><a href="ch10.html#_grouping_svg_elements">Grouping SVG Elements</a><ol><li><a href="ch10.html#_click_to_sort">Click to Sort</a></li></ol></li><li><a href="ch10.html#_tooltips">Tooltips</a><ol><li><a href="ch10.html#_default_browser_tooltips">Default Browser Tooltips</a></li><li><a href="ch10.html#_svg_element_tooltips">SVG Element Tooltips</a></li><li><a href="ch10.html#_html_div_tooltips">HTML div Tooltips</a></li></ol></li><li><a href="ch10.html#_consideration_for_touch_devices">Consideration for Touch Devices</a></li><li><a href="ch10.html#_moving_forward">Moving Forward</a></li></ol></li><li><a href="ch11.html">11. Layouts</a><ol><li><a href="ch11.html#_pie_layout">Pie Layout</a></li><li><a href="ch11.html#_stack_layout">Stack Layout</a></li><li><a href="ch11.html#_force_layout">Force Layout</a></li></ol></li><li><a href="ch12.html">12. Geomapping</a><ol><li><a href="ch12.html#_json_meet_geojson">JSON, Meet GeoJSON</a></li><li><a href="ch12.html#_paths">Paths</a></li><li><a href="ch12.html#_projections">Projections</a></li><li><a href="ch12.html#_choropleth">Choropleth</a></li><li><a href="ch12.html#_adding_points">Adding Points</a></li><li><a href="ch12.html#_acquiring_and_parsing_geodata">Acquiring and Parsing Geodata</a><ol><li><a href="ch12.html#_find_shapefiles">Find Shapefiles</a></li><li><a href="ch12.html#_choose_a_resolution">Choose a Resolution</a></li><li><a href="ch12.html#_simplify_the_shapes">Simplify the Shapes</a></li><li><a href="ch12.html#_convert_to_geojson">Convert to GeoJSON</a></li></ol></li></ol></li><li><a href="ch13.html">13. Exporting</a><ol><li><a href="ch13.html#_bitmaps">Bitmaps</a></li><li><a href="ch13.html#_pdf">PDF</a></li><li><a href="ch13.html#_svg">SVG</a></li></ol></li><li><a href="apa.html">A. Appendix: Further Study</a><ol><li><a href="apa.html#_books">Books</a></li><li><a href="apa.html#_websites">Websites</a></li><li><a href="apa.html#_twitterers">Twitterers</a></li></ol></li><li><a href="ix01.html">Index</a></li><li><a href="author_bios.html">About the Author</a></li><li><a href="co02.html">Colophon</a></li><li><a href="upgrade_offer_back.html">Special Upgrade Offer</a></li><li><a href="copyright.html">Copyright</a></li></ol></nav></div></body></html>