Data Visualization and D3.js Newsletter Issue 187

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


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

Onwards to this week's links...
 

Featured
 

  • Kung Fu Motion Visualization
    When working on this project, I was deeply inspired by the dynamics of motion and philosophy of Kung Fu. The work was commissioned by International Guoshu Association for an Kung Fu exhibition, initiated by Hing Chao. The exhibition focuses on the legacy of Hakka martial arts in Hong Kong and will launch in Hong Kong in September. The Kung Fu Masters whose motions has been captured are: Master Wong Yiu Kau (Variation 1-3) and Master Li Shek Lin (Variation 3,4)...
  • Distance-Limited Voronoi Interaction II
    The Voronoi technics (used to improve interactive experience) is something I like. But I'm quite confused when the mouse is far away from points/subjectsOfMatter. In the original example, this situation arises in the viz's top-left and bottom-right corners...This block attempts to overcome this issue by: a) still using the Voronoi partition to identify the closest point/subjectOfMmatter when they are close to each others and b) checking if the distance from the point to the mouse is close enough (max distance checking)...
 

Data Visualization Reading and Videos
 

  • Why choose? Scrollytelling & Steppers
    “Scrollytelling” is an online storytelling technique in which more and more content is revealed as the user scrolls down the page...“Steppers” are also a storytelling technique, especially for stories based on a data visualization, in which the user clicks from step to step to see the story develop...In short, like everything else in data viz, it’s not the one tool is better/worse. Rather it depends on finding the best technique for the situation and being cognizant of potential strengths/weaknesses. This awareness can help us decide when to use one technique or another...
  • The Voting Habits of Americans Like You
    The electorate is increasingly divided by race, education, gender and generation, and these fissures could grow even wider in the 2016 election. Below, new estimates of turnout and support for more than 8,000 different groups...
  • The Hamilton Algorithm - How We Analyzed And Visualized Hamilton’s Rhyming Lyrics For The WSJ
    For our latest project, which dissects the rhyme schemes of the hit musical Hamilton, our team of designers, developers and data journalists worked together to create a new data visualization type that could capture the lyrical complexity of rhyming verse. From idea to publication, the entire project took about two months. We’ve dug up early mocks, videos, and screencaps which were taken along the way. Here’s how the project unfolded...
  • Six Questions With… Sarah Slobin
    I've been doing a few interviews with various professionals from data visualisation and related fields. These people span the spectrum of industries, backgrounds, roles and perspectives. I gave each interviewee a selection of questions from which to choose six to respond. This latest interview is with Sarah Slobin, visual journalist & Things editor at Quartz...
  • What’s False About True Color
    I’ll start with a quiz: is this picture real—is it what an astronaut would see from space? How about this picture, seemingly from a similar vantage point, but including the far side of the Moon? Or this view of the Pacific Ocean? In a sense, they’re all real, even though they were collected in different ways...But what makes a realistic picture? After all, our eyes and brain are reconstructing a sharp, full-color, three-dimensional environment from a tiny amount of information....
 

D3.js Reading and Videos
 

  • Animating Paths And Arcs With D3.js
    I have created yet another sine wave animation (YASWA) and I want to blog about how I achieved a smooth animation for the svg path shapes and arcs with d3.js...
  • Data-Based Orientations For Gradients In A D3.js Chord Diagram
    In this blog, I’ll show you how to add a color gradient to the chords of a d3.js Chord Diagram. This comes in handy when there is no net difference in the chords. But you can apply the technique to any gradient that you want to orient based on data. We’re going to look at the collaborations between Avengers. With all those cameo’s happening in the MCU I wanted to know how often two Avengers had appeared in a movie together. This results in a symmetrical dataset since, if Thor appeared in a movie together with Hawkeye, the reverse is true as well...
  • 5 Tips For Learning To Code For Visualization
    There are many click-and-play software programs, solutions, and tools to help you visualize your data. They can be super helpful and you can get a lot done without a single line of code. However, being able to code your own visualization carries its own benefits like flexibility, speed, and complete customization...Here are some tips to get you started, based on my own experiences with R, and more recently, the JavaScript library d3.js...
  • Visualizing In VR Using A‑Frame And D3
    In this demo, titled "Where is Piers Morgan disliked the most?", one learns about various cities by exploring a terrain. The fake data is encoded using elevation at the city-level. Turning your head, which you can either do with a headset or by clicking and dragging your mouse, and looking at a mound of black sand provides some insight into that city...The scene is done in A-Frame, the contour plot was generated in conrec.js and is updated in plain JavaScript. Everything else is D3 and JavaScript...

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