Data Visualization and D3.js Newsletter Issue 176

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


Welcome to issue 176 of the DashingD3js.com Weekly Newsletter.
 

Onwards to this week's links...
 

Featured
 

  • Beyond The Sea
    In the northern reaches of Newfoundland, near the town of St. Anthony, is the Fox Point Lighthouse...If you face perpendicular to the right bit of rocky coastline there and gaze straight across the ocean, your mind’s eye peering well beyond the horizon, you can see all the way to Australia...What’s really across the ocean from you when you look straight out? It’s not always the place you think.
  • d3-xray: Visual Data Debugging For D3.js
    D3.js is a visual data tool, so it should allow you to browse data visually. To that end, d3-xray is a small bookmarklet which logs the results of the data joins as you mouse over the graphical elements, allowing you to debug interactively, so you don’t have to add extra console.log() calls all over the project code just to inspect the data bound to a specific element...
 

Data Visualization Reading and Videos
 

  • The Correct Way To Use Pie Charts
    The reason so many people dislike pie charts is because they’re so frequently misused by amateur practitioners. Furthermore, I believe that pie charts still play an important role in data visualization, and I’m going to make my case in favor of pie charts below. Along the way, I will explain the correct way to use pie charts...
  • The Hidden Histories of Maps Made By Women: Early North America
    In the 1970s, early in her career as map librarian at the New York Public Library, Alice Hudson started researching women mapmakers throughout history. With few other women in her chosen field, she wondered how many had come before her. “I thought I might find 10,” she tells CityLab...But over the years, as she combed through maps, censuses, newspapers, and tips from colleagues, she was amazed by how many women there were in the early days of mapmaking...
  • How To Make Cartograms With Animation
    The last few years have seen an explosion of digital mapping on the web, but for some reason the cartogram has been largely left out. And it’s too bad because in many cases they are a far superior way of representing information than maps that do so using color alone...A cartogram is a map in which some variable (population, GDP, etc) is substituted for land area...For comparison, a more common way of representing this type of information on a map is to do so using color. This type of map is known as a choropleth...
  • Colour Wheels, Charts, And Tables Through History
    Featured below is a chronology of various attempts through the last four centuries to visually organize and make sense of colour. A wide variety of forms and methods are represented: from simple wheels to multi-layered pyramids, from scientific systems to those based on the hues of human emotion...
  • Discrete Fourier Transform Demo
    This page demonstrates the discrete Fourier transform, which rewrites a discrete signal as a weighted sum of sines and cosines of various frequencies. All even functions (when f(x) = f(−x)) only consist of cosines since cosine is an odd function, and all odd functions (when f(x) = −f(−x)) only consist of sines since sine is an odd function, other functions are a mix of sines and cosines...
 

D3.js Reading and Videos
 

  • swoopyDrag.js - Artisanal Label Placement For D3 Graphics
    swoopyDrag helps you hand place annotations on d3 graphics. It takes an array of objects representing annotations and turns them into lines and labels. Drag the text and control circles below to update the annotations array...
  • Path Tweens
    The really clever part of this is the pathTween function which is one of my favorite Mike Bostock specials and deserves a detailed explanation. Which I will get to, but firstly, we need to understand why this function is even necessary. Couldn’t you just transition the circle path directly to the batman logo without this function? It seems reasonable, both objects are just paths!...Lets see what happens...
  • D3 Modules Dependency Time Graphs
    As of today, this script create dependency graphs of D3 modules, for d3 version 4+...Focusing on a certain release of a d3 module, you can visualize its dependencies tree and the modules that depends on the focused release...
  • d3.oakland(): Erik Hazzard 01/20/15
    As data visualizers, we’re often called “story tellers”. This talk explores techniques for designing visualizations- for telling stories - from the most important perspective: the audience’s...Like a magician, use misdirection to create better experiences. Is chart junk always bad? Discover what SVG filters are, why they can be useful, and how to incorporate them. Lastly, look at other art forms, such as games, to learn how to craft better experiences...
  • line-intersection
    The Bentley–Ottmann algorithm finds all the intersections that occur in a set of line segments...Instead of calculating the intersection of every pair of segments, which would require O(n²) comparisons for a set of n lines, the algorithm uses a sweep line. Starting at the top of the screen and moving down, it keeps track of the order of the lines' x positions at the current y position (represented by the figure on the right). As lines start, end or intersect, new pairs of lines become adjacent in the x ordering and are checked for intersections...

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

Wishing you the best, 
Sebastian Gutierrez
@DashingD3js
www.dashingd3js.com

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