Scribd
Upload
2K views1 page

D3 Tips and Tricks Cheat Sheet For d3.Js

The document provides code examples for creating common SVG elements like circles, lines, text, and rectangles in D3. It also includes examples for styling elements, using scales to map data values to pixel values, filtering elements, conditional styling, transforming elements, formatting data, and adding links.

Uploaded by

Kiran Kumar P
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views1 page

D3 Tips and Tricks Cheat Sheet For d3.Js

The document provides code examples for creating common SVG elements like circles, lines, text, and rectangles in D3. It also includes examples for styling elements, using scales to map data values to pixel values, filtering elements, conditional styling, transforming elements, formatting data, and adding links.

Uploaded by

Kiran Kumar P
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

D3 Tips and Tricks Cheat Sheet.

Get the latest version from https://leanpub.com/D3-Tips-and-Tricks

Circle Element
<object>.append("circle") // append a circle
.attr("cx", 200) // position the x-center
.attr("cy", 100) // position the y-center
.attr("r", 50); // radius of the circle
Line Element
<object>.append("line") // append a line
.style("stroke", "black") // colour the line
.attr("x1", 100) // x position, first end of the line
.attr("y1", 50) // y position, first end of the line
.attr("x2", 300) // x position, second end of the line
.attr("y2", 150); // y position, second end of the line
Text Element
<object>.append("text") // append text
.style("fill", "black") // fill the text with black
.attr("x", 200) // set x position of left side of text
.attr("y", 100) // set y position of bottom of text
.attr("dx", "10px") // offset from x position anchor
.attr("dy", ".75em") // offset from y position
.attr("text-anchor", "middle") // y justification
.text("Hello World"); // the text to display
Rectangle Element
<object>.append("rect") // append a rectangle
.attr("x", 100) // position the left of the rectangle
.attr("y", 50) // position the top of the rectangle
.attr("height", 100) // set the height
.attr("width", 200) // set the width
.attr("rx", 10) // set the x corner curve radius
.attr("ry", 10); // set the y corner curve radius
Time Formatting
%a - abbreviated weekday name
%A - full weekday name
%b - abbreviated month name
%B - full month name
%c - date and time, as %a %b %e %H:%M:%S %Y
%d - zero-padded day of the month as a decimal [01,31]
%e - space-padded day of the month as a decimal [ 1,31]
%H - hour (24-hour clock) as a decimal number [00,23]
%I - hour (12-hour clock) as a decimal number [01,12]
%j - day of the year as a decimal number [001,366]
%m - month as a decimal number [01,12]
%M - minute as a decimal number [00,59]
%p - either AM or PM
%S - second as a decimal number [00,61]
%U - week number of the year (Sunday, first day) [00,53]
%w - weekday as a decimal number [0(Sunday),6]
%W - week number of the year (Monday, first day) [00,53]
%x - date, as %m/%d/%y
%X - time, as %H:%M:%S
%y - year without century as a decimal number [00,99]
%Y - year with century as a decimal number
%Z - time zone offset, such as -0700
There is also a literal % character using double % signs

Element Styles
.style("fill", "red"); // element fill colour
.style("opacity", .2) // element opacity
.style("fill-opacity", .2) // fill opacity
.style("stroke-opacity", .2) // line opacity
.style("stroke", "red") // line colour
.style("stroke-width", 5) // line width
.style("stroke-dasharray", ("10,3")) // make a dashed line

Scales: From input domain to output range;


var x = d3.scale.linear().range([0, width]);
x.domain([<min value>, <max value>]);
For example;
x.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]); // or
x.domain(
d3.extent(data, function(d) { return d.value; }));
min value

input domain

max value

output range

width

Filter Elements
.filter(function(d) {
return d.value < 400 })
Select Elements using 'If'
.style("fill", function(d) {
if (d.value <= 400) {return "red"}
else { return "black" }
})
Transform Attribute
.attr("transform",
"translate(10,5) // move relative by x,y
scale(2) // scale by specified factor
rotate(10)") // rotate by angle value
Using forEach to format data
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
Add an HTML link to an object
<object>.append("a")
.attr("xlink:href", "http://link.org")
.append("rect") // linked object

You might also like