Data Visualization and D3.js Newsletter Issue 214

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


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

Onwards to this week's links...
 

Featured
 

  • D3 and Canvas - The bind, the draw and the interactivity
    When building visualisations with D3 and SVG you/the browser might hit a ceiling after a couple of thousand elements...However, approaching canvas from the safe D3/SVG haven might be daunting as working with it is slightly different - especially drawing and adding interactivity. But, fear not, it’s actually simple and having built visuals with D3/SVG, approaching D3 with a different renderer will help your conceptual understanding of D3 and the related web technologies significantly...
 

Data Visualization Reading and Videos
 

  • A Nerd’s Guide to Color on the Web
    There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let's delve into some of the technical details of color on the web...
  • Directional Cartography: Maps and Relative Direction
    It’s pretty common to describe direction in relation to location on a map. Go up that way, down here, or over there. Up, down, and over are relative directions given from a point of reference, often physical topographic change. Up river, down the hill, and over to the lake. Sometimes though, place names become engrained in our cultural lexicon simply because of their location on the map. When is up ‘actually’ up? And when is up constructed by decision of the cartographer? How do decisions by cartographers shape our mental image of place?...
  • Charting All the Beer Styles
    A common mistake about beer is that there are basically two types: the super-drinkable variety and the super-hoppy and bitter variety...The Beer Judge Certification Program lists 100 styles with defined ranges of alcohol by volume (ABV), bitterness (measured in IBUs, or International Bittering Units), and color (measured using SRM, or Standard Reference Method)...Below is a series of charts for all 100 styles. Mouseover any style for more details and commercial examples...
  • Best Of The Visualisation Web… November 2016
    At the end of each month I [Andy Kirk] pull together a collection of links to some of the most relevant, interesting or thought-provoking web content I’ve come across during the previous month. Here’s the latest collection from November 2016...
 

D3.js Reading and Videos
 

  • Just-Noticeable Differences
    d3-jnd is a D3 extension that supports just-noticeable difference calculations for color...The just-noticeable difference functions in this library can be used to determine whether two colors are too similar to be easily differentiated. This is often critical for visualization color design because information legibility directly affects usability...The conservativeness of JND distance predictions can be manipulated by changing optional arguments that roughly correspond to what percentage of people can easily see a difference and how large the colored area is in terms of visual angle...
  • D3js raster tools docs
    This small documentation explains how to work with raster data and the d3js to create dynamic data visualizations...This tutorial will show how to use: a) geotiff: Reading the GeoTIFF data (not the projection, which would be cool), b) raster-streamlines: Drawing streamlines from vectorial fields, c) raster-marching-squares: Creating the isobands with the wind speed , d) reproject: Reprojecting the generated GeoJSON, and e) proj4js: Reprojecting points...Examples for all the common raster visualizations covered by the Basemap library. All the examples have the Canvas and the SVG version so it’s easy to use the most convenient...
  • Interactive Parquet Deformation
    This block is...inspired by parquet deformation, which consists on progressively transform a shape into another one. The progressive shape transformation is provided by d3-interpolate...You can modify the starting shape and the ending shape, by choosing among predefined curves, drag & dropping control points, or clicking an edge to change its control points in a symmetric way...I came to parquet deformation because the Voronoï layout makes a tessellation of the 2D plane, as the parquet does. Parquet deformation is also closely linked to Escher's researches and amazing drawings...
  • Flocking V
    This example is an implementation of a simple flocking algorithm that uses the dynamics of repulsion, attraction, and orientation zones. This example is based off of the algorithm described by Couzin...The basic principle is that each agent has three regions in a growing radius around it: a zone of repulsion, a zone of orientation, and a zone of attraction respectively. By editing the sizes of these zones you can expect to experience different behavior...This example allows you to see the behavior when two types of agents are used, allowing you to specify parameters for each group...[Editor's note: One of __SEVEN__ great examples]...

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