[...]... In the language of D3 this means we need to construct a function that maps from the data domain (input) onto a range (output) of pixels This is exactly what the scale objects do First, we find the maximum and minimum values of the data, using d3. extent: var x_extent = d3. extent(data, function(d){return d.collision _with_ injury}); The function d3. extent is a convenience function that D3 provides that returns... gives us the graph shown in Figure 3-3 Bus Breakdown, Accident, and Injury | 21 Figure 3-2 Bus collisions with injury versus bus distance between failure with x-axis Figure 3-3 Bus collisions with injury versus bus distance between failure with both axes We have two glaring aesthetic issues to deal with The first is that we’re chopping off the lefthand side of the y-axis tick labels as they’re sticking... 3-4 Bus collisions with injury versus bus distance between failure with style Adding Axis Titles We need to add axis titles to the axes so that readers can understand the values we’re plotting This isn’t taken care of directly by D3, as we can simply place some SVG text elements to do the job The x-axis is pretty straightforward: d3. select(".x.axis") append("text") text("collisions with injury (per million... elements to enter the visualization Practically, this creates the empty selection, which is an array with no elements, but that has been blessed with a data method, allowing it to accept data The data method joins the empty selection with each element of the data set This results in a selection that is an array with as many elements as we have data points (subway lines) We’re still not quite there: this array’s... 2-1 Figure 2-1 Status list Adding Data-Dependent Style Our list, while functional, is a little boring We can spruce it up a little without much effort, and make it easier to grok Let’s set the font weight of the lines with “GOOD SERVICE” to normal, and those without to bold: d3. selectAll("li") style("font-weight", function (d) { if (d.status == "GOOD SERVICE"){ return "normal"; } else { return "bold";... modern browsers (with the introduction of IE9 in 2011) can 1 render Scalable Vector Graphics (SVG), including mobile devices that are unable to render Flash Together, the combination of JavaScript and SVG allows us to create sophisticated charts that are accessible by a majority of Internet users And, thanks to D3, bringing these technologies together is a straightforward task D3 D3 is a JavaScript... and the web page, D3 is focused on providing helper functions to deal with mundane tasks, such as creating axes and axis ticks, or advanced tasks such as laying out graph visualizations or chord diagrams This means that, once over D3 s initial learning curve, the designer is opened up to a very rich world of modern, interactive and animated data visualization The Basic Setup The D3 library can be downloaded... // badass visualization code goes here } d3. json("data/some_data.json", draw); The D3 library is always included to give our visualizations access to the D3 methods The rest of the book will focus on this function, which we will always call draw This is a function with one argument; it is called once the data has been downloaded to the client... function(data){d=data}) to assign the data to a global variable called d Then try, for example: d3. select("body") selectAll("p") data(d) and have a look at the output You can build up the enter selection command by command, interrogating the selection object as you go Finally, we need to tell D3 what to do with each element of the entering selection we’ve just created For this visualization, we append... natural units into pixels A huge benefit of how D3 exposes the designer directly to the web page is that the existing technology in the browser can be leveraged without having to create a whole new plotting language This appears both when selecting elements, which is performed using CSS selectors (users of JQuery will find many of the idioms underlying D3 very familiar), and when styling elements, which . oreilly.com/data to learn more. Getting Started with D3 Mike Dewar Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Getting Started with D3 by Mike Dewar Copyright. the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Getting Started with D3, the cover image of a pintail duck, and related trade dress are