Stephen Boak — Easy as (a) Pie Through my work at Boundary I’ve started playing with the D3 visualization library, trying to build some interesting visualizations for our real-time network monitoring dashboard. I’ve really been enjoying D3 and Mike Bostock, the creator, has been extremely helpful to me and lots of others in the d3-js Google Group. Since the library is new, I hope the series of experiments I post here can be helpful in spreading some knowledge and awareness of the library. What You’re Building My first experiment is an animated pie chart meant to visualize a breakdown of incoming network traffic by port. I’ve also posted the complete source code on JSFiddle. Building the Visualization For the sake of brevity I’ll skip over some of the details, but feel free to contact me with any questions. There are a couple of D3 helper functions that I use. //D3 helper function to populate pie slice parameters from array data var donut = d3.layout.pie().value(function(d){ return d.octetTotalCount; }); Improvements
September | 2012 | bVisual A Visio user recently asked if it is possible to assign shapes to layers from a list. In his case, he has an Excel table which he has exported shapes and their text using Visio’s Shape Reports feature, to which he has added a column named Layer, and he wants to assign the shapes to these layers. In this article, I demonstrate how this can be done. I decided to use my MVP Session Wheel diagram ( see ) for this example because it already has some layers assigned. I created a new Shape Report called Presenter Shapes, where I filtered all shapes on the current page to those where the Presenter Shape Data row exists, and the Presenter actually has a value: I then chose to only export the <Shape ID> and Presenter columns, ordered by <Shape ID>: I then ran the report to export into a new Excel Workbook: This is just so that I could quickly name some layer for each row. Finally, I had everything in place to write some VBA code.
Simple Scatter Chart Example index.html# scatterchart.js# 35 Great iPad Apps for Designers, Geeks and Creative Individuals - Creative Can Creative Can Because of its mobility and large array of useful apps available, iPad has become very popular these days, and this trend is not likely to end anytime soon. With the capability that almost rivals desktops, iPads, have also become the gadget of choice of designers while on the go. With the help of some iPad apps, designers, geeks and creative individuals can now do their job while away from their workstations. Here, we are showcasing some of the great iPad apps for designers and other creatives to use while on the go. Wireframing, Mind Mapping and Productivity Apps iMockups for iPad iMockups for iPad is the premiere mobile wireframing and mockup app for your web, iPhone and iPad projects. OmniGraffle Need to create a quick diagram, process chart, page layout, website wireframe, or graphic design? MindNode MindNode is a very easy and intuitive application for collecting, organizing and outlining your thoughts and ideas as mind maps. Dropbox Air Display Moodboard Evernote Ignition iDesign Color RGB
Small Multiples with Details on Demand - Jim Vallandingham Small multiples are a great way to show changes in data. By lining up multiple visualizations, they effectively allow for direct comparisons to be made with little effort. This is in contrast to potential alternatives such as video or animation, which force the observer to remember previous shots of the visualization to perform the same comparisons. But some times the small in small multiples can be limiting. A Manifest Solution Recently, Michael Porath provided an interesting graphic that I think includes an elegant solution to address the needs of the small but detailed visualization. In Manifest Destiny , we see the story of how the United States came to be in a series of small multiples. In this blog post we will look at a way to implement this effect using D3.js and jQuery. C02 Emitted Over the Years To isolate and explain this functionality, I’ve created a small multiple visualization of CO2 emissions that incorporates much of this functionality. Coffeescript Implementation
Udacity | Interactive 3D Graphics When does the course begin? This class is self paced. You can begin whenever you like and then follow your own pace. How long will the course be available? This class will always be available! How do I know if this course is for me? Take a look at the “Class Summary,” “What Should I Know,” and “What Will I Learn” sections above. Can I skip individual videos? Yes! How much does this cost? It’s completely free! What are the rules on collaboration? Collaboration is a great way to learn. Why are there so many questions? Udacity classes are a little different from traditional courses. What should I do while I’m watching the videos? Learn actively!
Let’s Make a Map In this tutorial, I’ll cover how to make a modest map from scratch using D3 and TopoJSON. I’ll show you a few places where you can find free geographic data online, and how to convert it into a format that is both efficient and convenient for display. I won’t cover thematic mapping, but the map we’ll make includes labels for populated places and you can extend this technique to geographic visualizations such as graduated symbol maps and choropleths. Without further ado, here’s the map: Shown are the four constituent countries of the United Kingdom: Scotland, Northern Ireland, Wales and England. #Finding Data The first task for any map is finding geometry. Unfortunately, government data can sometimes be hard to find or use. For a crowdsourced alternative, GeoCommons is a platform for sharing geographic datasets. Hands-down, the most convenient source of free geographic data is Natural Earth. The first includes country polygons, while the second has names and locations of populated places.
Beautiful web-based timeline software Mapping with D3 | Visible Data Trying out D3's geographic features. Hover over a county: There's nothing special about this map. The Good Creating a simple map in D3 is remarkably easy. var counties = map.append('g') .attr('class', 'counties') .selectAll('path') .data(countylines.features) .enter().append('path') .attr('d', d3.geo.path()); Where countylines is a GeoJSON object and map is an SVG selection. The Bad GeoJSON files can be big, and loading them can take ... awhile. One possible solution to this is TopoJSON. The Ugly Mapping is still hard. Mind42 - Free, Fast and Simple online mind mapping How to Make Choropleth Maps in D3 Even if you think you don’t know what a choropleth map is, chances are you’ve seen one. And come November 2012, you’ll see plenty: one iconic example of a choropleth map is a map of the United States, laid out in red and blue, showing the results of a presidential election. Choropleth maps can be simple, like in the example above, where the color of the state indicates whether the state goes in one direction (Democrat) or the other (Republican). The states can also be colored on a scale to indicate data, with a color like blue representing a low number and red representing a high number, leaving a number in between to be purple. These simple visualizations make large amounts of data easy to understand at a glance, allowing insights that would take much longer if you’re looking at a table of numbers. There have been tutorials for Python and Excel, but none that we’ve seen yet for D3 — and D3 is one of the easiest ways to make choropleth maps for the web. Let’s start with our base map.
15 Stunning Examples of Data Visualization Data Visualization is a method of presenting information in a graphical form. Good data visualization should appear as if it is a work of art. This intrigues the viewer and draws them in so that they can further investigate the data and info that the graphic represents. In this post there are 15 stunning examples of Data Visualization that are true works of art. Click on the title or image for a larger view of each visualization. The Strengths of Nations Here’s an image that discusses the variations in how different nations pursue science. Madrid.Citymurmur CityMurmur tries to understand and visualize how media attention reshapes the urban space and city. Genome Jules & Jim This visual represents the relationship between characters in the movie Jules & Jim. One Week of the Guardian This is one day in a series that takes the news from one week of the Guardian newspaper, and visually represents it as a series of static visualisations. One Week of the Guardian Leisure & Poverty Stock Data Related Posts
Creating Animated Bubble Charts in D3 - Jim Vallandingham Update: I moved the code to its own github repo - to make it easier to consume and maintain. Update #2 I’ve rewritten this tutorial in straight JavaScript. So if you aren’t that in to CoffeeScript, check the new one out! Recently, the New York Times featured a bubble chart of the proposed budget for 2013 by Shan Carter . As FlowingData commenters point out , the use of bubbles may or may not be the best way to display this dataset. In this post, we attempt to tease out some of the details of how this graphic works. #Simple Animated Bubble Chart In order to better understand the budget visualization, I’ve created a similar bubble chart that displays information about what education-based donations the Gates Foundation has made. You can see the full visualization here And the visualization code is on github **Warning Coffeescript** The example is written in [CoffeeScript]( as I find it much easier to read and write than javascript. #D3’s Force Layout #nodes #gravity #alpha