In the Beginning...
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).
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.
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:
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:
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 http://koop.dc.esri.com.