Data Visualization and D3.js Newsletter Issue 143 Weekly Data Visualization and D3.js Newsletter

Hi Friends -

Welcome to issue 143 of the Weekly Newsletter.

Onwards to this week's links...


  • D3 "Hand Drawn" Circles
    I started from this nice approximation of a perfect circle based on cubic Bézier segments, where they show that a good approximation to a quarter circle of unit radius is a cubic Bézier curve with control points P0 = (0, 1), P1 = (c, 1), P2 = (1, c), P3 = (1, 0) where c = 0.551915024494. For example we can use this SVG, with the control points shown in red...

Data Visualization Reading and Videos

  • Understanding The t-Distribution And Its Normal Approximation An Interactive Visualization
    Most students are told that the t-distribution approaches the normal distribution as the sample size increase, and that the difference is negligible even for moderately large sample sizes (> 30). However, for small samples the difference is important...This interactive visualization lets you explore how the t-distribution approaches the normal distribution as the degrees of freedom increase. It also shows the absolute and relative error when the normal approximation is used...
  • Real Chart Rules To Follow
    There are a lot of "rules" for visualization. Some are actual rules, and some are suggestions to help you make choices. Many of the former can be broken, if that's what the data dictates and you know what you're doing...But, there are rules — usually for specific chart types meant to be read in a specific way — that you shouldn't break. When they are, everyone loses. This is that small handful...
  • Why You Don’t Make A Mindlessly Beautiful Visualization Of A Horrific Event
    70 years ago, the United States dropped the first nuclear bomb on Hiroshima, killing anywhere from 90,000 to 166,000 people in the process. Graphic artist Mathew Lucas created a series of visualizations to, as he explained to PopSci, "highlight" the events...When data researcher Kate Crawford brought up the visualization on Twitter, she sparked a critical conversation between some of the most respected names in the field today...
  • A Tediously Accurate Map Of The Solar System
    I was talking about the planets with my 5-year-old daughter the other day. I was trying to explain how taking a summer vacation to Mars in the future will be a much bigger undertaking than a trip to Palm Springs...So I thought I would see if a computer screen could help make a map of a solar system that’s a bit more accurate (while teaching myself a few things about javascript, SVGs and viewports along the way)...Not that pixels are any better at representing scale than golfballs, but they’re our main way of interpreting most information these days, so why not the solar system?...

D3.js Reading and Videos

  • Glasseye: Bringing Together Markdown, D3, And The Tufte Layout
    Glasseye is a package I’m developing to present the results of statistical analysis in an attractive and hopefully interesting way. It brings together three great things that I use a lot: 1) The markdown markup language, 2) The Tufte wide margin layout, and 3) Visualisation using d3.js...
  • An Adventure In SVG Filter Land
    I’ve been working on an open-source charting library called d3fc...An example of building a chart that contains...a) Candlestick series b) Indicator lines, c) Gridlines, d) An upward trending dataset, e) Vertical annotation lines, f) Free-floating labels with arrows, g) Fixed label annotation (green 965.33), and Also missing from the static screenshot are the parallax (elements moving over each other as the camera moves) and depth of field (blurring of elements outside of the camera’s focus) effects. Now this isn’t exactly the kind of a chart d3fc was designed for but we do claim that it’s flexible, let’s see how far we can get.
  • D3: A Flowing Area Chart With Thresholds
    A flowing area chart using D3.js. It has two thresholds and is updated with random data every 500ms to simulate live streaming data. It adapts its width and height to the element it is applied to, but it isn't responsive (yet)...
  • Traffic Simulation Part 2: Custom SVG [Video]
    Part 2 of a series on how to build a traffic simulator with d3.js and AngularJS. This part focuses on loading custom SVG and animating the traffic along a more complicated road...
  • Apollonius’ Problem II
    Apollonius’ problem is to compute the circle that is tangent to three given circles. There are up to eight such circles...Drag the circles to see the tangent circles change...

Hope that you had a great past week and that next week is even better!

Wishing you the best, 
Sebastian Gutierrez

Want to better understand this topic?
Check out these super-useful D3.js Screencast Videos (1 in 3 are free...)
=> D3 Screencasts Videos