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. Per our previous SVG examples , you will add an SVG circle to the 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. D3.js Chain Syntax
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!
Setup Last updated 2014 February 22 Downloading D3 Start by creating a new folder for your project. Within that folder, I recommend creating a sub-folder called d3. Then download the latest version of d3.v3.js into that sub-folder. As of this writing, the current version of D3 is 3.4.2. D3 is also provided in a “minified” version, d3.v3.min.js, from which whitespace has been removed for smaller file sizes and faster load times. A third option is to download the entire D3 repository, which gives you not just the JavaScript files, but also all of the component source code. Referencing D3 Create a simple HTML page within your project folder named index.html. project-folder/ d3/ d3.v3.js d3.v3.min.js (optional) index.html Now paste the following into your HTML file, so it references D3 in the head and provides room for your JavaScript code: <! Viewing Your Page In some cases, you can just open your HTML file in a web browser to view it. Next up: Adding elements →
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. This may take longer to read, but it should dispel any magic and help you master data-driven documents. 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 var selection = d3.select("body"); Likewise, d3.selectAll returns a selection with one group and any number of elements: d3.selectAll("h2"); #Null Elements
The world’s top 50 billionaires: A demographic breakdown. Top 50 Billionaire Breakdown If you asked anyone to picture the wealthiest person in the world at any given time, you could bet on some common denominators: probably a man; probably somehow attached to the words “multinational” or “conglomerate”; probably on a yacht off a private island. With Slate’s Top 50 Billionaire Breakdown, we attempt to visualize the richest of the rich by paring them into demographic categories: age, location, industry, source of wealth, education, and religious affiliation. Some of the sortings are heartening: There are more self-made men than born-rich kids in the top 50, and the self-made billionaires’ total wealth is bigger. A note on methodology: To determine rankings for the top 50, we first consulted the most recent Forbes World's Billionaires List, but then switched to the Bloomberg Billionaires list, which updates daily and is a typically snazzy and info-dense product of Bloomberg Visual Data.
xml - SQL Server SELECT to JSON function Home · mbostock/d3 Wiki Interactive Data Visualization for the Web Copyright © 2013 Scott Murray Printed in the United States of America. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles ( Nutshell Handbook, the Nutshell Handbook logo, the cover image, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
d3.legend example d3.legend d3.legend is a quick hack to add a legend to a d3 chart. Simply add a g and .call(d3.legend). Color By default the color in the legend will try to match the fill attribute or the stroke attribute of the relevant items. Order The order of items in the legend will be sorted using the top of the bounding box for each included item. Padding Padding will be determined by attribute "data-style-padding" on the legend element. Size Size of the box is determined by font size, as items are placed using "em" and the frame around the items is based on the bounding box. This Example This example takes an existing Gist and adds a legend by defining data-legend for each series and calling d3.legend on a "g" element. d3.legend is a quick hack to add a legend to a d3.graph. This example takes an existing Gist and adds a legend by defining data-legend for each series: .attr("data-legend",function(d) { return d.name}) Adding the legend is as simple as:
Parallel Sets Titanic Survivors Explanation For each dimension (Survived, Sex, Age and Class), a horizontal bar is shown for each of its possible categories. The width of the bar denotes the absolute number of matches for that category. Starting with the first dimension (Survived), each of its categories is connected to a number of categories in the next dimension, showing how that category is subdivided. In fact, you can imagine Parallel Sets as being an icicle plot, with icicles of the same category being “bundled” together. Drag the dimensions and categories to reorder them. Women and Children First? We can see at a glance that the relative proportion of surviving women is far greater than that of the men. As for children, it becomes clearer when we drag the Age dimension up: around half the children survived. Do It Yourself The code is available as a reusable D3.js chart: d3.parsets. The input data should be bound to the target selection. Alternatives Implementation Notes Discuss on HN! Further Reading