Chicago Lobbyists Force-Directed Graph Visualization - Christopher Manning This visualization includes the 50 highest paid lobbyists in Chicago, their clients, and the agencies they lobby. The data was compiled from ChicagoLobbyists.org in 2010. Blue Nodes: Lobbyists Grey Nodes: Clients Green Nodes: Agencies The radius of the Blue(Lobbyist) and Grey(Client) nodes is relative to the amount of money associated with them. The radius of the Green(Agency) nodes is constant and does not represent anything about that agency. Nodes closer to the center have more connections than nodes on the outer edge. Controls Hover a node to highlight the connected nodes and show the names and dollar amounts associated to that node. Development I wanted to build a project using a government dataset to learn d3.js. Picking the Chart Type There are a lot of excellent examples of the visualizations you can create using d3.js. Generating the JSON Data I used a local copy of the ChicagoLobbyists.org Sinatra app to generate the JSON need to create the visualization. Learning and Using d3.js
Gallery · mbostock/d3 Wiki Wiki ▸ Gallery Welcome to the D3 gallery! More examples are available for forking on Observable; see D3’s profile and the visualization collection. Visual Index Basic Charts Techniques, Interaction & Animation Maps Statistics Examples Collections The New York Times visualizations Jerome Cukier Jason Davies Jim Vallandingham Institute for Health Metrics and Evaluation Peter Cook Charts and Chart Components Bar Chart Histogram Pareto Chart Line and Area Chart Pie Chart Scatterplot and Bubble chart Parallel Coordinates, Parallel sets and Sankey Sunburst and Partition layout Force Layout Tree Misc Trees and Graphs Chord Layout (Circular Network) Maps Misc Charts Miscellaneous visualizations Charts using the reusable API Useful snippets Tools Interoperability Online Editors Products Store Apps Libraries Games Wish List
Visualizing my Social Graph with d3.js Exclusive offer: get 50% off this eBook here Practical Data Analysis — Save 50% Transform, model, and visualize your data through hands-on projects, developed in open source tools with this book and ebook by Hector Cuesta | October 2013 | Open Source In this article written by Hector Cuesta, the author of Practical Data Analysis, you will learn how to create a social graph visualization of your Facebook Friends with d3.js. (For more resources related to this topic, see here.) Social Networks Analysis (SNA) is not new, sociologists have been using it for a long time to study human relationships (sociometry), to find communities and to simulate how information or a disease is spread in a population. With the rise of social networking sites such as Facebook, Twitter, LinkedIn, and so on. Social networking sites bring us the opportunities to ask questions that otherwise are too hard to approach, because polling enough people is time-consuming and expensive. Getting ready Resources for Article:
Home · mbostock/d3 Wiki cpettitt/dagre Tutorials · mbostock/d3 Wiki Wiki ▸ Tutorials Please feel free to add links to your work!! Tutorials may not be up-to-date with the latest version 4.0 of D3; consider reading them alongside the latest release notes, the 4.0 summary, and the 4.0 changes. Introductions & Core Concepts Specific Techniques D3 v4 Blogs Books Courses D3.js in Motion (Video Course)Curran Kelleher, Manning Publications, September 2017D3 4.x: Mastering Data Visualization Nick Zhu & Matt Dionis, Packt. Talks and Videos Meetups Research Papers D3: Data-Driven DocumentsMichael Bostock, Vadim Ogievetsky, Jeffrey HeerIEEE Trans. API Reference · mbostock/d3 Wiki Wiki ▸ API Reference Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the current version of D3 as d3.version. See one of: Core - selections, transitions, data, localization, colors, etc.Scales - convert between data and visual encodingsSVG - utilities for creating Scalable Vector GraphicsTime - parse or format times, compute calendar intervals, etc.Layouts - derive secondary data for positioning elementsGeography - project spherical coordinates, latitude & longitude mathGeometry - utilities for 2D geometry, such as Voronoi diagrams and quadtreesBehaviors - reusable interaction behaviors d3 (core) Selections Transitions Working with Arrays Math Loading External Resources String Formatting d3.format - format a number as a string.d3.formatPrefix - returns the SI prefix for the specified value and precision.d3.requote - quote a string for use in a regular expression.d3.round - rounds a value to some digits after the decimal point. CSV Formatting (d3.csv) Axes