Sign In Start Free Trial

Learning D3.js Mapping

By : Newton, Oscar Villarreal

4.3 (7)

Learning D3.js Mapping

4.3 (7)

By: Newton, Oscar Villarreal

Overview of this book

If you are interested in creating maps for the web GIS data, this book is for you. Familiarity with D3.js will be helpful but is not necessary.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Gather Your Cartographer's Toolbox

1. Gather Your Cartographer's Toolbox

Quick bootstrap

Step-by-step bootstrap

Optimizing geographic data files with TopoJSON

Using the web browser as a development tool

Summary

2. Creating Images from Simple Text

2. Creating Images from Simple Text

Introduction – general knowledge

Positioning elements

Line

Rectangle

Circle

Polygon

Path

Transform

Grouping

Text

Summary

3. Producing Graphics from Data – the Foundations of D3

3. Producing Graphics from Data – the Foundations of D3

Creating basic SVG elements

Enter

Update

Exit

AJAX

Summary

4. Creating a Map

4. Creating a Map

Foundation – creating your basic map

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

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

6. Finding and Working with Geographic Data

GeoData file types

Summary

7. Testing

7. Testing

Code organization and reusable assets

Project structure

Writing testable code

Unit testing

Creating resilient visualization code

Summary

Index

Index

Customer Reviews

4.3 (7)

5 star

71.4%

4 star

14.3%

3 star

0

2 star

0

1 star

14.3%

Update

Not only do we have our rectangles but we've also joined them to a dataset composed of two objects. Both objects share the same properties, namely x, y, width, and height, so it's easy to loop through them and read/bind the values to our visualization. The output of this is a set of static SVG elements. This section will cover how to update the SVG elements and properties as the joined data changes. Let's enhance the previous example to explain exactly how this works (http://localhost:8080/chapter-3/example-4.html):

function makeData(n){
  var arr = [];

  for (var i=0; i<n; i++){
    arr.push({
      x:Math.floor((Math.random() * 100) + 1),
      y:Math.floor((Math.random() * 100) + 1),
      width:Math.floor((Math.random() * 100) + 1),
      height:Math.floor((Math.random() * 100) + 1)
    })
  };

  return arr;
}

This function creates a new array of objects with random properties for x, y, width, and height. We can use this to simulate a change in data, allowing...

Search

Your notes and bookmarks