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%

Line

The SVG line is one of the simplest in the library. It draws a straight line from one point to another. The syntax is very straightforward and can be experimented with at http://localhost:8080/chapter-2/line.html, assuming the http-server is running:

<line x1="10" y1="10" x2="100" y2="100" stroke-width="1" stroke="red"/>

This will give you the following output:

A description of the element's attributes is as follows:

x1 and y1: The starting x and y coordinates
x2 and y2: The ending x and y coordinates
stroke: This gives the line a red color
stroke-width: This denotes in pixels the width of the line to be drawn

The line tag also has the ability to change the style of the end of the line. For example, adding the following would change the image so it has round endings:

stroke-linecap: round;

As stated earlier, all SVG tags can also be styled with CSS elements. An alternative way of producing the same graphic would be to first create a CSS style, as shown in the following code:

      line ...

Search

Your notes and bookmarks