addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1light-bulblinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

Workshop: D3.js Force Graphs

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


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


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, 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 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


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


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:

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 to allow simple constraints. This implementation shown above uses a quadtree to accelerate charge interaction using the Barnes–Hut approximation. In addition to the repulsive charge force, a pseudo-gravity force keeps nodes centered in the visible area and avoids expulsion of disconnected subgraphs, while links are fixed-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

Hadoop-leader Cloudera is an Organizational sponsor of Data Community DC!

Use the code "DC2" for 15% off their web-based courses!

Currently hiring for a Supply Chain Data Visualization position!

General Assembly has upcoming DC-based courses, including Data Science, Business, and Design!

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!

Join or login to comment.

12 went

Your organizer's refund policy for Workshop: D3.js Force Graphs

Refunds are not offered for this Meetup.

Our Sponsors

  • General Influence

    Full Stack Data Science Consulting & Recruiting

  • Chief

    Elevating the citizen experience and connecting Government to the people


    15% Off Everything

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy