はてなブックマーク

The power of the unaided mind is highly overrated… The real powers come from devising external aids that enhance cognitive abilities. —Donald Norman Algorithms are a fascinating use case for visualization. To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This may be why algorithm visualizations are

As its name implies, TopoJSON is a topological geospatial data format. In contrast to a geometry, where each shape is encoded with separate (and often redundant) arrays of coordinates, a topology encodes sequences of coordinates in line fragments called arcs that can be shared. For example, the border between California and Nevada is an arc that is shared by both polygons. The various arcs of the

I am a big fan of examples. Not a surprise, right? If you follow me on Twitter, or my projects over the last few years (or asked D3 questions on Stack Overflow), you’ve likely seen some of my example visualizations, maps and explanations. I use examples so often that I created bl.ocks.org to make it easier for me to share them. It lets you quickly post code and share examples with a short URL. You

I’d like to propose a convention for encapsulating reusable charts in D3. Wait for it… function chart() { // generate chart here } A function; the standard unit of code reuse! #Configuration I jest; not any function will do. In truth we need a configurable function, since most charts require customization of their appearance or behavior. For example, you may need to specify the width and height, o

This is a quick demonstration of using D3 to render GeoJSON shapes in conjunction with Leaflet. The implementation is straightforward, but Leaflet is regretfully missing documentation and examples for custom overlays, [EDIT: the documentation has since been updated and there is now a helpful section titled “Implementing Custom Layers”] so hopefully this will help you get started. #Initializing the

Or, why random comparators are bad (in addition to being slow). Choose an algorithm: Or write your own: refresh auto-refresh Comments? Discuss on HN!

It can be difficult to observe micro and macro features simultaneously with complex graphs. If you zoom in for detail, the graph is too big to view in its entirety. If you zoom out to see the overall structure, small details are lost. Focus + context techniques allow interactive exploration of an area of interest (the focus) in greater detail, while preserving the surrounding environment (the cont

Loading… Many methods of graph drawing, such as force layouts, do not assign intrinsically-meaningful positions to nodes: the position is only approximate, in the hope that related nodes appear nearby. While intuitive, these methods arguably make poor use of the most effective visual channel (that is, position), and in the worst case produce an indecipherable hairball. Enter Krzywinski’s hive plot

Preface Selections Data Scales & Axes Shapes Layouts Outline Preface Visualizing Data with Web Standards D3 provides transformation; no new representation. Data ↦ Elements Visualization requires visual encoding: mapping data to elements. Data-Driven Documents The name “D3” refers to the W3C Document Object Model. Web Standards There are myriad free resources for learning standards. HTML Resources

Say you’re making a basic scatterplot using D3, and you need to create some SVG circle elements to visualize your data. You may be surprised to discover that D3 has no primitive for creating multiple DOM elements. Wait, WAT? Sure, there’s the append method, which you can use to create a single element. svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 2.5); But that’s just a single

When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3’s built-in path interpolators, however, you may see some surprising behavior: Why the distracting wiggle? There are multiple valid interpretations when interpolating two paths. Here’s th

Say you had a fresh pack of cards: If you want to play a game of Texas Hold ‘em with friends, you should shuffle the deck first to randomize the order and insure a fair game. But how? A simple but effective way of doing this is to pull a random card from the deck repeatedly and set it aside, incrementally building a new stack. As long as you pick each remaining card from the deck with equal probab

Source: The Stanford GraphBase. A network can be represented by an adjacency matrix, where each cell ij represents an edge from vertex i to vertex j. Here, vertices represent characters in a book, while edges represent co-occurrence in a chapter. Given this two-dimensional representation of a graph, a natural visualization is to show the matrix! However, the effectiveness of a matrix diagram is he

Please find my recent work on Observable. Past Work April 28, 2017A Better Way to Code December 9, 2016Command-Line Cartography March 9, 2016What Makes Software Good? December 28, 2015Introducing d3-scale December 3, 2015Introducing d3-shape November 23, 2015Let’s Make a (D3) Plugin December 27, 2014Mapping Every Path to the N.F.L. Playoffs December 20, 2014How Each Team Can Make the N.F.L. Playof