O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning D3.js Mapping

Book Description

Build stunning maps and visualizations using D3.js

In Detail

D3.js is a visualization library used for the creation and control of dynamic and interactive graphical forms. It is a library used to manipulate HTML and SVG documents based on data. A consolidated resource on obtaining geographic data, modifying it to your convenience, and visualizing it with augmented data using D3.js, this book will meet your mapping needs.

Starting with a working map, you will explore the tools required to start the construction process, further moving on to cover the fundamentals of SVG and understanding its relation to creating maps using D3. Equipped with this overview, you will learn to make optimum use of D3's mapping, covering the main enter, update, and exit methods that allow D3.js to do its magic. Dealing with data joining and pairing with HTML and SVG, you will be introduced to different aspects of GEO data, along with the common file formats and converting data into GeoJSON and TopoJSON. You will learn to apply interactivity to your maps and create stunning visualizations before finally ensuring problem-free development with a chapter on troubleshooting.

What You Will Learn

  • Access data resources to make maps and learn how to modify structures
  • Render your maps on a browser
  • Style your maps according to your needs and bind events to maps to make them interactive
  • Tie paths to the geospatial data to outline an SVG map
  • Use Chrome Dev Tools in order to inspect created code
  • Fetch data through AJAX calls with the assistance of the D3.js library
  • Work with data structures and compose blocks of logic into reusable functions
  • Troubleshoot your code

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Learning D3.js Mapping
    1. Table of Contents
    2. Learning D3.js Mapping
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Gather Your Cartographer's Toolbox
      1. Quick bootstrap
      2. Step-by-step bootstrap
        1. A lightweight web server
      3. Optimizing geographic data files with TopoJSON
      4. Using the web browser as a development tool
        1. Installing the sample code
        2. Working with the developer tools
      5. Summary
    9. 2. Creating Images from Simple Text
      1. Introduction – general knowledge
      2. Positioning elements
      3. Line
      4. Rectangle
      5. Circle
      6. Polygon
      7. Path
        1. Experiment
        2. Paths with curves
      8. Transform
        1. Translate
        2. Scale
      9. Grouping
      10. Text
      11. Summary
    10. 3. Producing Graphics from Data – the Foundations of D3
      1. Creating basic SVG elements
      2. Enter
      3. Update
      4. Exit
      5. AJAX
      6. Summary
    11. 4. Creating a Map
      1. Foundation – creating your basic map
        1. Including the dataset
      2. Experiment 1 – adjusting the bounding box
      3. Experiment 2 – creating choropleths
      4. Experiment 3 – adding click events to our visualization
      5. Experiment 4 – using updates and transitions to enhance our visualization
      6. Experiment 5 – adding points of interest
      7. Experiment 6 – adding visualizations as a point of interest
      8. Summary
    12. 5. Click-click Boom! Applying Interactivity to Your Map
      1. Events and how they occur
      2. Experiment 1 – hover events
      3. Experiment 2 – tooltips with visualizations
      4. Experiment 3 – panning and zooming
      5. Experiment 4 – orthographic projections
      6. Experiment 5 – rotating orthographic projections
      7. Experiment 6 – dragging orthographic projections
      8. Summary
    13. 6. Finding and Working with Geographic Data
      1. GeoData file types
        1. What are shapefiles and how do I get them?
        2. Acquiring shapefiles for a specific country
        3. GeoJSON
        4. A quick map in D3 with only GeoJSON
        5. TopoJSON basics
        6. TopoJSON command-line tips
          1. Preserving specific attributes
          2. Simplification
          3. Merging files
      2. Summary
    14. 7. Testing
      1. Code organization and reusable assets
      2. Project structure
        1. Exploring the code directory
        2. Other administrative files
      3. Writing testable code
        1. Keeping methods/functions small
        2. Preventing side effects
        3. An example with viz.js
      4. Unit testing
      5. Creating resilient visualization code
        1. Adding a new test case
      6. Summary
    15. Index