Data Visualization and D3.js Newsletter Issue 225

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


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


ONGOING NEWS: Continuing experiment of sending this email out once per month (1st Tuesday of each month) rather than weekly. Next email will be in September.
 


Onwards to this month's links...
 

Featured
 

  • What's So Hard About Histograms?
    Histograms are a way to summarize a numeric variable. They use counts to aggregate similar values together and show you the overall distribution. However, they can be sensitive to parameter choices! We're going to take you step by step through the considerations with lots of data visualizations...
  • Presenting the d3.loom chart - A new plugin to create butterfly, fan-like, axe shaped charts
    I’d like to “formally” introduce and explain a new (and my first) d3 plugin to create a chart that I’ve started calling “the loom”...The loom layout is meant to create a chart with a group of entities in the center and different group of entities on the outside. They are connected by strings where the thickness of the string on the outside represents the connection (i.e. value) of the inner and outer entity...
 

Data Visualization Reading and Videos
 

  • 10 Significant Visualisation Developments: January To June 2017
    To mark each mid-year and end-of-year milestone I take a reflective glance over the previous 6-month period in the data visualisation field and compile a collection of some of the most significant developments. These are the main projects, events, new sites, trends, personalities and general observations that have struck me as being important to help further the development of this field or are things I simply liked a great deal...
  • NAPA Cards - Narrative Patterns for Data-Driven Storytelling
    This collection of cards came out of a workshop on Data-Driven Storytelling in Dagstuhl, 2016. We investigated how data-driven stories work, how they are different from other types of narratives and also other types of data visualization...Each card represents a specific narrative technique, pattern or "trick" you can apply to effect flow, empathy, argumentation… in a data story. We tried to find a representative example for each technique, but of course, there will be many different instantiations of the same underlying principle. These patterns are also not mutually exclusive — rather, they can often be combined to great effect...
  • How I built a wind map with WebGL
    I have an unflattering confession to make: for the last few years working at Mapbox, I avoided direct OpenGL/WebGL programming like a plague. For one reason: the OpenGL API and terminology deeply terrified me...This year, I decided to finally confront my fears and build something non-trivial with WebGL on my own. 2D wind simulation looked like a perfect opportunity — it’s useful, visually stunning, and challenging, yet it still felt attainable in scope. I was surprised to discover that it was much less scary than it looked!...
  • Evaluating Interactive Graphical Encodings for Data Visualization
    User interfaces for data visualization often consist of two main components: control panels for user interaction and visual representation. A recent trend in visualization is directly embedding user interaction into the visual representations. For example, instead of using control panels to adjust visualization parameters, users can directly adjust basic graphical encodings (e.g., changing distances between points in a scatterplot) to perform similar parameterizations. However, enabling embedded interactions for data visualization requires a strong understanding of how user interactions influence the ability to accurately control and perceive graphical encodings. In this paper, we study the effectiveness of these graphical encodings when serving as the method for interaction. Our user study includes 12 interactive graphical encodings. We discuss the results in terms of task performance and interaction effectiveness metrics...
 

D3.js Reading and Videos
 

  • Setting Up D3.js with Babel and Webpack
    This is a post I decided to write when I found myself looking for a basic setup in order to start learning D3.js. Yeah, I know, you don’t have to configure a npm package just to start playing with D3...when we want to create a well structured project where we have to use D3 and handle external data source, for instance, it is good to start with something we can easily scale...In fact, what truly pushed me to going for this setup was that I find it really tedious to have to open the browser and manually reload the page every time I want to see how things changed. Now, if you think about working with D3 where you are basically dealing with visual stuff as an output, can you understand how good it is to have live reloading available?...
  • D3-Annotation 2.0
    The goal of this upgrade is to make the library easier to use. The main change is custom styling is built in, no longer needing a css file, and you can set a color property to change the color of the entire annotation for easy styling...
  • Geographic - D3's approach to rendering geographic information (new chapter of D3 in Depth book)
    This chapter looks at D3’s approach to rendering geographic information...D3’s approach differs to so called raster methods such as Leaflet and Google Maps. These pre-render map features as image tiles and these are served up and pieced together in the browser to form a map. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser...The 3 concepts that are key to understanding map creation using D3 are: GeoJSON, projections, and geographic path generators...Let’s look at these one by one....
  • Panning and Zooming with D3v4
    All that’s necessary for panning and zooming is a translation [tx, ty] and a scale factor k. When a zoom transform is applied to an element at position [x0, y0], its new position becomes [tx + k × x0, ty + k × y0]. That’s it. Everything else is just sugar and spice on top of this simple transform...The major difference between zooming in D3v3 and and D3v4 is that the behavior (dealing with events) and the transforms (positioning elements) are more separated. In v3, they used to be part of the behavior whereas in v4, they’re part of the element on which the behavior is called...To illustrate, let’s plot 4 points. The rest of this post will only deal with data in one dimension...

Hope that you had a great past month and that next month 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