D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
The scenery seen on the journey of learning D3.js is very beautiful, magnificent and sometimes even a bit rugged. You may be intimidated by the long list of functions in the d3.js documentation (d3’s API documentation ), or confused by the piles of tutorials Exhausted (dozens of tutorials). There are more than 20,000 examples you can use to learn: 20,000+ d3 examples , but you don’t know which ones are really helpful for you to learn D3.js.
Charts are just rectangles with some shapes inside. What D3 provides is a way for you to express the data you want to display by manipulating icons or your own graphics. It allows you to easily add visualization to your graphics Interaction, define how your graphics behave. What you learn in D3 will be a way of visual expression, which you can’t get in other libraries.
Here is a brief introduction for d3.js.
Installation
We need to include the D3.js library into your HTML webpage in order to use D3.js to create data visualization. We can do it in the following ways −
Download D3.js Library
Since D3.js is an open-source library and the source code of the library is freely available on the web at https://d3js.org website. Just visit the D3.js website and download the latest version of it.
After download and unzip the downloaded file, put the d3.min.js file under the project’s root file and include to your html page as shown below:
<!DOCTYPE html>
<html lang = "en">
<head>
<script src = "/path/to/d3.min.js"></script>
</head>
<body>
<script>
// write your d3 code here..
</script>
</body>
</html>NPM installation
If you are using npm, npm install d3. You can also download the latest release on Github. When you want to use if, just import it gloablly.
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
const div = d3.selectAll("div");
</script>Existing IDE
If you are tired of downloading and installing all of these resources because it’s too messy, you can also use some existing IDE online such as Codepen. Codepen helps you build the environment directly without letting you further do some background stuff.
Then we are all good to go to some learning peparation.
Be the first to comment