Data Visualization with JavaScript, including the full content of the book published by No Starch Press, blog posts, examples, and presentations.
Can seemingly trivial differences at a small scale have noticeable effects at larger scales? Certainly, as we’ve learned from chaos theory. This visualization considers another perspective on the same question. It shows the results of three variations of a random walk. The difference between the variations might seem insignificant, yet the resulting large-scale behavior is not at all the same.…
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…
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…
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 we include it as part of the initial planning for the project, can make a big…
So far we’ve had a chance to see many of the tools and libraries for creating individual JavaScript visualizations, but we’ve only considered them in the context of a traditional web page. Today, of course, the web is much more than traditional web pages. Especially on desktop computers, web sites are effectively full featured software applications. (Even on mobile devices many “apps” are really…
So far in the book we’ve looked at a lot of visualization tools and techniques, but we haven’t spent much time considering the data part of data visualization. The emphasis on visualization is appropriate in many cases. Especially if the data is static, we can take all the time we need to clean and groom it before it’s even represented in JavaScript. But what if the data is dynamic, and we have no…
In this book we’ve looked at many different JavaScript libraries that were designed for specific types of visualizations. If you need a certain type visualization for your web page and there’s a library that can create it, using that library is often the quickest and easiest way to create your visualization. There are drawbacks to such libraries, however. They all make assumptions about how the…
Humans crave context when evaluating data, so it’s important to provide that context when it’s available. In the previous chapter, we saw how timelines can provide one frame of reference; now we’ll examine another equally important context: place. If a data set includes geographic coordinates or has values that correspond to different geographic regions, you can provide geographic context using a…
The most compelling visualizations often succeed because they tell a story; they extract a narrative from data and reveal that narrative to their users. And as with any narrative, time is a critical component. If the data consists solely of numbers, a standard bar or line chart can easily show its evolution over time. If the data is not numerical, however, standard charts probably won’t work. This…
The first three chapters looked at different ways to create many common types of charts with JavaScript. But if your data has unique properties, or if you want to show it in an unusual way, a more specialized chart might be more appropriate than a typical bar, line or scatter plot. Fortunately, there are many JavaScript techniques and plugins to expand our visualization vocabulary beyond the…
You might expect a data visualization for the web to be featured very prominently on the page, or even make up the entire web page. That’s not always the right approach, though. The best visualizations are effective because they help the user understand the data, not because they “look pretty” on the page. Some data may be straightforward enough to present without context, but meaningful data…
In chapter 1 we saw how to create a wide variety of simple, static charts. In many cases such charts are the ideal visualization, but they don’t take advantage of an important characteristic of the web—interactivity. Sometimes you want to do more than just present data to your users; you want to give them a chance to explore the data, to focus on the elements they find particularly interesting, or…
Many people think of data visualization as intricate interactive graphics of dazzling complexity. Creating effective visualizations, however, doesn’t require Picasso’s artistic skill or Turing’s programming expertise. In fact, when you consider the ultimate purpose of data visualization—helping users understand data—simplicity is one of the most important features of an effective visualization.…
It’s getting hard to ignore the importance of data in our lives. Data is critical to the largest social organizations in human history. It can affect even the least consequential of our everyday decisions. And its collection has widespread geopolitical implications. Yet it also seems to be getting easier to ignore the data itself. One estimate suggests that 99.5% of the data our systems collect…