Workshop: D3.js Force Graphs

Data Community DC (http://datacommunitydc.org/) is excited to be hosting a DataViz D3.js "Introduction to Force Graphs" workshop on Thursday, August 28th, 2014 taught by Sean Gonzalez.

http://photos2.meetupstatic.com/photos/event/d/8/2/4/600_400255332.jpeg

Overview

I built the force graph above to explore text based relationships using Natural Language Processing (NLP), but you can visualize any two things by 'associating' them according to any rules you choose (see example below). D3 provides all the flexibility needed to adjust the 'forces' associated with each particle's charge, gravity, friction, link strength, and link distance, enabling you to ensure the geometry that best represents the character of the underlying data.

In this introductory workshop we will be focusing on simple examples, but for those already initiated in D3 force graphs, feel free to join us and get as complicated as you're comfortable!

Intended Audience

• Familiar with html, javascript, and css

• Beginner and above data science expertise

Outline

General Agenda:

• 6:30 - People shuffle in, network

• 6:45 - Warm-up Presentation, Examples

• 7:15 - Group Introductions

• 7:20 - Group Assisted Coding!

• 7:40 - Break

• 7:55 - 2nd Presentation, Advanced Examples

• 9:10 - Code till we drop

We'll start by implementing simple examples provided by Mike Bostock (http://bl.ocks.org/mbostock/4062045), then move on to adding and removing nodes and links, then changing attributes about those nodes.

What to Bring

You’ll need a laptop if you’d like to follow along, and we highly recommend getting this example (http://bl.ocks.org/mbostock/4062045) running locally on your laptop.

• Mac/Linux Users

• Copy the example above into two files:

• forcegraph.html

• miserables.json

• Start a webserver in that directory

• E.g. In a terminal type "python -m SimpleHTTPServer 8000"

• Navigate to that page from a webbrowser

Instructors

Sean Gonzalez is a Data Science consultant, organizer of Data Visualization DC, and co-founder of Data Community DC.

Venue

At UberOffices, we build tight-knit communities filled with inspiring and passionate members. Our offices are home to dozens of amazing small businesses, startups, freelancers, and entrepreneurs. - See more at: http://uberoffices.com/#sthash.z1CMW3wN.dpuf

http://uberoffices.com/wp-content/themes/UberOffices/images/logo-scroll.png

D3 & Force Graph Background

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

The D3 force-directed graph layout implementation using position Verlet integration (http://en.wikipedia.org/wiki/Verlet_integration) to allow simple constraints (http://www.csse.monash.edu.au/~tdwyer/Dwyer2009FastConstraints.pdf). This implementation shown above uses a quadtree (https://github.com/mbostock/d3/wiki/Quadtree-Geom) to accelerate charge interaction using the Barnes–Hut approximation (http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation). In addition to the repulsive charge (https://github.com/mbostock/d3/wiki/Force-Layout#wiki-charge) force, a pseudo-gravity (https://github.com/mbostock/d3/wiki/Force-Layout#wiki-gravity) force keeps nodes centered in the visible area and avoids expulsion of disconnected subgraphs, while links are fixed-distance (https://github.com/mbostock/d3/wiki/Force-Layout#wiki-distance) geometric constraints. Additional custom forces and constraints may be applied on the "tick" event, simply by updating the x and y attributes of nodes.

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!

http://res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_540,w_720/x8gh2iktzfwyiigycdim.png

Currently hiring for a Supply Chain Data Visualization position!

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!