ESRI and D3.js

Blog Post created by bokeefe on May 14, 2015

In the Beginning...

When ESRI first made the move over to Javascript I was elated. I had been busily re-educating myself on Flex Development (and remembering why I hated it so much, and all compiled languages) so the switch was exciting for me. At this point tho, I was only seeing ESRI example maps that were one-tool wonders. Creating that City Map for multiple departments or public consumption was not within easy grasp. I realized I needed a framework. Enter WAB. Yippee! Yahoo!


But I still wasn't happy. I can code Javascript. I've developed several application in Javascript (years ago) and can quite quickly take-apart or edit javascript with little, to no, headaches. But Javascript has changed dramatically since the advent of DHMTL > HTML5. We have DOM manipulations, jQuery, and a HOST of other libraries written to 'simplify' everything. And now I have a fairly confusing new library to learn if I want to manipulate my web-maps, create custom widgets, etc.



When I say confusing, I mean REALLY confusing. There are no easy to grasp, example-laden, tutorials. The documentation on this library reads like most manuals for the various programming languages I've picked up over the years. It's convoluted, uses esoteric definitions, and they are written like a developer wrote them (chuckle).


Enter D3.js

If you haven't checked out D3.js yet then do yourself a favor. Set aside 20-30 minutes and go here: Gallery · mbostock/d3 Wiki · GitHub


This is the Example Gallery of THIS SITE: D3.js - Data-Driven Documents


Just go around. Check out the examples and then... then check out the code used to create them. It's impressive. I've started several tutorials on this library and am stunned at the power. Now, technically, I should have had this library under my belt by now but... I'm kinda busy. You see, beside working full-time as a GIS Analyst for the City, I do school part-time (trying to get that degree), work a second job developing websites for clients nights and weekends, and I have a ton of hobbies that I want to dabble in. Picking ONE THING to focus on is literally impossible. So, I am still at the dabble-level with D3.


I'm hoping to create a decent repository of D3 / GIS-related sites and examples tho. Why? Because maybe if I get a decent enough example set I can convince my boss to put me through some paid training on this library.


The Repository

Below this line I hope to update as needed (and available) with D3 / ESRI examples showing what can be done using this amazing library. If you have suggestions, please do not hesitate to comment, message, notify, call, etc. And here goes...


esri_d3 : An extension to the Esri JSAPI for rendering geojson features with D3

CSS Highlight > Feature

This shows how to use a very simple CSS based style to highlight a state:


CSS-Based Categorization

This shows how we can data-* attributes on our elements as a way to assign categories to data. The classication rules are defined in the CSS instead of directly on the elements themselves:


CSS-Cross Data Selection / Interaction

This example adds some interaction to each state. The point is to show an alternative CSS based approach to cross data selection and interaction.



This is a simple web-app that uses esri's geoenrichment API to calculate age characteristics and Esri tapestry data for user defined areas. A user can generate a drive time or standard geography around a point or draw a circle, rectangle, or custom polygon to define an area. If you have an arcgis.comaccount you can demo the mapping app here (you can also create a Trial Account). It should look something like this:


ESRI Videos

Accessing & Visualizing GeoServices - ArcGIS Javascript API, D3, and Node.js

In this session, we'll discuss new ways to interact with various ArcGIS GeoServices APIs in the context of advanced JavaScript libraries such as D3.js and Node.js. The session will present ways to use third-party data and APIs within the ArcGIS platform and will illustrate how such data can be combined with other Esri services to make compelling - See more at:

Accessing & Visualizing GeoServices - ArcGIS JavaScript API, D3, and Node.js | Esri Video


Related Information

The following are details on related pieces to this ESRI > D3 pie.



Turn data into Feature Services.

Koop is a node.js module that exposes an Express server for the purpose of being used as middleware within an Express based application.

Koop provides a flexible server for exposing 3rd party data sources (APIs) as both Feature Services and other data formats (GeoJSON). This project is meant to provide a simple / pluggable platform for experimenting with various data within the ArcGIS platform. Koop aims to provide a platform for accessing any API and making it easy to consume within the realm of Esri's geospatial web products.

Visit the demo at