There are dozens of file formats that represent geographic information. In this section, we will focus on three file types: shapefiles, GeoJSON, and TopoJSON.
Table of Contents for
Learning D3.js 4 Mapping - Second Edition
Learning D3.js 4 Mapping - Second Edition
Published by
Packt Publishing, 2017
- Learning D3.js 4 Mapping, Second Edition
- Title Page
- Second Edition
- Copyright
- Learning D3.js 4 Mapping
- Second Edition
- Credits
- About the Authors
- About the Reviewers
- www.PacktPub.com
- Why subscribe?
- Customer Feedback
- Table of Contents
- Preface
- What this book covers
- What you need for this book
- Who this book is for
- Conventions
- Reader feedback
- Customer support
- Downloading the example code
- Downloading the color images of this book
- Errata
- Piracy
- Questions
- Gathering Your Cartography Toolbox
- Quick bootstrap
- Step-by-step bootstrap
- A lightweight web server
- Using the web browser as a development tool
- Installing the sample code
- Working with the developer tools
- Summary
- Creating Images from Simple Text
- The SVG coordinate system
- Line
- Rectangle
- Circle
- Polygon
- Path
- Experiment
- Paths with curves
- Transform
- Translate
- Scale
- Grouping
- Text
- Summary
- Producing Graphics from Data - the Foundations of D3
- Creating basic SVG elements
- The enter() function
- The update function
- The exit() function
- AJAX
- Summary
- Creating a Map
- Foundation - creating your basic map
- Including the dataset
- Experiment 1 – adjusting the bounding box
- Experiment 2 – creating choropleths
- Experiment 3 – adding click events to our visualization
- Experiment 4 – using updates and transitions to enhance our visualization
- Experiment 5 – adding points of interest
- Experiment 6 – adding visualizations as a point of interest
- Summary
- Click-Click Boom! Applying Interactivity to Your Map
- Events and how they occur
- Experiment 1 – hover events and tooltips
- Experiment 2 – tooltips with visualizations
- Experiment 3 – panning and zooming
- Experiment 4 – orthographic projections
- Experiment 5 – rotating orthographic projections
- Experiment 6 – dragging orthographic projections
- Summary
- Finding and Working with Geographic Data
- Geodata file types
- What are shapefiles and how do I get them?
- Acquiring shapefiles for a specific country
- GeoJSON
- A quick map in D3 with only GeoJSON
- TopoJSON basics
- TopoJSON command-line tips
- Preserving specific attributes
- Simplification
- Merging files
- Summary
- Testing
- Code organization and reusable assets
- Project structure
- Exploring the code directory
- Other administrative files
- Writing testable code
- Keeping methods/functions small
- Preventing side effects
- An example with viz.js
- Unit testing
- Creating resilient visualization code
- Adding a new test case
- Summary
- Drawing with Canvas and D3
- Introducing Canvas
- Drawing with Canvas
- The three drawing steps of every Canvas visual
- Drawing various shapes with Canvas
- Animating the Canvas
- Animating the Canvas way
- Getting a general overview
- Preparing the rain data
- Updating each drop
- Drawing frame by frame
- Canvas and D3
- Getting an overview of our experiment
- The data
- Updating each drop
- Binding the data
- Drawing the data
- Running the app
- Summary
- Mapping with Canvas and D3
- Choosing Canvas or SVG
- Reasons to choose SVG
- Reasons to choose Canvas
- Visualizing flight paths with Canvas and D3
- The data
- Building the flight path map in SVG
- Measuring the performance
- Building the flight path map in Canvas
- Setting up the map
- Drawing the map and listening for user input
- Preparing and drawing with Canvas
- Drawing the background scene
- Defining the planes
- Calculating the plane's positions
- Animating the plane
- Measuring the performance
- Optimizing performance
- Continuing with measuring performance
- Summary
- Adding Interactivity to Your Canvas Map
- Why Canvas interaction is different
- Drawing the world on a Canvas
- Setting up
- Drawing the world
- Making the world move
- Setting up the behavior
- Handling zoom and rotation
- Finding the Canvas object under the mouse - Picking
- Picking, the theory
- Creating all things hidden
- Drawing the hidden Canvas
- Picking the values
- Storing more data and using a lookup array
- Highlighting the country on mouse over
- Visualizing data per country and adding a tooltip
- Adding new data to our old globe
- Coloring the globe
- Adding a tooltip
- The HTML
- Building the static parts of the tooltip
- Showing and hiding the tooltip
- Summary
- Shaping Maps with Data - Hexbin Maps
- Reviewing map visualization techniques
- Choropleth maps
- Cartograms
- Dot density maps
- Value and use of the hexagon
- Making a hexbin map
- Reviewing the hexbin algorithm
- Setting it up
- Drawing the map
- Drawing a point grid for our hexagons
- Keeping only the points within the map
- Making the hex tile
- Retrieving the hexagon center points
- Drawing the hex tiles
- Joining data points to the layout points
- Dressing our data for the final act
- Turning our visual into an interactive app
- Adding additional information on hover and click
- Changing the hexagon size
- Changing the color scale interpolator
- Browsing different datasets
- Encoding data as hexagon size
- Summary
- Publishing Your Visualization with Github Pages
- What we will publish
- Understanding the type of content you can publish
- Hosting your code on GitHub
- Making sense of some key terms and concepts
- Tracking historic changes of your files
- Collaborating on a project
- Working on project branches
- Setting up a GitHub account
- Creating a repository
- Editing a file on GitHub
- Uploading files to the repository
- Publishing your project on GitHub Pages
- Preparing the files for publishing
- Keeping your paths absolute
- Changing the main HTML filename to index.html
- Publishing your project
- Summary