Workshop: Developing Interactive Graphics with dc.js & d3.js

Data Community DC (http://datacommunitydc.org/) is excited to be hosting a DataViz D3.js workshop on June 23rd, 2014 taught by Scott McKissock.

Overview

dc.js, a library built on d3, is one of many tools designed to make producing data visualizations in the browser easier. What sets it apart is its support for coordinated visualizations, where a single dataset can be visualized with many interconnected charts, each of which can be used to filter the data. dc.js is simple enough for most front end developers to build basic graphics quickly, even without any knowledge of d3. Experienced d3 developers will also find dc appealing because many d3 constructs are part of dc, and your d3 bag of tricks will still be useful. Let's gain an understanding of where dc works best, and get a little experience using the library in common situations.

For those who were part of the last workshop, "Mapping all the Way with D3", Scott McKissock was one of the participants and was playing with this dc.js code along side the d3 tutorials. This is a prime example of how DVDC workshops will be powered by the community, and highlights the potential that you might teach the next workshop.

Outline

First, here's the general Agenda:

• 6:00 - People shuffle in, network

• 6:15 - Warm-up Presentation

• 6:30 - Begin playing with downloads and examples

• 6:45 - Group Introductions

• 6:50 - Group Assisted Coding!

• 7:10 - Break

• 7:25 - 2nd Presentation

• 800 - Group Advanced Coding.

• 830 - Code Cool Down - Summary & Possibilities

• 840 - Code till we drop

We’ll start with some examples of where dc.js has been put to use, both at USAID and elsewhere. Then we’ll cover the basics of Crossfilter.js, the data analysis library dc uses for filtering, grouping and aggregating tabular data. Next we’ll describe the visualizations dc offers, such as row, bar, bubble, and pie charts, choropleth maps, and tables, and weigh their advantages and disadvantages with different kinds of data. Then we’ll show how this all works together by introducing an interesting dataset and walking through the code of an interactive graphic containing a variety of chart types. We’ll then go back to the data we started with, ask some questions, and see if we can use the graphic to answer them. Finally, we’ll talk a little about applications for dc, its limits, and future directions for the library.

Other Info

The dc.js (http://dc-js.github.io/dc.js/) website is the best place to go to learn more about the library. The source code is well documented and easy to follow, especially if you have experience with d3. The Crossfilter site ( http://square.github.io/crossfilter/ ) is also very good, as is this crossfilter tutorial ( http://blog.rusty.io/2012/09/17/crossfilter-tutorial/ )

What to Bring

You’ll need a laptop if you’d like to follow along. Everything you’ll need to get set up will be on github.

Instructors

Scott McKissock is a developer at USAID (http://www.usaid.gov/).

Venue

Strayer University has been educating working adults since 1892. Their student services, on-campus environment, online flexibility, and regional accreditation have helped over 100,000 students earn their undergraduate and graduate degrees.

http://photos4.meetupstatic.com/photos/event/c/2/c/6/600_373249862.jpeg

Data Visualization DC Sponsors

https://ci6.googleusercontent.com/proxy/WPPVRqxF3WrYfhaXlxVhi1vZMrzMnODL-ywIjxtL8IUHLmqPPcOiGt-jTBVh873q9Lyx2x64d2kAf1kOlXEEPDAD8BlPNlPAkq-aCwDK330_4TFXP1GE66_j3oFfwUNrD4IPntK5wREflAV53QCspxVlN7aLww=s0-d-e1-ft#https://gallery.mailchimp.com/75fc125999b198f97fe860a8d/images/cloudera_logo_color_tag_249px.png

Hadoop-leader Cloudera (http://datacommunitydc.us3.list-manage1.com/track/click?u=75fc125999b198f97fe860a8d&id=2a18cfe96b&e=263865b99d) is an Organizational sponsor of Data Community DC!

https://ci6.googleusercontent.com/proxy/d0XbpG6NP9zt4tX8slJ1-xznZcr5wFz3z-eoSmorfHp4c8sK-GY3XY61rDXP7Nu7epBpH11C_SrcYmyNynvLwPUlKAcSN-iL94rpwmR_dQSjL7552LbupKMabSRa7IM6jPXGY-Zi=s0-d-e1-ft#https://gallery.mailchimp.com/75fc125999b198f97fe860a8d/images/statisticscom.gif

Use the code "DC2" atStatistics.com (http://datacommunitydc.us3.list-manage.com/track/click?u=75fc125999b198f97fe860a8d&id=02bd6fe31d&e=263865b99d) for 15% off their web-based courses!

https://ci4.googleusercontent.com/proxy/7-7ugKTCEZfSIEcHUhVn3Z85P-G3etW0ymL14If4t7RQXyC9Ot3byFk2AN3kdnE4DObpPSU-Fp6io7NZ3Pk0Lg9UTgiQ4pbA7ebf2QYtPdp1UN0CS4nq2rbj29-x5ttlna1jjQQkqILg52DRQ1_1vVl_lhiY8CHM=s0-d-e1-ft#https://gallery.mailchimp.com/75fc125999b198f97fe860a8d/images/GA_stacked_FF0033_155x1003c8464.png

General Assembly (http://datacommunitydc.us3.list-manage.com/track/click?u=75fc125999b198f97fe860a8d&id=8eac8031e2&e=263865b99d) has upcoming DC-based courses, including Data Science, Business, and Design!

https://ci5.googleusercontent.com/proxy/8M7l2hfr2BftyiiH8Iy_Bbh0HSCCUW-1tFOXJaodYLCT-xQC4UIPJQGBoL7DQyYlT3iCYwDp03kYqfJ8puwVvTWw_BeQ2l7HoFD2wz4SkrwBLzus0nKaYn8dpgYEjIgLYeGM6wMksy2b=s0-d-e1-ft#https://gallery.mailchimp.com/75fc125999b198f97fe860a8d/images/DistrictDataLabs.PNG

DDL runs hands-on Data Science Workshops, Courses, and Projects

Want to sponsor Data Community DC, support our events, and help build this professional community? Get in touch!