background preloader

Thinking with Joins

Thinking with Joins
Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no primitive for creating multiple DOM elements. Wait, WAT? Sure, there’s the append method, which you can use to create a single element. svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 2.5); But that’s just a single circle, and you want many circles: one for each data point. svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", 2.5); This code does exactly what you need: it creates a circle element for each data point, using the x and y data properties for positioning. Here’s the deal. Data points joined to existing elements produce the update (inner) selection. Now we can unravel the mysterious enter-append sequence through the data join: But why all the trouble? Likewise, to shrink-out: Related:  d3.jsD3.js

D3 Tutorials <div id="js_warning"><strong>JavaScript is turned off, so this page won&rsquo;t be very interactive.</strong> Switch JavaScript back on in your web browser for the full experience.</div> These tutorials have been expanded into a book, Interactive Data Visualization for the Web, published by O’Reilly in March 2013. Purchase the ebook and print editions from O’Reilly. A free, online version includes interactive examples. Election site part 1: Basics with Knockout.js, Bootstrap and d3.js This article shows how you can use knockout.js, Twitter's Bootstrap and d3.js together to create a javascript application that creates visually pleasing graphics and diagrams to your users. This is complete client side solution that only communicates with REST to the server. This is part 1 of a series of articles discussing these concepts. In this first article we'll look at setting up the basic application and we'll demonstrate how to use knockout.js, bootstrap and d3.js. It's a bit too much to show all the javascript in this article. You can find the demo for this version (with a couple more features) at this url: The case In the Netherlands, where I live, we have a tendency of our chosen leaders not serving their terms. Creating an election map These updates, and the way they are presented is kind of interesting. US elections Which tools will we use? Show complete map, with colors representing a specific value Connect all the things

Documentation Learn the basics of D3 with this introductory tutorial, covering the core concepts of selections and data binding. Read me first! Using the example of a no-frills, static bar chart, this guide describes the core D3 concepts, including selections, functional properties, and scales. A continuation of the above introductory tutorial, this guide covers more exciting dynamic aspects of D3, including transitions and data joins. An introduction to D3 for users of Protovis. Eurozone crisis This graphic attempts to visualise how the Eurozone crisis developed over time. Seven key indicators are shown for the Eurozone and each of the original 12 Eurozone members. The outer radius of the ring shows the maximum within the Eurozone for a given month and the inner radius the minimum. The thick blue line shows the median. The scales of the indicators are arranged such that up in the graph means good and down bad. The indicators are as follows. GDP growth. Increase in total economic output. Surplus. Government surplus or deficit. Interest. Interest rate payable on government 10 year bonds. Debt. Total government debt. Unemployment. Overall unemployment rate. Inflation. Change in price levels. Investments. Investments as measured by Gross fixed capital formation. Compared to 2006, the picture at the end of 2011 is different in two main ways. For the purposes of this graph, the Eurozone is always composed of the 12 countries listed on the left.

d3.js experiments in the console | the evolving ultrasaurus d3 (aka Data-Driven Documents) is a great little JavaScript framework for data visualization. It’s got a nice declarative syntax for DOM manipulation that’s quite readable, but takes a bit of effort to understand exactly what it’s doing. Favorite links: UPDATE: Dashing D3.js is an amazing series of tutorials with great conceptual groundingd3 tutorials provide a great conceptual foundationThinking with Joins by d3 creator, Mike Bostick, helps explain the syntax for chaining methodsScott Murray’s d3 tutorial offers a very nice step-by-step, covering a lot of the same ground as my little tutorial below with excellent discussions of the fundamentals. I like to understand stuff by playing with it interactively, so I created a skeleton index.html which just includes d3.js and a style a div where I’ll display some data. UPDATE: blank file below posted here Then in the FireBug console, we can interact with d3, the top-level object that allows us to access all of d3′s goodness. and “Hello d3!”

Transitioning innerRadius of svg.arc - D3.js Combining D3 and Raphael to make a network graph « dataist During the past week I have been working on a visualization for Sveriges Radio about Melodifestivalen, the Swedish qualification for the Eurovision Song Contest. Every year there is a HUGE fuzz about this show over here in Sweden. I wanted to explore the songwriters in the competition from a dataist perspective. Who are the guys behind the scene? If you follow Melodifestivalen a few years you will notice how many names occur year after year. In making this graph I managed to draw several quite interesting conclusions, for example that there are by far more men than women among the songwriters. But this is not what I wanted to blog about today, but rather about the making of this visualization. I have really come to like the Raphael.js library, but unfortunately it does not provide the same robust support for advanced data visualizations (for example network graphs) as its big brother D3.js. D3 has a really powerful library for making network graphs, or force-directed layouts. Like this:

d3.js? Babysteps. I've been playing around with d3.js - the awesome javascript data visualization library. I need to create some line charts for a project I'm working on, and compared to other javascript plotting options, the barebonesedness of d3.js made me a bit hesitant to jump in (what do you mean I have to draw my own axes and tick marks?). So I toyed around with some of the other options, but it seemed like every other library I tried had some deal breaker for me. So I found myself back at d3.js. It turns out that the barebonesedness is a blessing in disguise - since it makes no assumptions about your data and how you should display it, there are no defaults to fight against when you stray off the beaten path. But since you need to do a bit of setup before you get anything on the screen, it can be a bit daunting. Let's make a simple plot with a single 4-point dataset. Speaking of my plot, let's create an svg element and append it to the DOM. Here, x and y are actually functions.

JUNG in Neo4j – Part 2 A few weeks ago I showed you how to visualize a graph using the chord flare visualization and how to visualize a network using a force directed graph visualization from D3.js. On Twitter Claire Willett from Riparian Data asked: Visualizing a 200-node network w/ #Cypher + #D3js –cool method, but maybe a node quilt would work better? This post on Graphs Beyond the Hairball by Robert Kosara explains why some non-traditional graph visualizations may work better and links us to an article explaining what a Node Quilt is and how it’s useful. The study of social networks goes back to at least the ancient Greeks, but we won’t go back that far in time today… just to 1977. We’re working with Neo4j, and you all know Neo knows Kung Fu, so we’ll do something a little different. I am once again using the first 50 names from the Graph DataBase- Chicago Meet-Up group. Our visualization is expecting a list of nodes already in groups, and a list of relationships that includes it’s strength. Like this:

D3 for Mere Mortals By Luke Francl (, August 2011 d3.js is a data visualization library by Mike Bostock, who is also the primary creator of Protovis, which D3 is designed to replace. D3 has a steep learning curve, especially if (like me) you are not used to the pixel-precision of graphics programming. The pay off is that you can create some amazing visualizations with D3 (just look at the examples!). I know very little about D3, but the best way to learn something is to teach here is a very simple introduction to D3 from the beginning. D3 shares similarities with its predecessor Protovis. SVG provides basic shape primitives like line, rect, and circle as well as text and path to build complicated lines and shapes. To place a rectangle on the canvas, you need to understand that the axis starts in the top left corner and counts up towards the bottom of the screen. Here's a diagram of a rectangle positioned at (100, 100) with a height of 100 pixels and a width of 200 pixels. Next Steps