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... -
https://goo.gl/yi4hXp

#d3js

Geographic - D3's approach to rendering geographic information
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. - https://goo.gl/EpeLX2

#d3js #geo

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 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... - https://goo.gl/aPwY5R

#d3js #zooming #panning

D3 zoom — the missing manual

After watching Nadieh’s talk at Beyond Tellerrand all about data visualisation I was excited to come across this article detailing how zoom and scaling work with SVG and Canvas. - https://goo.gl/RnG6kW

#d3js

Drawing Better Looking Curves

I’ve recently been learning about how to draw smoother curves that look more appealing…A common technique in professional CAD and font design software is to use a visualisation technique called a curvature comb to see how sharp or flat a curve is along its path…Here’s an example of a curvature comb being used in Fontlab VI to smooth out bumpy spots in a font…To explain how this works, let’s explore how Bézier curves work using SVG and D3… -
https://goo.gl/79AUTX

#d3js

I wrote some code that automatically checks visualizations for non-colorblind safe colors. Here’s how it works

Earlier this week we released a new feature at Datawrapper that checks colors used in charts or maps for problems with colorblind readers. If problematic colors are found, a warning sign is shown that leads to a colorblind simulation view that helps our users find better colors. This blog post explains how the code works. Perhaps this can open a discussion for future improvement. I also hope that other tools will follow Darawrapper on this path towards more automated accessibility testing. - https://goo.gl/a64m1r

#d3js

Bringing Together React, D3, and Their Ecosystem

D3.js is a de facto standard for building complex data visualizations on the Web and while bringing it together with React can be challenging, there are many ways to do it successfully. - https://goo.gl/m3xCB3

#d3js #react

Building Interactive Bar Charts with D3.js - http://bit.ly/2P4pcUF

#d3js

Building a Complex Financial Chart with D3 and d3fc - http://bit.ly/2C9d4ht

#d3js

billboard.js: A Simple Chart Library Based on D3 v4+ - http://bit.ly/2F17Ya3

#javascript #d3js #chart

How to Make a Beautiful Bar Chart With The Most Powerful Visualization…

Let’s make a visualization you won’t be ashamed to show. - http://amp.gs/XWvk

#d3js