Skip to main content

Envisioning Data

Search This Blog

D3 Tutorials

Get link
Facebook
X
Pinterest
Email
Other Apps

D3.js Tutorials

Getting Started

Making a Selection or Two
Making new stuff
Joining Data - Creating Elements
Joining Data - Updating Elements
SVG Primer - 1
Making SVG with D3js
Interactive Updating

Get link
Facebook
X
Pinterest
Email
Other Apps

Comments

Post a Comment

Popular Posts

Joining Data - Updating Elements - Getting started with d3js part 4

From our last post we ended with a more complex object. Creating multiple DIVs. But what if some data already exists on the page? Can we update it? Why, yes we can! However, unless we don't care which elements we want to be updated, we need to give the script a little more information. Let's add a "key", not unlike a primary key in a relational database. We tell the data() method how to associate data. We do this by passing an inline method to the data() method after the data itself: data(ds, function(d){return d.key;}) So for each item "d" in the dataset "ds" we return its "key" element and from then on use that to reference the elements on the page. <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> var ds = [ {"id":1,"name":"John","Age":22}, {"id":2,...

Making SVG with D3.js

Now that we have a basic understanding of SVG and D3, we can make an example that uses both. From a basic boilerplate HTML document, we will use some data to create some circles! To start, our basic HTML <!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg></svg> <script></script> </body> </html> Next, lets work with our <script> tag. var dataList = [4,5,4]; var svg = d3.select("svg"); svg.attr("width" ,"500px") .attr("height","200px") .style("background-color","lightgrey"); svg.selectAll("circle") .data(dataList) .enter...

Joining Data - Creating Elements - Getting started with d3js part 3

Since our end goal is to generate data-driven documents, we need to connect our elements to data. Let's look at an example. <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> var d = ["Hello"," There","!"]; d3.select("body") .selectAll("div") .data(d) .enter() .append("div") .text(function(d){ return d}); </script> </body> </html> See in Plunker - Example 3.1 Let's break down the script: // We declare an array of strings var d = ["Hello"," There","!"]; // Select the body element d3.select("body") // Now we do a subselection of DIVs inside the body // There are none! But an e...

Powered by Blogger