d3.js d3_tutorial/ Intro Data-Driven Documents, or D3 for short, is a new visualization library to build visualizations in SVG. But in my opinion, it's also the best javascript multipurpose SVG library when it comes to animation, interaction and above all for binding data to graphics. The community is very responsive, source code is very clean and the API is well written. There is not a lot of tutorials to learn D3 yet. But they are very good introductions and you can find plenty of examples packaged with the source code or hidden in forums. Simple example Let's start with a simple D3 example. D3 simple example: <! SVG circle with hovering: This is the SVG generated by the code from the above example: Why not just write this SVG fragment directly? Add, remove and modify multiple elements from an existing DOM Dynamically add attributes and styles according to a function Animate attributes and styles Bind data to automatically add elements when needed Benefits from a lot of helper functions Animating Binding data
Jerome Cukier Google Testing Blog d3-graphics - SVG graphics based on d3.js This modest graphics project contains code samples using d3.js, which is an impressive JavaScript-based toolkit created by Mike Bostock. The code samples were tested in Chrome 15 on a Macbook (OSX 10.6.8), and they are loosely based on various equations, liberally interpreted in order to create some aesthetically pleasing eye-candy graphics. Please keep in mind that these code samples are primarily for entertainment. The code samples are grouped in 18 sub-directories (archimedes, astroid, cardioid, ..., strophoid), some of which also contain three additional subdirectories called "filters", "css3-background", and "filters-and-css". The code samples in these three sub-directories enhance the code samples in their parent directory by adding SVG filters, CSS3 stylesheets, and SVG-Filters-Plus-CSS3-Stylesheets, respectively. The SVG filter-based code samples are derived from code samples that are in the following code project: code.google.com/p/svg-filters-graphics Enjoy!
Mike Bostock Please find my recent work on Observable. Past Work April 28, 2017A Better Way to Code December 9, 2016Command-Line Cartography March 9, 2016What Makes Software Good? December 28, 2015Introducing d3-scale December 3, 2015Introducing d3-shape November 23, 2015Let’s Make a (D3) Plugin December 27, 2014Mapping Every Path to the N.F.L. December 20, 2014How Each Team Can Make the N.F.L. November 5, 2014The Most Detailed Maps You’ll See From the Midterm Elections November 3, 2014How To Scroll September 19, 2014‘Stop-and-Frisk’ Is All but Gone From New York July 26, 2014Mapping the Spread of Drought Across the U.S. June 26, 2014Visualizing Algorithms June 15, 2014Three Little Circles May 22, 2014Is It Better to Rent or Buy? May 6, 2014Let’s Make a Bubble Map April 22, 2014Who Will Win The Senate? March 7, 2014Let’s Make a Block Feburary 14, 2014Front Row to Fashion Week February 14, 2014Sochi 2014: Interactive Stories January 11, 2014Taking the Battle to the States November 5, 2013Let’s Make a Bar Chart #Examples
TAGSExplorer: Interactively visualising Twitter conversations archived from a Google Spreadsheet MASHe Graphs can be a powerful way to represent relationships between data, but they are also a very abstract concept, which means that they run the danger of meaning something only to the creator of the graph. Often, simply showing the structure of the data says very little about what it actually means, even though it’s a perfectly accurate means of representing the data. Everything looks like a graph, but almost nothing should ever be drawn as one. Ben Fry in ‘Visualizing Data’ I got that quote from Dan Brickley’s post Linked Literature, Linked TV – Everything Looks like a Graph and like Dan I think Ben Fry has it spot on. When I started following Tony’s work on network analysis (here’s a starting point of posts), my immediate response was ‘Where’s Wally?’ As I start my exploration of tools like NodeXL it's very clear that being able to filter, probe and wander through the data provides far more insights to what’s going on. But what does this graph actually mean? *** TAGSExplorer ***
speakers - JDays Here follow the Speakers and their Abstracts Keynote: Agile and SEMAT – Perfect Partners Keynote Abstract: Today, as always, there are many different initiatives underway to help improve the way we develop software. The most popular and prevalent of which is the Agile Movement. One of the new kids on the block is the SEMAT initiative. As with any new initiative people are struggling to see how it fits into the world and how it relates to all the other things going on. For example does it improve or replace their current ways of working. The good news is that both Agile and SEMAT promote non-prescriptive value-based philosophies that encourage software development teams to select and use whatever practices best fit their context and, most importantly, continuously inspect, adapt and improve their way of working. He is well known for his pioneering work and has over 25 years of experience using object methods for the design of large, real-time systems. Read more about "Ivar Jacobson"