サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
bost.ocks.org
D3’s selections can be hierarchical, much like the elements and data they join. Consider a table: <table> <thead> <tr><td> A</td><td> B</td><td> C</td><td> D</td></tr> </thead> <tbody> <tr><td> 0</td><td> 1</td><td> 2</td><td> 3</td></tr> <tr><td> 4</td><td> 5</td><td> 6</td><td> 7</td></tr> <tr><td> 8</td><td> 9</td><td> 10</td><td> 11</td></tr> <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td
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
My previous Let’s Make a Map tutorial describes how to make a basic map with D3 and TopoJSON; now it’s time to cover thematic mapping in the form of a proportional symbol map. The simplest symbol is a circle, or bubble, whose area is proportional to the associated data. In this tutorial, we’ll make a bubble map of population by U.S. county. Source: American Community Survey, 2012 5-Year Estimate T
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
Any sufficiently advanced technology is indistinguishable from magic. –Arthur C. Clarke In the past I have presented simplified descriptions of D3’s selections, providing only enough detail to get started. This article takes a more comprehensive approach; rather than saying how to use selections, I will explain how selections are implemented. This may take longer to read, but it should dispel any
I love Make. You may think of Make as merely a tool for building large binaries or libraries (and it is, almost to a fault), but it’s much more than that. Makefiles are machine-readable documentation that make your workflow reproducible. To illustrate with a recent example: yesterday Kevin and I needed to update a six-month old graphic on drought to accompany a new article on thin snowpack in the
Note: This article was written in 2012 and uses old versions of D3 and TopoJSON. I recommend you read my newer tutorial, Command-Line Cartography, instead! In this tutorial, I’ll cover how to make a modest map from scratch using D3 and TopoJSON. I’ll show you a few places where you can find free geographic data online, and how to convert it into a format that is both efficient and convenient for d
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
このページを最初にブックマークしてみませんか?
『bost.ocks.org』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く