Learning D3.js Mapping

Table of Contents

Learning D3.js Mapping

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

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

Errata

Piracy

Questions

1. Gather Your Cartographer's Toolbox

Quick bootstrap

Step-by-step bootstrap

A lightweight web server

Optimizing geographic data files with TopoJSON

Using the web browser as a development tool

Installing the sample code

Working with the developer tools

Summary

2. Creating Images from Simple Text

Introduction – general knowledge

Positioning elements

Line

Rectangle

Circle

Polygon

Path

Experiment

Paths with curves

Transform

Translate

Scale

Grouping

Text

Summary

3. Producing Graphics from Data – the Foundations of D3

Creating basic SVG elements

Enter

Update

Exit

AJAX

Summary

4. 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

5. Click-click Boom! Applying Interactivity to Your Map

Events and how they occur

Experiment 1 – hover events

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

6. 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

7. 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

Index

Learning D3.js Mapping

Learning D3.js Mapping

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2014

Production reference: 1221214

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78398-560-9

www.packtpub.com

Credits

Authors

Thomas Newton

Oscar Villarreal

Reviewers

Samrat Ambadekar

Brendon Parker

Alex Rothenberg

Claudio Squarcella

Arjun Srinivasan

David Suther

Commissioning Editor

Ellen Bishop

Acquisition Editor

Rebecca Youé

Content Development Editor

Arun Nadar

Technical Editor

Pankaj Kadam

Copy Editors

Karuna Narayanan

Vikrant Phadkay

Project Coordinator

Neha Bhatnagar

Proofreaders

Simran Bhogal

Stephen Copestake

Ameesha Green

Indexer

Mariammal Chettiyar

Graphics

Abhinash Sahu

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Authors

Thomas Newton has 20 years of experience in the technical industry, working on everything from low-level system designs and data visualization to software design and architecture. Currently, he is creating data visualizations to solve analytical problems for clients. When he is free, he spends as much time as possible with his family, ideally with a skateboard involved.

Oscar Villarreal has been developing interfaces for the past 10 years, and most recently, he has been focusing on data visualization and web applications. In his spare time, he loves to write on his blog, oscarvillarreal.com, and go rock climbing somewhere in the Rockies. He also loves to spend time with his wife and his first child.

About the Reviewers

Samrat Ambadekar is a user experience designer and prototyper, currently residing in the United States. He holds a Master's degree in Human Computer Interaction from Georgia Institute of Technology, Atlanta, and a Bachelor's degree in Computer Engineering from University of Pune, India. He has over 5 years of experience as a designer and developer, with expertise in rapid prototyping and contextual interactions. His work and interests span across UX design, interaction design, concept prototyping, 3D interactions, augmented reality, and data visualization. Apart from work, he enjoys sketching, blogging, hiking/trekking, cooking, and (occasionally) practicing kickboxing. To know more about his work, visit www.samratambadekar.com.

Alex Rothenberg has been writing software for quite a while on mobile apps, websites, and even shrink-wrapped CD-ROMs. The one constant is that he enjoys finding ways to think about complex problems in simple ways. He has really enjoyed working with D3.js recently, as visualizations are such a powerful way to convey information.

Claudio Squarcella is an InfoVis enthusiast, who possesses both theoretical and technical skills. He has a PhD in Computer Science and Engineering and is devoted to web-based network visualization. He currently works at ThousandEyes in San Francisco, where he turns network measurement data into informative graph visualization dashboards for enterprise customers.

Arjun Srinivasan is currently pursuing his graduation in computer science from the Georgia Institute of Technology, Atlanta, USA. He has a Bachelor's degree in Information Science from R. V. College of Engineering, Bangalore, India. He has worked with industry-renowned names, including SAP Labs India and Microsoft Corp. (India) along with several start-ups. His primary research interests include visual analytics, machine learning, and databases, and he focuses on how concepts from these areas can be integrated and applied in the domains of healthcare informatics and business decision-making software development. Arjun has worked with D3.js extensively for a while now, and along with using D3.js for almost all his projects, he has also developed D3.js-based plugins for two start-ups in Bangalore, India. His current projects in the visualization domain include a genome visualization project with the Georgia Aquarium and a business ecosystem visualization tool. His website can be viewed at http://arjun010.github.io/.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search,