Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs for creating, customizing, and displaying axes while building on topics from previous lessons. var m…
Change is good, but creating from scratch is even better. This lesson shows you how to create DOM elements from D3 and insert them into your document as needed. You’ll officially be on your way to creating data visualizations! d3.select('.title') .in…
When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column chart. var svg = d3.select('.chart')…
When your data contains discrete, non-numeric property values that you need to format or convert before displaying, d3.scaleOrdinal() is the API you need. Maybe you need to convert a “pass”/”fail” field to “green”/”red” for coloring your bubble chart…
Sometimes data needs to be converted from a continuous range, like test scores, to a discrete set of output values, like letter grades. In this lesson we’ll see how to use d3.scaleQuantize() to do exactly that. function scaleQuantize(){ var quantizeS…
Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This lesson will show you the ins and outs of accessing existing DOM elements with D3. var div = d3.select('div'); console.log(div.nodes()); var divLinks…
Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing colors, labels, or even link destinations, this lesson demonstrates the process and patterns for updating the DOM using D3’s powerful APIs. // you will s…
Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll see how to use D3 APIs to create our own simplified version of the charts seen on Google Finance. var margin = { top: 10, right: 20, bottom: 65, left…
Column and bar charts are staples of every visualization library. They also make a great project for combining the essential pieces of D3 like selections, scales, axes, and SVG elements. This lesson walks you through the process of creating an essent…
Similar to line charts, area charts are great for displaying temporal data. Whether you’re displaying a single set of data or multiple sets using an overlapping or stacked layout, D3 provides APIs to make the process straightforward. This lesson walk…
Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They’re extremely versatile thanks to their ability to display multiple dimensions of data simultaneously using x and y position, opacity, color, and even…
You can’t add axes to a chart if you don’t make room for them. To that end, the D3 community has adopted a simple convention for defining margin sizes that shields most of your code from having to know or care about them. This lesson demonstrates the…
Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the viewBox attribute, which is used to control how SVGs scale. We’ll also examine a reusable function that can be used to make nearly any visu…
Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. se…
Data visualizations are a lot more interesting when they’re interactive. Whether it’s clicks, roll overs, or drags, it makes things more compelling, and D3 is up to the task. This lesson demonstrates how to implement basic interactions and shows how…
SVG is a great output format for data visualizations because of its scalability, but it comes with some idiosyncrasies and unique challenges. In this lesson we’ll learn how to use graphics containers, the SVG equivalent of a div, as well as text elem…
It’s time to live up to D3’s true name and potential by integrating some real data into your visualization. This lesson introduces the fundamental concepts of enter, update, and exit selections, topics essential for being successful with D3. var scor…
D3 https://d3js.org/ 数据驱动文档显示, 利用 SVG HTML CSS技术. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of mode…
