Approximate reproduction of the Highcharts Basic line demo using D3.js. The original code is available in jsfiddle.) This gist is part of a presentation.
Stephen A Thomas sathomas
A standard line chart with the addition of a gradient to show the range of values at each point. (In this case the range is ± 2 standard deviations.) Because the center point of the gradient varies with position on the x-axis, a single SVG area is not sufficient. Instead, the code creates a separate area (referred to as a slice) for each data point.
Zoomable radial chart with color scales and nesting. Based on Zoomable Sunburst.
An experiment in visualizing differential equations based on the traditional phase line. The chart shows the qualitative behavior of a specific differential equation in a single variable. Initially, the equation is ẋ = 1 - x². The chart represents the value of ẋ across a range of values (initially from -2 to -2) as vertical lines of fixed length. The color and tilt of the lines vary based on ẋ. Positive values of ẋ tilt to the right and are colored green. Negative values of ẋ tilt to the left and are colored blue. The magnitude of ẋ determines the degree of tilt, with larger values shown with greater tilt. Lines corresponding to equilibrium points, where ẋ = 0, are colored red.
The chart exposes a physical interpretation of the equation, with x(t) representing the position of a particle in ℜ. The tilt of the line at any point indicates the direction that the particle will move from that point. The angle of the tilt represents h
Continuing an experiment in visualizing differential equations based on the traditional phase line. (See also: Part I.)
The chart shows a set of solutions to a specific differential equation in a single variable. Initially, the equation is ẋ = 1 - x². The horizontal axis represents increasing time, and the vertical axis represents values of the variable x. Each line on the chart shows the evolution of x for a specific initial value x(0). Equilibrium points, where x(t) is constant for all time, are colored red. The controls permit adjustment of the range of initial values shown, as well as the number of lines and the time increment for the horizontal axis.
Feel free to experiment with different equations and parameters. The function for ẋ should be a valid JavaScript expression. There’s no error checking, though, so be careful.
This series of visualizations continues with [p
Mathematical models of disease often help us understand the epidemiology of disease—how a disease epidemic spreads within a population and how measures such as vaccination can control that spread. This post, however, considers the virology and immunology of HIV rather than its epidemiology. The discussion that follows focuses on the actions of HIV within a single human host.
In part 1 we looked at a basic mathematical model for HIV within a human host. This visualization continues that discussion by looking at one factor that limits the initial proliferation of the virus.
Many smart folks have been writing about data visualization lately, and there are lots of great resources available on the internet and in your favorite book store. There is one aspect of data visualization, however, that doesn’t seem to get much love—testing. That’s a shame, because effective testing, especially when it’s part of the initial planning for a visualization, is one of the best ways of ensuring high quality results.
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 the previous example didn't look very impressive, that's probably because it wasn't. Why bother to use a force layout just to place two circles a specific distance apart? Here's the payoff, though. With nearly the exact same code we can see what a more complex graph looks like.
There are plenty of ways to improve this graph (most of which we'll cover in
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 charge can influence the distance between connected nodes and
prevent the layout from achieving the desired linkDistance. That's not
the main purpose of the charge force, however. It exists mostly to
OlderNewer