Familiar Selector Format
Just like in CSS and jQuery, you have a familiar selector format for working with data in the DOM. With jQuery, we prefix selections with the dollar sign and then the selector inside the parenthesis something like
jQuery('.someclass'). With D3, you replace the dollar sign with the d3 prefix. Here are a couple of examples of selecting one, or all, elements on a page and then updating their html.
How to select an element and update the HTML with D3
Welcome to D3');
How to select multiple elements and update the HTML with D3
Welcome to D3');
Function Chains With D3
Just like with jQuery, and Laravel for that matter, you can chain functions together using the dot
. operator. As you likely know, this is a super convenient way to combine a sequential list of actions to take on one element or instance of data, in one fell swoop. Let’s see an example of what we’re talking about with D3.
How To Make A Circle With D3 JS
d3.select('#circle').append('svg') .attr('height', 200) .append('circle') .style('fill', 'blue') .attr('r', 50) .attr('cx', 60) .attr('cy', 60);
Data Handling With D3
D3 has a built in parsing engine to be able to parse data from various data formats like json, text, html, tsv, and csv files. In addition to being able to handle the parsing of your data, D3 also provides a mechanism for data binding. This might happen using something like a call to json interface via an URL, and then completing a callback function to process that resulting data. We’ll take a look at both examples of how to do this in later episodes of D3.
Interactivity With D3
The D3 API Structure
D3 has many hundreds of functions, and it would be hard to memorize them all. We can however group them into related categories like so.