Archive for the ‘D3’ Category
Wednesday, June 12th, 2013
For Example by Mike Bostock.
I am a big fan of examples. Not a surprise, right? If you follow me on Twitter, or my projects over the last few years (or asked D3 questions on Stack Overflow), you’ve likely seen some of my example visualizations, maps and explanations.
I use examples so often that I created bl.ocks.org to make it easier for me to share them. It lets you quickly post code and share examples with a short URL. Your code is displayed below; it’s view source by default. And it’s backed by GitHub Gist, so examples have a git repository for version control, and are forkable, cloneable and commentable.
I initially conceived this talk as an excuse to show all my examples. But with more than 600, I’d have only 4.5 seconds per slide. A bit overwhelming. So instead I’ve picked a few favorites that I hope you’ll enjoy. You should find this talk entertaining, even if it fails to be insightful.
This talk does have a point, though. Examples are lightweight and informal; they can often be made in a few minutes; they lack the ceremony of polished graphics or official tools. Yet examples are a powerful medium of communication that is capable of expressing big ideas with immediate impact. And Eyeo is a unique opportunity for me to talk directly to all of you that are doing amazing things with code, data and visualization. So, if I can accomplish one thing here, it should be to get you to share more examples. In short, to share my love of examples with you.
Mike’s post is full of excellent D3 graphics. You owe it to yourself to review all of them in full.
I first saw this at Nat Torkington’s Four short links: 11 June 2013.
Posted in D3, Graphics, Visualization | No Comments »
Tuesday, May 14th, 2013
Binify + D3 = Gorgeous honeycomb maps by Chris Wilson.
From the post:
Most Americans prefer to huddle together around urban areas, which raises all sorts of problems for map-based visualizations. Coloring regions according to a data value, known as a choropleth map, leaves the map maker beholden to arbitrary political boundaries and, at the county level, pixel-wide polygons in parts of the Northeast. Many publications prefer to place dots proportional in area to the data values over the center of each county, which inevitably produces overlapping circles in these same congested regions. Here’s a particularly atrocious example of that strategy I once made at Slate:
Two weeks ago, Kevin Schaul released an exciting new command-line tool called binify that offers a brilliant alternative. Schaul’s tool takes a series of points and clusters them (or “bins” them) into hexagonal tiles. Check out the introductory blog post on his site.
Binify operates on .shp files, which can be a bit difficult to work with for those of us who aren’t GIS pros. I put together this tutorial to demonstrate how you can take a raw series of coordinates and end up with a binned hexagonal map rendered in the browser using d3js and topojson, both courtesy of the beautiful mind of Mike Bostock. All the source files we’ll need are on Github.
I think everyone will agree with Chris, that is truly an ugly map. 
Chris’ post takes you through how to make a much better one.
Posted in D3, Graphics, Maps, Visualization | No Comments »
Friday, April 5th, 2013
Lazy D3 on some astronomical data by simonraper.
From the post:
I can’t claim to be anything near an expert on D3 (a JavaScript library for data visualisation) but being both greedy and lazy I wondered if I could get some nice results with minimum effort. In any case the hardest thing about D3 for a novice to the world of web design seems to be getting started at all so perhaps this post will be useful for getting people up and running.
The images above and below are visualisations using D3 of a classification hierarchy for astronomical objects provided by the IVOA (International Virtual Observatory Alliance). I take no credit for the layout. The designs are taken straight from the D3 examples gallery but I will show you how I got the environment set up and my data into the graphs. The process should be replicable for any hierarchical dataset stored in a similar fashion.
Even better than the static images are various interactive versions such as the rotating Reingold–Tilford Tree, the collapsible dendrogram and collapsible indented tree . These were all created fairly easily by substituting the astronomical object data for the data in the original examples. (I say fairly easily as you need to get the hierarchy into the right format but more on that later.)
Easier to start with visualization of standard information structures and then move onto more exotic ones.
Posted in Astroinformatics, D3, Graphics, Ontology, Visualization | No Comments »
Thursday, April 4th, 2013
Directed Graph Editor
This is a live directed graph editor so you will need to follow the link.
The instructions:
Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.
When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.
To see this example as part of a larger project, check out Modal Logic Playground!
Just an example of what is possible with current web technology.
Add the ability to record properties, well, could be interesting.
One of the display issues with a graph representation of a topic map is the proliferation of links, which can make the display too “busy.”
What if edges only appeared when mousing over a node? Or you had the ability to toggle some class of edges on/off? Or types of nodes on/off?
Something to keep in mind.
I first saw this in a tweet by Carter Cole.
Posted in Authoring Topic Maps, D3, Graphs | 1 Comment »
Tuesday, April 2nd, 2013
Force-Directed Graph
From the post:
This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo’s Les Misérables, compiled by Donald Knuth.
Display of graphs (read topic maps) need not be limited to complex applications.
Sam Hunting suggested this link.
Posted in D3, Graphics, Graphs, Visualization | No Comments »
Wednesday, March 13th, 2013
JSNetworkX
A port of the NetworkX graph library to JavaScript
SNetworkX is a port of the popular Python graph library NetworkX. Lets describe it with their words:
NetworkX is a Python language software package for the creation, manipulation, and study of the structure, dynamics, and function of complex networks.
With NetworkX you can load and store networks in standard and nonstandard data formats, generate many types of random and classic networks, analyze network structure, build network models, design new network algorithms, draw networks, and much more.
Github.
Wiki.
Looks like an easy way to include graph representations of topic maps in a web page.
I suspect you will be seeing more of this in the not too distant future.
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphs, Javascript, NetworkX, Networks | No Comments »
Wednesday, March 13th, 2013
D3 Alternative Documentation
Documentation generated with a “TypeScript Ambient Source File Documentation Generator.”
dtsdoc is a documentation generator for TypeScript ambient source file(.d.ts). You can also use markdown to document your code.
dtsdoc runs on a Web browser or node.js.
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphics, Visualization | No Comments »
Monday, March 4th, 2013
D3 World Maps: Tooltips, Zooming, and Queue
From the post:
D3 has a lot of built in support (a powerful geographic projection system) for creating Maps from GeoJSON. If you have never used D3 for maps, I think you should take a look at this D3 Map Tutorial. It covers the essentials of making a map with D3 and TopoJSON, which I will use below in more advanced examples. TopoJson encodes topology and eliminates redundancy, resulting in a much smaller file and the GeoJSON to TopoJSON converter is built with NodeJS.
Thus, I encourage you all to start using TopoJSON and below, I will go over a couple examples of building a D3 World Map with colors, tooltips, different zooming options, plotting points from geo coordinates, and listening to click events to load new maps. I will also use Mike Bostock’s queue script to load the data asynchronously.
Creating geographic maps with D3? This is a must stop.
What I need to look for is a library not for geo-coordinates but one that supports arbitrary, user-defined coordinates.
The sort of thing that could map locations in library stacks.
Suggestions/pointers?
Posted in D3, Graphics, Mapping, Maps, Visualization | No Comments »
Wednesday, February 27th, 2013
D3.js Gallery – A Filterable Gallery of D3.js Examples
Description:
This filterable gallery of examples for D3.js is an alternative to the official wiki gallery. Filtering makes it easier to search by author, visualization type and so on. You can also share the url to a filtered result gallery. (From the DashingD3js.com Weekly Newsletter.)
Don’t be discouraged on the author filter, not all the visualizations are from Mike Bostock.
It is a real visual treat. Take the time to visit even if you aren’t looking for that “special” visualization.
Posted in D3, Graphics, Visualization | No Comments »
Monday, January 28th, 2013
Posted in D3, Graphics, Visualization | No Comments »
Wednesday, January 9th, 2013
Interactive SVG + Canvas Plot by Sujay Vennam.
Amusing and potentially useful.
What forces, positive or negative would you have operating on your nodes?
I first saw this in a tweet by Christophe Viau.
Posted in D3, Visualization | No Comments »
Sunday, January 6th, 2013
CartoDB makes D3 maps a breeze
From the post:
Anybody who loves maps and data can’t help but notice all the beautiful visualizations people are making with D3 right now. Huge thanks to Mike Bostock for such a cool technology.
We have done a lot of client-side rendering expirements over the past year or so and have to say, D3 is totally awesome. This is why we felt it might be helpful to show you how easy it is to use D3 with CartoDB. In the near future, we’ll be adding a few tutorials for D3 to our developer pages, but for now, let’s have a look.
Very impressive.
But populating a map with data isn’t the same as creating a useful map with data.
Take a look at the earthquake example.
What data would you add to it to make the information actionable?
Posted in CartoDB, D3, Geographic Data, Mapping, Maps | No Comments »
Saturday, January 5th, 2013
Map Projections by Jason Davies.
If you are interested in map projections or D3, this page is a real delight!
Jason has draggable examples of:
- Butterfly Maps
- Retroazimuthal Projections
- Miscellaneous Projections
Along with various demonstrations:
OK, one image to whet your appetite!
Waterman Butterfly Map
Follow the image to its homepage, then drag the image. I think you will be pleased.
Posted in Cartography, D3, Graphics, Mapping, Maps | No Comments »
Friday, December 21st, 2012
D3 3.0
Illustrations of a new geographic projection system for D3, new geographic plugins, transitions, requests and other fixes and enhancements.
If the images don’t interest you in D3, you must not have any graphic issues.
Posted in D3, Graphics, Visualization | No Comments »
Thursday, December 20th, 2012
D3: IED Attacks in Afghanistan Explained
A walk through the use of D3, jQuery and jQuery UI to create an interactive display of IED attacks in Afghanistan.
Adaptable to other time/location based data sets.
The working example: IED Attacks in Afghanistan (2004-2009)
The Department of Political Science, Ohio State University, hosts several D3 tutorials:
Data Visualization: Learning D3https://secure.polisci.ohio-state.edu/faq/d3.php
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphics, Visualization | No Comments »
Thursday, December 20th, 2012
Web-Based Visualization Part 1: The D3.js Key Concept by Stephen Thomas.
From the post:
Those of us in the user interface community often obsess over the smallest details: shifting an element one pixel to the left or finding the perfect transparency setting for our drop shadows. Such an obsession is well and good; it can lead to a superior user experience. But sometimes perhaps we should take a step back from the details. In many cases, our interfaces exist to provide understanding. If the user doesn’t understand the information, then it doesn’t matter how pretty the interface looks. Fortunately, there’s an entire science devoted to understanding information, the science of data visualization. And on the web there is one particular tool that its practitioners rely on far more than any other—the excellent D3.js library from Mick Bostock. In a series of posts, we’ll take a close look at this library and its enormous power.
Stephen disagrees with the view that D3.js is difficult to learn and sets a goal to get readers on the way to using D3.js after fifteen minutes of reading.
How did you fare?
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphics, Visualization | No Comments »
Monday, December 17th, 2012
Visualizing Facebook Friends With D3.js or “How Wolfram|Alpha Does That Cool Friend Network Graph” by Tony Young.
From the post:
A while ago, Wolfram|Alpha got the ability to generate personal analytics based on your Facebook profile. It made some cool numbers and stuff, but the friend network graph was the most impressive:
Wolfram|Alpha neatly separates your various social circles into clusters, based on proximity — with freaky accuracy.
With the awesome D3.js library, along with some gratuitous abuse of the Facebook API, we can make our own!
If you’re impatient, skip through all this text and check out the example or the screenshot!
A good example of the ease of deduplication (read merging) where the source of ids is uniform.
Possible classroom exercise to create additional Facebook accounts for students, so that each student has at least two (2) Facebook accounts. Each with friend lists.
Any overlapping friends will “merge” but the different accounts don’t, even though the same person.
Walk through solving the merging problem where there are different accounts.
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphs, Networks, Visualization | No Comments »
Thursday, December 13th, 2012
D3 Replusive
An unlikely key sequence that triggers this behavior in a graph interface to a topic map could be quite amusing.
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphics, Humor | No Comments »
Thursday, December 13th, 2012
D3 Tips and Tricks (PDF)
Introduction to graphics with D3.
Covers graphs (the sort you see in the male vitality ads, not nodes/arcs) at this point with more promised to follow.
You are going to have to learn the basics and this will get you started.
BTW, follow the blog as well: http://www.d3noob.org/
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphics | No Comments »
Wednesday, December 12th, 2012
d3js/SVG Export demo
From the post:
d3js is a JavaScript library for manipulating documents based on data. The library enables stunning client-side visualization inside the webbrowser.
Commonly in science-related websites (and possibly many others), users need to save the generated visualization in vectorized format (e.g. PDF), to be able to incorporate the graphics in presentation or publications.
This website demonstate one possible method of saving d3js graphics to PDF.
See below for more technical details.
I can’t imagine anyone wanting a static image of a topic map but you never know.
I first saw this in a tweet by Christophe Viau.
Posted in D3, Graphics, SVG, Visualization | No Comments »
Tuesday, December 4th, 2012
Jerome Cukier has posted a collection of simulations (Interactive Models) and a potential aid for museum visitors (La nuit blanche) using d3.
Hard to say which one I like better. The models page is an impressive demonstration of d3, but La nuit blanche has more immediate application with topic maps.
I first saw this in Christophe Lalanne’s A bag of tweets / November 2012.
Posted in D3, Graphics, Visualization | No Comments »
Saturday, November 24th, 2012
GraphChi visual toolkit – or understanding your data by Danny Bickson.
Danny walks through using GraphChi to visual the Orange d4d data set. (cell phone usage).
Easy instructions and heavy on interesting graphics so you need to read the original post.
Very cool!
Posted in D3, GraphChi, Graphs, Visualization | No Comments »
Wednesday, November 21st, 2012
Interactive Data Visualization for the Web by Scott Murray.
A preview version explaining D3.
Skimming the first couple of chapters it has a number of references/examples but could use one or more editing passes.
Still, if you are new to D3, it’s free and correcting any mistakes you find will be good practice.
I first saw this in a tweet by Jen Lowe.
Update: Final ebook and print copies are now available!
Posted in D3, Graphics, Visualization | No Comments »
Tuesday, October 23rd, 2012
Basics of JavaScript and D3 for R Users by Jerzy Wieczorek.
From the post:
Hadley Wickham, creator of the ggplot2 R package, has been learning JavaScript and its D3 library for the next iteration of ggplot2 (tentatively titled r2d3?)… so I suspect it’s only a matter of time before he pulls the rest of the R community along.
Below are a few things that weren’t obvious when I first tried reading JavaScript code and the D3 library in particular. (Please comment if you notice any errors.) Then there’s also a quick walkthrough for getting D3 examples running locally on your computer, and finally a list of other tutorials & resources. In a future post, we’ll explore one of the D3 examples and practice tweaking it.
Perhaps these short notes will help other R users get started more quickly than I did. Even if you’re a ways away from writing complex JavaScript from scratch, it can still be useful to take one of the plentiful D3 examples and modify it for your own purposes.
Just in case you don’t have time today to build clusters on EC2.
Being mindful that delivery of content is what leads to sales.
Or, knowing isn’t the same as showing.
The first may make you feel important. The second may lead to sales.
Up to you.
Posted in D3, Javascript, R | No Comments »
Sunday, October 7th, 2012
Parallel Coordinates [D3]
From the webpage:
A visual toolkit for multidimensional detectives.
Read paper at the link to “multidimensional detectives.”
What is at stake is visual exploration of data.
Are you the sort of person who sees patterns before others? Or patterns others miss even after you point them out?
You could have a profitable career in visual exploration of data. Seriously.
I first saw this at Christophe Lalanne’s A bag of tweets / September 2012.
Posted in D3, Graphics, Visualization | No Comments »
Tuesday, August 28th, 2012
D3 2.10.0 Update
An update of D3.js is out, just in case you are using it with topic map (or other) visualizations.
New features:
I first saw this at Christopher Lalanne’s A bag of tweets / August 2012.
Posted in D3, Graphics, Visualization | No Comments »
Monday, August 13th, 2012
New version of data-visualising D3 JavaScript library
From the post:
Version 2.10 of the open source D3 (Data Driven Development) JavaScript library features a good dozen additions or enhancements and can be used to visualise datasets both statically or interactively using HTML, CSS, and SVG. Like jQuery, the cross-browser library features generic DOM element selection, dynamic property annotation, event processing, transitions and transformations. D3′s web site includes more than 200 impressive examples, some from large media firms and institutions.
New features for present or future topic map visualizations!
Posted in D3, Graphics, Visualization | No Comments »
Thursday, August 2nd, 2012
How to Make an Interactive Network Visualization by Jim Vallandingham.
From the post:
Interactive network visualizations make it easy to rearrange, filter, and explore your connected data. Learn how to make one using D3 and JavaScript.
Networks! They are all around us. The universe is filled with systems and structures that can be organized as networks. Recently, we have seen them used to convict criminals, visualize friendships, and even to describe cereal ingredient combinations. We can understand their power to describe our complex world from Manuel Lima’s wonderful talk on organized complexity. Now let’s learn how to create our own.
In this tutorial, we will focus on creating an interactive network visualization that will allow us to get details about the nodes in the network, rearrange the network into different layouts, and sort, filter, and search through our data.
In this example, each node is a song. The nodes are sized based on popularity, and colored by artist. Links indicate two songs are similar to one another.
Try out the visualization on different songs to see how the different layouts and filters look with the different graphs.
You know this isn’t a post about politics because it would be visualizing friendships with convicted criminals.
A degree of separation graph between elected public officials and convicted white collar criminals? A topic map for another day.
For today, enjoy learning how to use D3 and JavaScript for impressive network visualizations.
Imagine mapping the cereal visualization to the shelf locations at your local Kroger, where selecting one ingredient identifies the store locations of others.
Posted in D3, Graphics, Graphs, Javascript, Music, Networks, Visualization | No Comments »
Wednesday, May 30th, 2012
D3 Tutorials by Scott Murray.
I was following a link to the last tutorial in this series on axes when I discovered this resource.
Starts from a description of the tutorials:
- Brief
- Focused, each addressing a single topic
- Modular, so you can reference only the topics relevant to your goals
- Complete, with sample code illustrating each topic
- Dynamic, updated and expanded as needed
- Free, licensed so you can use the code however you wish
and ends sixteen (16) lessons later with a tutorial on axes, or as Scott puts it:
Let’s add horizontal and vertical axes, so we can do away with the horrible red numbers cluttering up our chart.
More tutorials are on the way but I am sure that Scott would appreciate your questions and encouragement.
I saw the reference to the axes tutorial in Christophe Lalanne’s Bag of Tweets for May 2012.
Posted in D3, Graphics, Visualization | No Comments »
Thursday, May 3rd, 2012
Parallel Sets for categorical data, D3 port
If you are working with categorical data, you need to become familiar with parallel sets.
Starting here isn’t a bad idea.
Very impressive graphics/visualization.
Posted in D3, Graphics, Parallel Sets, Visualization | No Comments »