D3 or Data-Driven Documents is a powerful Javascript library to create dynamic data visualization using Shapes, Line and Text. You must have a good understanding of HTML, CSS and Javascript to use D3. You must know how to access the console and the DOM tree in your browser.
You will learned how HTML5, SVG and Javascript work together to create wonderful visual and animations.
You can download the latest version from their site d3.org or you can link directly this snippet <script src="https://d3js.org/d3.v4.min.js"></script>
- rect - means "rectangle"
- circle
- ellipse
- line
- text
- path
polygonandpolylineis also part of the shape attributes but they are not mostly used because it's much easier to use path.
- Lets start by creating a data array, put some numbers like what we do in regular javascript. Create an SVG element in our html page. We have to select the body and append the svg element.
var dataArray = [5, 15, 20];
// select the body element and append the svg
var svg = d3.select("body").append("svg")
.attr("height", "100%") //give a 100% height for our svg
.attr("width", "100%"); //give a 100% width for our svg- Now we will create our rectangle in our SVG element.
- We will select all the rectangle, the data array and append the rectangles.
//create rectangles
svg
.selectAll("rect")
.data(dataArray)
.enter()
.append("rect");- Let's set the attributes for our rectangle.
- It must have an
x&yfor their axis andwidth&height
svg.selectAll("rect")
.data(dataArray)
.enter().append("rect")
// create attributes for the rectangle
.attr("height", "200")
.attr("width", "50")
.attr("x", "20")
.attr("y", "100");if you check the page you will see the bar. But you can only see one rectangle its because they are in top of each other. The reason is they are sitting on the same location on the page. To fixed this we have to change the position in their attributes.
- We cannot do it manually because we are writing in one line of code. so we need a function to change the position of our rectangles.
svg.selectAll("rect")
.data(dataArray)
.enter().append("rect")
// make a function for the height
.attr("height",function(d,i){ return d*15; })
.attr("width","50")
// make a function for the x and y axis
.attr("x",function(d,i){ return 60*i; })
.attr("y",function(d,i){ return 300-(d*15); });Link to example: http://landlord-carol-10680.bitballoon.com/
- Styling the words displaying on the screen by font, text-alignment, color, and the shape of the outlines
// font size and family
context.font = context2.font = "325px Futura";
//text alignment
context.textAlign = context2.textAlign = "center";
// font color
context.fillStyle = context2.fillStyle = "#394AFF";
// line format
context.lineJoin = context2.lineJoin = "round";- This is how the animation of the stroke is created, the line width is how think the line stroke is, the stroke style has the colors of the line stroke.
(function next() {
var i = 0.5, text = words.shift();
context.clearRect(0, 0, width, height);
//placement of word
context.fillText(text, width / 2, height / 2 + 100);
var timer = d3.timer(function() {
if (++i > text.length * 30) return timer.stop(), next();
context2.save();
context2.clearRect(0, 0, width, height);
context2.lineWidth = i & 9 ? i * 5 + 3 : i * 5;
context2.strokeStyle = i & 1.9 ? "white" : gradient ;
context2.strokeText(text, width / 2, height / 2 + 100);
context2.restore();
context2.drawImage(canvas, 0, 0);
context.drawImage(canvas2, 0, 0);
});
})();
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent