d3.js

D3 to R to D3

I can’t tell you how many times I’ve tried to “learn” d3.js. I end up making it maybe a third of the way through a book before giving up and just looking through bl.ocks or Observable Notebooks because I want to make a plot now, not once I’ve read a text book. I’m writing this blog post because I am absolutely in LOVE with Amelia Wattenberger’s Fullstack Data Visualization with D3.

Introduction to Networks

table, caption, tbody, tfoot, thead, tr, th, td { padding: 3px; border: 0; outline: 0; font-size: 6px; background: transparent; color: black; margin-left: auto; margin-right: auto; width: 100%; } .node circle { stroke: black; stroke-width: 2px; color: black; } .node text { font-family: sans-serif; text-anchor: middle; pointer-events: none; user-select: none; -webkit-user-select: none; } .link { stroke-width: 4px; } text { font: 18px sans-serif; pointer-events: none; } #end-arrow { fill: #88A; } #scrolly { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; } #scrolly* { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } figure { position: -webkit-sticky; position: sticky; width: 100%; margin: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 0; } figure p { text-align: center; padding: 1rem; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 8rem; font-weight: 900; } .