Raphaël—JavaScript Library 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:
Better force layout node selection Object selection is tough, particularly when the things you'd like to select are moving around (like nodes in a force-directed layout, perhaps). Allowing a user the fudge factor of an area cursor helps, but can get in the way when targets are small enough. The use of a Voronoi tessellation promises a map of closest node for any given point. This example illustrates the use of a Voronoi overlay to clip nodes in a force-directed simulation. This builds on these two examples from Mike Bostock on force-directed graphs and voronoi tesselation, as well as Nate Vack's Voronoi selection example here and this first pass at an integration from Christopher Manning.
38 Tools For Beautiful Data Visualisations | Elisa DBI As we enter the Big Data era, it becomes more important to properly expand our capacity to process information for analysis and communication purposes. In a business context, this is evident as good visualisation techniques can support statistical treatment of data, or even become an analysis technique. But also, can be used as a communication tool to report insights that inform decisions. Today there are plenty of tools out there that can be used to improve your data visualisation efforts at every level. Javascript Libraries Circular Hierarchy – D3.js Python Libraries Kartograph.py – Mapsigraph – Node-link, treesMatplotlib – Most types of statistical plotsPycha – Pie chart, bar chart, area chartNetworkX – Node-link Java / PHP Prefuse – Area chart, Time series, node-link, tree, timeline, steam graph, radial hierarchyJpGraph – Line plot, scatter plot, bar chart, bubble chart, contours chart, field chart, splines, pie chart, boxplot, polar plot, radial chart, maps Web Applications
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. 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 D3.js has really good documentation. Label Placement Colors Conclusion
Create Responsively with Animate and Reflow | sarahjustine.com We live in a world of responsive design, and animation can play a meaningful and fun role on your website. Edge Animate and Edge Reflow give you the best of both worlds; easy-to-create responsive designs with RF and percentage-based interactive animations with AN. In this tutorial I’ll show you how you can take a responsive Animate composition and easily merge it with your Reflow preview files. Watch the video to see it in action Download Project Files Step 1: Build something awesome in Reflow Start off by building your Reflow project. Once you have your placeholder div, set the height to “auto” in the Properties Inspector. Be sure to push the auto height as the default style for all your breakpoints. Step 2: Create your preview files Once you’re done building your Reflow project, Go to View > Preview in Chrome. Step 3: Build something awesome in Animate View the Animate sample file Note: Don’t forget to set the Stage in percentages! Step 5: Publish your Animate content Step 6: Copypasta
HeliosJS by entrendipity HeliosJS is an in-memory graph database for modern browsers. It employs a non-blocking asynchronous architecture through the use of Promises and Web Workers, and therefore is only available in browsers that support Web Workers. This enables HeliosJS to download and process large data sets without blocking the UI. In order to traverse the graph, HeliosJS uses a Gremlin inspired graph traversal language to query, analyze and manipulate the graph. Getting Started Copy the helios directory to your project's root directory. N.B. Now create a graph database and load some data. var g = new Helios.GraphDatabase(); g.loadGraphSON(' Then travese the graph. Lets break this down. The next step loads data into the database using the loadGraphSON function. Once the data is loaded we travese the graph. Documentation Conventions Function signatures Function signatures are based on the TypeScript notation. Closures top id()
cpettitt/dagre Episode 1: Edge and the Twitter API | Create Like Crazy with Adobe Edge Tools & Services Community Translation Your transcript request has been submitted. Adobe TV does its best to accommodate transcript requests. Join the Community Translation Project Thanks for your interest in translating this episode! Please Confirm Your Interest Thanks for your interest in adding translations to this episode! An error occurred while processing your request. Another translator has already started to translate this episode. Thanks for Participating! This episode has been assigned to you and you can expect an e-mail shortly containing all the information you need to get started. About This Episode Adobe Edge is not limited to sexy web animations; you can also build apps and integrate third-party APIs easily.
Chromeless YouTube Videos for Responsive Pages | New Signature By default, embedded YouTube videos are contained in a player chrome that contains video controls and branding. While developing our new responsive video tips page, we wanted a clean visual style with the following attributes: Video player that expands and contracts responsivelyDisplay a high definition version of the video Deliver the video in a chromeless, embedded windowDisplay no controls and as little YouTube branding as possible Render consistently across browsers and devices, including tablet, desktop and mobile For responsive sizing (requirement 1), we used Jonathon Suh’s excellent method for responsive video embedding with CSS. This simple method only requires adding CSS and HTML markup. We added high definition video and eliminated chrome, controls, and branding (requirements 2-4) by using the default Google YouTube player parameters. The default embed code delivered by YouTube is as follows; Default values explained: To this we added: A few other notes:
Creating an Adobe Edge Reflow CC Project from Adobe Photoshop CC | Learn Photoshop CC Share this Episode Autoplay End of Video Show End Screen Default Quality Adjust your embed size below, then copy and paste the embed code above. Community Translation Your transcript request has been submitted. Adobe TV does its best to accommodate transcript requests. Join the Community Translation Project Thanks for your interest in translating this episode! Please Confirm Your Interest Thanks for your interest in adding translations to this episode! An error occurred while processing your request. Another translator has already started to translate this episode. Thanks for Participating! This episode has been assigned to you and you can expect an e-mail shortly containing all the information you need to get started. About This Episode Chris Converse shows you how to use the generator tool in Adobe Photoshop CC with Edge Reflow CC to improve your workflow for creating responsive web designs.