This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.
Earlier examples looked at the operation of force layout from a (very) high level. This example begins examining the important properties of the force layout in more detail.
| // ### Ready | |
| // | |
| // This module provides a convenient way to register | |
| // a callback when the document is ready. The callback | |
| // is called immediately if the document is ready | |
| // when the module's API is called. | |
| // | |
| // > This really shouldn't be necessary as a library | |
| // module, but IE10 and below have a nasty bug in how | |
| // they report `document.readyState`. The workaround |
As a change of pace from complex visualizations, here's simple Material Design gauge control implemented in pure CSS/HTML. The implementation includes an optional JavaScript component to change the gauge value dynamically. If you'd like to use the gauge on your web pages (it's open source), you can download it from GitHub, where you'll also find documentation on how to use it. In this post we'll walk through the implementation to understand how it works.
Thanks to the excellent bayes.js library from Rasmus Bååth it's now possible to experiment with Bayesian statistics in JavaScript. We'll take advantage of that library in this series of posts, which demonstrate Bayesian statistics visually for anyone with a web browser.
This first post covers Markov Chain Monte Carlo (MCMC), algorithms which are fundamental to modern Bayesian analysis. MCMC is also critical to many machine learning applications. Since this is the first post, though, we'll start with a brief introduction to Bayesian statistics.
The experiment in visualizing differential equations graduates to second order systems with this example. The graph is based on a phase plane diagram for an autonomous system in x and y. Each line is a solution to the system, and the animation illustrates how each solution evolves in time.
Note: The speed of the animation does not represent the speed as which each solution evolves. Faithfully reproducing the solution velocities would require a more computationally intensive animation technique that would make the visualization impractical in typical web browsers.
The default system has a stable equilibrium point at (0,0), so points near the origin spiral in towards (0,0). All solutions except the one that starts at (0,0) take an infinite amount of time to get there, however. The system also has an equilibrium on the unit circle (a circle of radius 1). That equilibrium is unstable, though. Solutions that start outside the unit circle spiral off to infin
This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.
The code in the previous examples has mentioned a property that D3 calls gravity. The force layout uses this property to keep nodes from wandering off the edges of the visualization, something they might otherwise do to avoid overlap.
A visualization combining maps with a Voronoi diagram. Tornado sightings in 2013 from NOAA.
This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.
The previous example
shows how linkDistance tells the force layout the desired distance
between connected nodes. It may seem strange that D3 doesn't simply
compel all links to be that distance. The force layout, however, takes
This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.
The final parameter this series considers is friction. This parameter, which
ranges from 0 to 1, tells D3.js how much (if at all) to slow down the layout
at each iteration. With a value of 1, the layout never slows down, while a
value of 0 forces all the nodes to immediately stop.
This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.
Before digging into the properties and options of the force layout, it's helpful to understand how the layout works more generally. And although there's some serious mathematics going on under the hood, the principle is pretty simple: The layout moves the graph nodes around a little bit