Best-First Search by Mike Bostock.
Take my first “best-first search” result:
as encouragement to see this “live code” for yourself!
Best-First Search represents, figuratively speaking, the process of breaching cybersystems of pipeline construction companies, pipeline operators, their lawyers, investors, etc. Magic bullets work but so does following best-first paths until success is achieved.
Good hunting!
Introducing VizHub by Curran Kelleher.
From the post:
I’d like to tell you a bit about VizHub, the next generation of Datavis.tech, a data visualization platform I worked on for about a year, and from which I learned how I wanted to develop VizHub.
VizHub is still early work in progress (alpha software), but the beta release should be ready by September, at which time I plan to use it as the platform for teaching (creating example code) and learning (students doing homework assignments) data visualization with D3.js and SVG in an online course this Fall at @WPI ! Many students are remote and transfer credit from WPI to other universities. If you’re a graduate student in Computer Science anywhere, you can register (see enrollment details). Here’s a taste of what my students made last year.
…
Difficulties with WordPress accepting images at the moment but here are links to three of the more impressive visualizations from Kelleher’s class:
If your visualization isn’t working, it’s unlikely its the tool. 😉
PS: CS 573 Data Visualization:
This course exposes students to the field of data visualization, i.e., the graphical communication of data and information for the purposes of presentation, confirmation, and exploration. The course introduces the stages of the visualization pipeline. This includes data modeling, mapping data attributes to graphical attributes, visual display techniques, tools, paradigms, and perceptual issues. Students learn to evaluate the effectiveness of visualizations for specific data, task, and user types. Students implement visualization algorithms and undertake projects involving the use of commercial and public-domain visualization tools. Students also read papers from the current visualization literature and do classroom presentations. Prerequisite: a graduate or undergraduate course in computer graphics.
Financial Times Visual Vocabulary
From the webpage:
A poster and web site to assist designers and journalists to select the optimal symbology for data visualisations, by the Financial Times Visual Journalism Team. Inspired by the Graphic Continuum by Jon Schwabish and Severino Ribecca.
Read the Chart Doctor feature column for full background on why we made this: Simple techniques for bridging the graphics language gap
For D3 templates for producing many of these chart types in FT style, see our Visual Vocabulary repo.
…
The Financial Times sets a high bar for financial graphics.
Here it provides tools and guidance to help you meet with similar success.
Enjoy and pass this along.
The Hitchhiker’s Guide to d3.js by Ian Johnson.
From the post:
[graphic omitted: see post]
The landscape for learning d3 is rich, vast and sometimes perilous. You may be intimidated by the long list of functions in d3’s API documentation or paralyzed by choice reviewing the dozens of tutorials on the home page. There are over 20,000+ d3 examples you could learn from, but you never know how approachable any given one will be.
[graphic omitted: see post]
If all you need is a quick bar or line chart, maybe this article isn’t for you, there are plenty of charting libraries out there for that. If you’re into books, check out Interactive Data Visualization for the Web by Scott Murray as a great place to start. D3.js in Action by Elijah Meeks is a comprehensive way to go much deeper into some regions of the API.
This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something about some of those things, so this guide will attempt to give you good starting points for the things you want to learn more about.
…
Depending on your needs and learning style, The Hitchhiker’s Guide to d3.js (Guide), may be just what you need.
The Guide focuses on how to use d3.js and not on: What visualization should I create?”
Suggestions on what should be considered when moving from raw data to a visualization? Resources?
Thanks!
Interactive Data Visualization for the Web, 2nd Edition: An Introduction to Designing with D3 by Scott Murray.
From the webpage:
Interactive Data Visualization for the Web addresses people interested in data visualization but new to programming or web development, giving them what they need to get started creating and publishing their own data visualization projects on the web. The recent explosion of interest in visualization and publicly available data sources has created need for making these skills accessible at an introductory level. The second edition includes greatly expanded geomapping coverage, more real-world examples, a chapter on how to put together all the pieces, and an appendix of case studies, in addition to other improvements.
It’s pre-order time!
Estimated to appear in August of 2017 at $49.99.
This shipping map, created by Kiln, based on data from the UCL Energy Institute, should inspire you to try D3.
The Interactive version, using 2012 data, illustrates the ability to select types of shipping:
with locations, port information and a variety of other information.
All of which reminds me of the Who Sank My Battleship? episode with Gen. Paul Van Riper (ret.), who during war games, used pleasure craft and highly original tactics to sink the vast majority of the opposing American fleet. So much so that the American fleet had to be “refloated” to continue the games with any chance of winning. War game was fixed to ensure American victory, claims general.
Given the effectiveness of Gen. Van Riper’s tactics had on military vessels, you can imagine how unarmored civilian shipping would fare. You don’t need an self-immolating F-35 or a nuclear sub to damage civilian shipping.
What you need is shipping broken down into targeting categories with their locations (see https://www.shipmap.org/), one or more pleasure craft stuffed with explosives and some rudimentary planning.
For the details of what I call the Who Sank My Battleship? episode, the official report, U.S. Joint Forces Command Millennium Challenge 2002: Experiment Report, runs some 752 pages.
Peter has added three more chapters since my last visit:
There are another eight (8) to go.
I don’t know about you or Peter, but when people are showing interest in my work, I tend to work more diligently on it.
Drop by, ask questions, make suggestions.
Enjoy!
From the introduction:
D3 is an open source JavaScript library for:
- data-driven manipulation of the Document Object Model (DOM)
- working with data and shapes
- laying out visual elements for linear, hierarchical, network and geographic data
- enabling smooth transitions between user interface (UI) states
- enabling effective user interaction
Let’s unpick these one by one.
…
Peter forgets to mention, there will be illustrations:
Same data as a packed circle:
Same data as a treemap:
The first two chapters are up and I’m waiting for more!
You?
PS: Follow Peter at: @animateddata.
Mike Bostock tweets:
After 12+ months and ~4,878 commits, I am excited to announce the release of D3 4.0! https://github.com/d3/d3/releases/v4.0.0 … #d3js
After looking at the highlights page on Github, I couldn’t in good conscience omit any of it:
D3 is now modular, composed of many small libraries that you can also use independently. Each library has its own repo and release cycle for faster development. The modular approach also improves the process for custom bundles and plugins.
There are a lot of improvements in 4.0: there were about as many commits in 4.0 as in all prior versions of D3. Some changes make D3 easier to learn and use, such as immutable selections. But there are lots of new features, too! These are covered in detail in the release notes; here are a few highlights.
Colors, Interpolators and Scales
- Colors now have opacity (rgba, hsla, etc.).
- New Cubehelix color space.
- New sequential color scales, including Viridis and cyclical Rainbow.
- New point and band scales replace ordinal.rangeBands and ordinal.rangePoints.
- New basis spline interpolators (e.g., continuous ColorBrewer schemes).
Shapes and Layouts
- Shapes (e.g., lines, areas, arcs) can now render to Canvas.
- Fixed cardinal and monotone splines.
- Added parameterized Catmull–Rom and natural splines.
- New deterministic, extensible velocity Verlet force layout.
- New circle-packing layout!
- New extensible treemap layout; improved squarified treemaps; added binary treemaps.
- New d3.stratify for tabular hierarchical data.
- New faster, mutable, non-recursive quadtrees.
- Voronoi diagrams now expose topological information.
Selections, Transitions, Easings and Timers
- Selections and transitions are now immutable, providing a cleaner interface.
- New selection.raise, selection.lower and selection.dispatch methods.
- Time is now frozen in the background, avoiding unintended effort.
- Timers can now be stopped externally.
- Transitions can now interpolate CSS transforms (in addition to SVG transforms).
- You can now cancel transitions using selection.interrupt.
- Easier transition chaining thanks to new d3.active and changed transition.delay.
- Better performance for homogenous transitions (e.g., shared interpolators across elements).
- Better state persistence and enforcement for transitions.
- Fixed elastic and bounce easing.
Even More!
- Better default axis appearance.
- Better brush interaction.
- Built-in asynchronous queue for loading files in parallel.
- New low-level d3.ticks API.
…
Don’t complain to me that you are bored over the Fourth of July weekend in the United States.
Downloads: d3.zip, Source code (zip), Source code (tar.gz).
SVGs beyond mere shapes by Nadieh Bremer
From the post:
I was exhilarated (and honored) to have my talk accepted for OpenVis 2016. Yesterday April 25th, 2016, I was on the stage of the Simons IMAX Theatre in Boston’s New England Aquarium to inspire the audience with some dataviz eye candy. My talk was titled SVGs beyond mere shapes:
SVG can do much more than create nice shapes and paths. In my talk I discuss several techniques and demonstrate how to implement them in D3: from dynamic gradients based on data, to SVG filters, to creating glow, gooey, and fuzzy effects that brighten up any visual.
My eventual goal was to give people a whole bunch of effective or fun examples but to also show them that, even if I focus on a subject as narrow as SVG gradient and filters, if you try to experiment and use things in an unconventional manner you can create some very interesting results. I hope I’ve managed to inspire the audience to show a dedication to the details, to go beyond the norm, so they have to make as few concessions to the computer as possible to recreate the image that they have in their mind.
I’ve received so many wonderful reactions, it was really an amazing experience and well worth the time invested and the nerves I’ve had building up inside of me since hearing I’d been accepted last November 🙂
…
Are you ready to take SVG beyond shapes?
The start of a series so check back often and/or follow @NadiehBremer.
For those who believe in national borders:
D3.js is powerful enough to portray self-serving fictions.
Source code included.
I first saw this in a tweet by Christophe Viau.
networkD3: D3 JavaScript Network Graphs from R by Christopher Gandrud, JJ Allaire, & Kent Russell.
From the post:
This is a port of Christopher Gandrud’s R package d3Network for creating D3 network graphs to the htmlwidgets framework. The htmlwidgets framework greatly simplifies the package’s syntax for exporting the graphs, improves integration with RStudio’s Viewer Pane, RMarkdown, and Shiny web apps. See below for examples.
It currently supports three types of network graphs:
- Force directed networks with
simpleNetworkandforceNetwork- Sankey diagrams with
sankeyNetwork- Reingold-Tilford Tree graphs with
treeNetwork…
I haven’t compared this to GraphViz but the Sankey diagram option is impressive!
Introducing d3-scale by Mike Bostock.
From the post:
I’d like D3 to become the standard library of data visualization: not just a tool you use directly to visualize data by writing code, but also a suite of tools that underpin more powerful software.
To this end, D3 espouses abstractions that are useful for any visualization application and rejects the tyranny of charts.
…(emphasis in original)
Quoting from both Leland Wilkinson (The Grammar of Graphics) and Jacques Bertin (Semiology of Graphics, Mike says D3 should be used for ordinal and categorical dimensions, in addition to real numbers.
Much as been done to expand the capabilities of D3 but it remains up to you to expand the usage of D3 in new and innovative ways.
I suspect you can already duplicate the images (most of them anyway) from the Semiology of Graphics, for example, but that isn’t the same as choosing a graphic and scale that will present information usefully to a user.
Much is left to be done but Mike has given D3 a push in the right direction.
Will you be pushing along side him?
D3 Maps without the Dirty Work by
From the post:
For those like me who aren’t approaching mapping in D3 with a GIS background in tow, you may find the propretary goe data structures hard to handle. Thankfully, Scott Murray lays out a simple process in his most recent course through JournalismCourses.org. By the time you are through reading this post you’ll have the guide post needed from mapping any of the data sets found on Natural Earths website in D3.
…
First in a series of posts on D3 rendering for maps. Layers of D3 renderings is coming up next.
Enjoy!
Another essential but low-level data science skill, data-driven visualizations!
From the webpage:
Composable
Create small and sharp charts/components that do one thing one well (e.g. Bars, Lines, Legend, Axis, etc.) and compose them to create complex visualizations.
d3.compose works great with your existing charts (even those from other libraries) and it is simple to extend/customize the built-in charts and components.
Automatic Layout
When creating complex charts with D3.js and d3.chart, laying out and sizing parts of the chart are often manual processes.
With d3.compose, this process is automatic:
- Automatically size and position components
- Layer components and charts by z-index
- Responsive by default, with automatic scaling
Why d3.compose?
- Customizable: d3.compose makes it easy to extend, layout, and refine charts/components
- Reusable: By breaking down visualizations into focused charts and components, you can quickly reconfigure and reuse your code
- Integrated: It’s straightforward to use your existing charts or charts from other libraries with d3.compose to create just the chart you’re looking for
Don’t ask me why but users/executives are impressed by even simple charts.
(shrugs) I have always assumed that people use charts to avoid revealing the underlying data and what they did to it before making the chart.
That’s not very charitable but I have never been disappointed in assuming either incompetence and/or malice in chart preparation.
People prepare charts because they are selling you a point of view. It may be a “truthful” point of view, at least in their minds but it is still an instrument of persuasion.
Use well-constructed charts to persuade others to your point of view and be on guard for the use of charts to persuade you. Both of those principles will serve you well as a data scientist.
Introduction to d3.js with Mike Taptich.
From part one of a two-part introduction to d3.js:
Don’t know Javascript? No problem.
This two-part introduction to d3.js is intended for beginners, even those with limited exposure to JavaScript — the language used by web browsers. Regardless of your background, I put together a few examples to get everyone (re)oriented to coding in the browser.
…
Sounds like your typical introduction to …. type tutorial until you reach:
My Coding Philosophy
Now, I am a firm believer in coding with a purpose. When you are first starting off learning JavaScript, you may want to learn everything there is to learn about the language (broad). I suggest that you instead only pick up the pieces of code you need in order to complete some bigger project (narrow). To give you a glimpse of what you could do in d3, check out Mike Bostock’s github repo here or Christopher Viau’s well-curated repository here.
You don’t know at that point but Part 2 is going to focus on maps and displaying data on maps! Some simple examples and some not quite so simple.
D3.js will do a lot of things but you can get a tangible result for many use cases by mapping data to maps.
Some random examples:
This rocks!
I first saw this in a tweet by Christophe Viau.
From the webpage:
These code examples accompany the O’Reilly video course “Intermediate d3.js: Charts, Layouts, and Maps”.
This video is preceded by the introductory video course “An Introduction to d3.js: From Scattered to Scatterplot”. I recommend watching and working through that course before attempting this one.
Some of these examples are adapted from the sample code files for Interactive Data Visualization for the Web (O’Reilly, March 2013).
If you have been looking to step up your d3 skills, here’s the opportunity to do so!
Enjoy!
Combining the power of R and D3.js by Andries Van Humbeeck.
From the post:
According to wikipedia, the amount of unstructured data might account for more than 70%-80% of all data in organisations. Because everyone wants to find hidden treasures in these mountains of information, new tools for processing, analyzing and visualizing data are being developed continually. This post focuses on data processing with R and visualization with the D3 JavaScript library.
Great post with fully worked examples of using R with D3.js to create interactive graphics.
Unfortunate that it uses the phrase “immutable images.” A more useful dichotomy is static versus interactive. And it lowers the number of false positives for anyone searching on “immutable.”
Enjoy!
I first saw this in a tweet by Christophe Lalanne.
Interactive Data Visualization for the Web by Scott Murray.
From the webpage:
This online version of Interactive Data Visualization for the Web includes 44 examples that will show you how to best represent your interactive data. For instance, you’ll learn how to create this simple force layout with 10 nodes and 12 edges. Click and drag the nodes below to see the diagram react.
When you follow the link to the O’Reilly site, just ignore the eBook pricing and go directly to “read online.”
Much crisper than the early version I mention at: Interactive Data Visualization for the Web [D3].
I first saw this in a tweet by Kirk Borne.
Who’s like Tatum? by Peter Cook.
Only a small part of the jazz musical universe that awaits you at “Who’s Like Tatum?”
The description at the site reads:
Who’s like Tatum?
Art Tatum was one of the greatest jazz pianists ever. His extraordinary command of the piano was legendary and was rarely surpassed.
This is a network generated from Last.fm‘s similar artist data. Using Art Tatum as a starting point, I’ve recursively gathered similar artists.
The visualisation reveals some interesting clusters. To the bottom-right of Art Tatum is a cluster of be-bop musicians including Miles Davis, Charlie Parker and Thelonious Monk.
Meanwhile to the top-left of Tatum is a cluster of swing bands/musicians featuring the likes of Count Basie, Benny Goodman and a couple of Tatum’s contemporary pianists Fats Waller and Teddy Wilson. Not surprisingly we see Duke Ellington spanning the gap between these swing and be-bop musicians.
If we work counter-clockwise we can observe clusters of vocalists (e.g. Mel Tormé and Anita O’Day), country artists (e.g. Hank Williams and Loretta Lynn) and blues artists (e.g. Son House and T-Bone Walker).
It’s interesting to spot artists who span different genres such as Big Joe Turner who has links to both swing and blues artists. Might this help explain his early involvement in rock and roll?
Do explore the network yourself and see what insights you can unearth. (Can’t read the labels? Use your browser’s zoom controls!)
Designed and developed by Peter Cook. Data from the Last.fm API enquired with pylast. Network layout using D3.
At the site, mousing over the name of an artist in the description pops up their label in the graph.
As interesting as such graphs can be, what I always wonder about is the measure used for “similarity?” Or were multiple dimensions used to measure similarity?
I can enjoy and explore such a presentation but I can’t engage in a discussion with the author or anyone else about how similar or dissimilar any artist was or along what dimensions. It isn’t that those subjects are missing, but they are unrepresented so there is no place to record my input.
One of the advantages of topic maps being that you can choose which subjects you will represent and which ones you want. Which of course means anyone following you in the same topic map can add the subjects they want to discuss as well.
For a graph such as this one, represented as a topic map, I could add subjects to represent the base(s) for similarity and comments by others on the similarity or lack thereof of particular artists. Other subjects?
Or to put it more generally, how do you merge different graphs?
Developing a D3.js Edge by Chris Viau, Andrew Thornton, Ger Hobbelt, and Roland Dunn. (book)
From the description:
D3 is a powerful framework for producing interactive data visualizations. Many examples created in the real world with D3, however, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
This book is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. You will also want to have a good debugger handy (Chrome Developer panel or the Firefox/Firebug combo), to help you step through the many real world examples that you’ll find in this book. You should also be somewhat comfortable with any of these concepts:
…
If you read Kurt Cagle’s Ten Trends in Data Science 2015, you will recall him saying that 2014: “…demand for good data visualizers went from tepid to white hot” with the anticipation the same will be true for 2015.
Do note the qualifier “good.” That implies to me more than being able to use the stock charts and tools that you find in many low-end data tools.
Unlike the graphic capabilities of low-end data tools, D3 is limited more by your imagination than any practical limit to D3.
So, dust off your imagination and add D3 to your tool belt for data visualization.
PS: All the source code is here: https://github.com/backstopmedia/D3Edge
Cartographer: Interactive Maps for Data Exploration by Lincoln Mullen.
From the webpage:
Cartographer provides interactive maps in R Markdown documents or at the R console. These maps are suitable for data exploration. This package is an R wrapper around Elijah Meeks’s d3-carto-map and d3.js, using htmlwidgets for R.
Cartographer is under very early development.
Data visualization enthusiasts should consider the screen shot used to illustrate use of the software.
What geographic assumptions are “cooked” in that display? Or are they?
Screenshot makes me think data “exploration” is quite misleading. As though data contains insights that are simply awaiting our arrival. On the contrary, we manipulate data until we create one or more patterns of interest to us.
Patterns of non-interest to us are called noise, gibberish, etc. That is to say there are no meaningful patterns aside from us choosing patterns as meaningful.
If data “exploration” is iffy, then so are data “mining” and data “visualization.” All three imply there is something inherent in the data to be found, mined or visualized. But, apart from us, those “somethings” are never manifest and two different people can find different “somethings” in the same data.
The different “somethings” implies to me that users of data play a creative role in finding, mining or visualizing data. A role that adds something to the data that wasn’t present before. I don’t know of a phrase that captures the creative interaction between a person and data. Do you?
In this particular case, the “cooked” in data isn’t quite that subtle. When I say “United States,” I don’t make a habit of including parts of Canada and a large portion of Mexico in that idea.
Map displays often have adjacent countries displayed for context but in this mapping, data values are assigned to points outside of the United State proper. Were the data values constructed on a different geographic basis than the designation of “United States?”
Spark, D3, data visualization and Super Cow Powers by Mateusz Fedoryszak.
From the post:
Did you know that the amount of milk given by a cow depends on the number of days since its last calving? A plot of this correlation is called a lactation curve. Read on to find out how do we use Apache Spark and D3 to find out how much milk we can expect on a particular day.
There are things that except for a client’s request, I have never been curious about. 😉
How are you using Spark?
I first saw this in a tweet by Anna Pawlicka
emeeks’s blocks by Mike Bostock.
From the about page:
This is a simple viewer for code examples hosted on GitHub Gist. Code up an example using Gist, and then point people here to view the example and the source code, live!
The main source code for your example should be named index.html. You can also include a README.md using Markdown, and a thumbnail.png for preview. The index.html can use relative links to other files in your Gist; you can also use absolute links to shared files, such as D3, jQuery and Leaflet.
Rather remarkable page that includes a large number of examples from D3.js in Action.
The Big List of D3.js Examples by Christophe Viau.
The interactive version has 2523 examples, whereas the numbered list has 1897 examples, as of 13 October 2014.
There is a rudimentary index of the examples. That’s an observation, not a compliant. Effective indexing of the examples would be a real challenge to the art of indexing.
The current index uses chart type, a rather open ended category. The subject matter of the chart would be another way to index. Indexing by the D3 techniques used would be useful. Data that is being combined with other data?
Effective access to the techniques and data represented by this collection would be awesome!
Give it some thought.
I first saw this in a tweet by Michael McGuffin.
Introduction to Graphing with D3.js by Jan Milosh.
From the post:
D3.js (d3js.org) stands for Data-Driven Documents, a JavaScript library for data visualization. It was created by Mike Bostock, based on his PhD studies in the Stanford University data visualization program. Mike now works at the New York Times who sponsors his open source work.
D3 was designed for more than just graphs and charts. It’s also capable of presenting maps, networks, and ordered lists. It was created for the efficient manipulation of documents based on data.
This demonstration will focus on creating a simple scatter plot.
If you are not already using D3 for graphics, Jan’s post is an easy introduction with additional references to take you further.
Enjoy!
I first saw this in a tweet by Christophe Viau.
Creating Custom D3 Directives in AngularJS by Steven Hall.
From the post:
Among the most popular frameworks for making interactive data visualizations with D3 is AngularJS. Along with some great tools for code organization, Angular’s use of directives can be a powerful way to implement interactive charts and keep your code clean and organized. Here we are going to look at a simple example that creates a service that pulls data from last.fm using their public API. The returned data will be used to update two interactive charts created using Angular directives.
As usual in these tutorials the code is kept to a minimum to keep things clear and to the point. The code written for this example weighs in at about 250 lines of JavaScript and the results are pretty cool. The example uses D3’s enter, update, and exit selections to illustrate how thinking about object constancy when transitioning from one state to another can be really powerful for communicating relationships in the data that may be hard to spot otherwise.
I think the example presented here is a good one because it brings up a lot of the common concerns when developing using AngularJS (and in JavaScript in general really) with just a short amount of code.
We’ll touch on all the following concerns:
- Avoiding global variables
- Creating data services
- Dependency injection
- Broadcasting events
- Scoping directives
- Making responsive charts
In addition to making a basic service to retrieve data from an API that can be injected into your controllers and directives, this article will cover different ways to scope your directives and using the AngularJS eventing tools. As we’ll see, one chart in the example shares the entire root scope while the other creates an isolated scope that only has access to certain properties. Your ability to manage scopes for directives is one of the most powerful concepts to understand in working with Angular. Finally, we’ll look at broadcasting and listening for events in making the charts responsive.
…
Data delivery. Despite the complexity of data structures, formalisms used to develop algorithms for data analysis, network architectures, and the other topics that fill technical discussions, data delivery drives user judgments about your application/service.
This tutorial, along with others you will find here, will move you towards effective data delivery.
An A to Z of extra features for the D3 force layout by Simon Raper.
From the post:
Since d3 can be a little inaccessible at times I thought I’d make things easier by starting with a basic skeleton force directed layout (Mike Bostock’s original example) and then giving you some blocks of code that can be plugged in to add various features that I have found useful.
The idea is that you can pick the features you want and slot in the code. In other words I’ve tried to make things sort of modular. The code I’ve taken from various places and adapted so thank you to everyone who has shared. I will try to provide the credits as far as I remember them!
…
A great read and an even greater bookmark for graph layouts.
In Simon’s alphabet:
A is for arrows.
B is for breaking links.
C is for collision detection.
F is for fisheye.
H is for highlighting.
L is for labels.
P is for pinning down nodes.
S is for search.
T is for tooltip.
Not only does Simon show the code, he also shows the result of the code.
A model of how to post useful information on D3.
Graffeine by Julian Browne
From the webpage:
Caffeinated Graph Exploration for Neo4J
Graffeine is both a useful interactive demonstrator of graph capability and a simple visual administration interface for small graph databases.
Here it is with the, now canonical, Dr Who graph loaded up:
From the description:
Graffeine plugs into Neo4J and renders nodes and relationships as an interactive D3 SVG graph so you can add, edit, delete and connect nodes. It’s not quite as easy as a whiteboard and a pen, but it’s close, and all interactions are persisted in Neo4J.
You can either make a graph from scratch or browse an existing one using search and paging. You can even “fold” your graph to bring different aspects of it together on the same screen.
Nodes can be added, updated, and removed. New relationships can be made using drag and drop and existing relationships broken.
It’s by no means phpmyadmin for Neo4J, but one day it could be (maybe).
A great example of D3 making visual editing possible.
ease()-y as Math.PI: 1,200,000ms of Fun with D3’s Animated Transitions by Scott Murray.
From the webpage:
This is a presentation I gave at the Eyeo Festival in Minneapolis on June 11, 2014, adapted for the web. The talk was entirely live-coded in the JavaScript console, an experience I’ve tried to recreate here.
I recommend viewing this in Chrome, with the developer tools open. Click the next button to step through the presentation. Or, of course you can retype any of the code directly into the console yourself. Click any code block to execute it (but note that running them out of the intended order may produce unexpected results).
…
If you have any interest in D3 or in graphics you are going to enjoy this presentation!
Perhaps it will inspire you to try a live coding presentation. 😉
Or at least give you more confidence in using D3 for visualization.
PS: One moment of confusion as I was stepping through the presentation. I did not have the DOM inspector open, so I did not see the SVG element containing circles. The circles on my monitor resembled a solid line. My bad. The lesson here is to: Follow the Directions!
Powered by WordPress
