How Selections Work 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. The structure of this article may at first seem arbitrary. D3 is a visualization library, so this article incorporates visual explanations to accompany the text. var array = [42]; Wherever possible, the code that generates the given selection appears immediately above the diagram. Let’s begin. #A Subclass of Array You were probably told that selections are arrays of DOM elements. #Grouping Elements Another reason selections aren’t literally arrays of elements is that they are arrays of arrays of elements: a selection is an array of groups, and each group is an array of elements. var selection = d3.select("body"); d3.selectAll("h2"); #Null Elements
Cubism.js Time Series Visualization foo7.6 bar−6.2 foo + bar1.4 foo - bar14 Cubism.js is a D3 plugin for visualizing time series. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Effective Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Area (120px)7.6 Area (30px)7.6 In contrast, horizon charts reduce vertical space without losing resolution. Horizon, 1-band (120px)7.6 Horizon, 2-band (60px)7.6 Horizon, 3-band (40px)7.6 Horizon, 4-band (30px)7.6 By combining position and color, horizon charts improve perception: position is highly effective at discriminating small changes, while color differentiates large changes. Flexible Cubism is data-source agnostic. Want to learn more?
Thinking with Joins 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 circle, and you want many circles: one for each data point. svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", 2.5); This code does exactly what you need: it creates a circle element for each data point, using the x and y data properties for positioning. Here’s the deal. Data points joined to existing elements produce the update (inner) selection. Now we can unravel the mysterious enter-append sequence through the data join: But why all the trouble? Likewise, to shrink-out:
Cytoscape.js This is how easy it is to get started with Cytoscape.js (this code creates the instance you see on the bottom-right: About Cytoscape.js is an open-source graph theory library written in JavaScript. Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Cytoscape.js also has graph analysis in mind: The library contains a slew of useful functions in graph theory. Cytoscape.js is an open-source project, and anyone is free to contribute. The library was developed at the Donnelly Centre at the University of Toronto. Cytoscape.js & Cytoscape Though Cytoscape.js shares its name with Cytoscape, Cytoscape.js is not Cytoscape. Cytoscape.js is a JavaScript library: It gives you a reusable graph widget that you can integrate with the rest of your webapp with your own JavaScript code. Funding Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. ISB | UCSD | MSKCC | Pasteur | Agilent | UCSF | Unilever | Toronto | NCIBI | NRNB Architecture & API Notation Position Data
Adding an SVG Element | DashingD3js.com Basic Example In the last example you added a p HTML element to the DOM. In this example, you will use D3.js to add an SVG element to a basic webpage. Start with a basic HTML webpage: 1<! Recall that an SVG circle can be created as such: 1<svg width="50" height="50">2 <circle cx="25" cy="25" r="25" fill="purple" />3</svg> Next open the Developer Tools (Webkit Inspector). 1d3.select("body").append("svg").attr("width", 50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple"); This will give you the following: Congratulations - you've added an SVG element to the DOM using D3.js! D3.js Legibility As you progress further into D3.js, the code that you write will go from a few lines to potentially a couple hundred lines. It is hard to follow what is happening all the way through. JavaScript, much like HTML, does not care about white spaces or new line breaks. More legible code for the same functionality. D3.js Style Operator D3.js Chain Syntax etc...
Speeding Up D3.js: A Checklist | Safari Blog A guest post by Peter Le Bek, founder of RethinkUI, an frontend development agency based in Glasgow, UK. He tweets at @_lebek and writes code at github.com/lebek. D3.js is a bit like the C of visualization frameworks. Programmers are often surprised to learn that D3.js doesn’t include high-level charting functions (e.g. plot(), bar(), or line()). In my last post I showed you how to build responsive visualizations with D3.js. Does your code generate many SVG elements? SVG performance varies across browsers and devices, but they all have their limits. Solution: Remove non-essential elements (e.g. group elements) Group elements (<g></g>) are useful when a set of elements need to share some properties. points = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; }); points.append("circle").attr("r", 5); points.append("text").text("label"); Alternative solution: Use a canvas element instead of SVG Conclusion
From Shapefile to GeoJSON - Jim Vallandingham A method for editing, merging, simplifying, and converting Shapefiles to GeoJSON D3.js supports cartographic visualizations by being able to display lines, polygons, and other geometry objects . It uses GeoJSON as the storage format for this type of visualization. Likewise, map tiling libraries like Leaflet can use GeoJSON to create map layers . You can find some GeoJSON files around, like in D3’s choropleth example , but sooner or later you will want to visualize a more specific portion of the world. Specifically, I am interested in visualizing census data for my hometown: Kansas City. Below is how I created a small GeoJSON file of just the KC metro from census shapefiles. WARNING: I am not an expert in GIS or cartography in general. Tools I’m using a mix of different applications to perform this conversion: Quantum GIS is used to deal with shapefiles. brew install gdal Initially I did run into an issue with homebrew when it was installing the geos prerequisite. Getting the Data And presto!
D3.js D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers. It is a tool for data visualization in W3C-compliant computing, making use of the widely implemented Scalable Vector Graphics (SVG), JavaScript, HTML5, and Cascading Style Sheets (CSS3) standards. It is the successor to the earlier Protovis framework.[2] In contrast to many other libraries, D3 allows great control over the final visual result.[3] Its development was noted in 2011,[4] as version 2.0.0 was released in August 2011.[5] Context[edit] The first web browsers appeared in the early 1990s. At the same time, researchers, engineers, and practitioners from various branches of engineering and science looked for tools that would enable web browsers to visually present data within web pages. In 2011, the development of Protovis was stopped to focus on a new project, D3.js. Selections[edit]