Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
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
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
← Prev
Back
Next →
← Prev
Back
Next →