Data visualization with Processing, Part 1: An introduction to the language and environment Although many open source projects are driven to build alternatives for existing applications, there are numerous projects that represent new and innovative works. Processing is one of those programs. Processing began at the Massachusetts Institute of Technology's (MIT's) Media Lab in 2001, created by Ben Fry and Casey Reas, though it has contributions from Carnegie Mellon; the University of California, Los Angeles; Miami University; and others. The original goal for Processing was the development of a graphical sketchbook and environment that could be used to teach (graphically) the fundamentals of computer science. It has since evolved into an environment that can be used to create professional works for graphical visualization. Processing runs on GNU/Linux®, as well as Mac OS X and Windows®, and it supports the ability to export images to a variety of formats. Processing environment The first step is to install the Processing environment. Figure 1. Back to top Processing language
MooWheel: a javascript connections visualization library View the project on Google Code 06.29.2008 version 0.2 now available! get it. What's new? Looking for version 0.1 instead? The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This script requires three libraries to support it. MooWheel only requires 2 arguments to create a basic wheel graph. new MooWheel(dataArray, canvasElement); The canvas element can be passed as either an element reference or an id string. Note: In this context, the first argument (the data parameter), doesn't matter. Each item that has an "imageUrl" will have that image preloaded, and then added to the wheel when it is drawnIn terms of options, there are a number of options available that allow you to change the way the graph is generated and displayed: Using MooWheel is very simple and extremely easy. Next, you create an array of items for the connections: Then you add a container for the canvas tag to the body of your document:
Cytoscape: An Open Source Platform for Complex-Network Analysis and Visualization Getting Started with Processing for Android Pick up a pen and draw a sketch. There, that was easy – however crude, you can get out an idea. Sketching with paper is still the fastest way for most of us to imagine something. But between that immediacy and the end result, you need prototypes. The Processing language has long been one of the easiest ways to sketch an idea in code – best after you’ve first put pen to paper, but as an immediate next step (and for ideas you just can’t draw). Processing now runs just as easily on a mobile platform with Android. Translation: with one, elegant API, you can “sketch” visual ideas on screens from an Android phone to a browser to a projection or installation. This is a first-draft tutorial, as I make the same presentation in Stockholm at the info-rich Android Only conference. I’m assuming basic familiarity with Processing, so if you haven’t tried it out yet, check out the excellent tutorials available online to get rolling. Install Processing and the Android SDK 1. 2. 3. 4. 5. Tune in Next Time…
New DataBasic Tool Lets You “Connect the Dots” in Data Catherine D'Ignazio and I have launched a new DataBasic tool and activity, Connect the Dots, aimed at helping students and educators see how their data is connected with a visual network diagram. By showing the relationships between things, networks are useful for finding answers that aren’t readily apparent through spreadsheet data alone. To that end, we’ve built Connect the Dots to help teach how analyzing the connections between the “dots” in data is a fundamentally different approach to understanding it. The new tool gives users a network diagram to reveal links as well as a high level report about what the network looks like. Connect the Dots is the fourth and most recent addition to DataBasic, a growing suite of easy-to-use web tools designed to make data analysis and storytelling more accessible to a general and non-technical audience launched last year. Learn more about Connect the Dots and all the DataBasic tools here.
Gephi, an open source graph visualization and manipulation software Processing & Android: Mobile App Development Made (Very) Easy Creating apps for Android with processing is ridiculously easy. How easy? Let’s get a from-scratch Android app working on a device in 25 minutes (15 of those minutes will be spent installing software). ** You don’t need to have an Android device to do this tutorial, since we can see the app that we’ll build in a software emulator. ** Before you start on this tutorial, I’d recommend that you make sure you have a recent version of Java installed. Step One: Install the Android SDK I promise. First, go to the URL below, and download the appropriate SDK for your operating system: This download should un-zip to a folder called something like ‘android-sdk-mac_x86′. We’re going to use the manager to install the Android packages that we need to build our apps. We can install all of the packages – that way we know we’ll get everything we need. Step Two: Get an Android-enabled Version of Processing Step Three: Make an Android App OK.
DensityDesign Lab | Fineo UPDATE: the project is no longer supported, since it’s part of RawGraphs. Check it out here: rawgraphs.io. Fineo is a web application which implements a visualization technique based on the visual model of Sankey diagrams. Fineo was born from the idea that Sankey diagrams, although developed as a technique for visualizing continuous data, may be used to represent relations between dimensions of categorical data. Introduction Categorical data representation is crucial for interpreting many real world phenomena. Moreover, to be able to make sense a multidimensional dataset, an interactive approach is strongly needed so that the user will be able to filter and relate only the information he is interested into. Sankey Diagrams Sankey diagrams are flow diagrams that represent flows of continuous data such as money, energy or material in a system. We have chosen to conceptually base Fineo on sankey diagrams for three main reasons: Fineo and ParSets Fineo, instead, is much more network-like.
Examples Enjoy these sample visualizations built with Protovis. For any example, use your browser to view the source or the backing dataset. Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis; for more details, please read the introduction and browse the examples. Conventional While Protovis is designed for custom visualization, it is still easy to create many standard chart types. Area Charts Bar & Column Charts Scatterplots Pie & Donut Charts Line & Step Charts Stacked Charts Grouped Charts Custom Many charting libraries provide stock chart designs, but offer only limited customization; Protovis excels at custom visualization design through a concise representation and precise control over graphical marks. Anderson’s Flowers Becker’s Barley Bertin’s Hotel Streamgraphs Sparklines Bullet Charts
Apprendre le Processing lunis suppe Advertise here via BSA In this article, we’ll get rolling on developing plug-in free by creating bar graphs and similar graphics, using NASDAQ’s current web site as an example. But we won’t be creating merely a picture of a bar graph, but a real, interactive bar graph. Let’s take a look at an existing site that uses Flash, then build one using HTML5. If you have Flash installed, you’ll see a fancy line chart. You can float your mouse over the line and see a small popup showing the stock price at that point, along with the volume of trading, like so: If you don’t have Flash installed, then the site just shows you a graphic image. Now, we’ll build something similar. The General Layout In general, when you develop web sites, you often want to break up your code files. The first line is important and required; the doctype tells the browser which version of HTML to use. Gathering the Data At the heart of any good software program is the data. Now let’s move onto the user interface. Your Canvas
Till Nagel – TileMill for Processing This tutorial describes how to create beautiful custom maps, and use them in a Processing sketch. We are going to use TileMill to style our maps, export it, and load the rendered map tiles into PImages. There are two ways of doing that. Basic A single image as static map. Advanced An interactive tile-based map, where users can zoom and pan. Custom map adapted to style of a visualization. Designing custom maps In the last years, there have been tremendous changes in the digital cartography field. Fortunately, in 2009 the CloudMade editor was launched, in which users can select various properties and style maps based on OpenStreetMap by themselves. Now, say hello to the new kid in town: TileMill – A map design studio TileMill is a map design environment, which – as they put it – “enable[s] artists to design maps”. It is a bit more complicated to setup, though, and only available for Mac OS X, Ubuntu and other Linux/Posix systems. Single image as static map Interactive tile-based map