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.
A visualization combining maps with a Voronoi diagram. Tornado sightings in 2013 from NOAA.
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
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
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.