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.
f you use npm, npm install d3. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import D3 from Skypack:
<script type="module">
import * as d3 from "https://cdn.skypack.dev/d3@7";
const div = d3.selectAll("div");
</script>
For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
const div = d3.selectAll("div");
</script>
You can also use the standalone D3 microlibraries. For example, d3-selection:
<script type="module">
import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";
const div = selectAll("div");
</script>
first create 3 folder with namse: index.html, index.css,index.js
then open index.html and write this codes:
<html>
<head>
<link rel="stylesheet" href="index.css">
<title>Learn D3.js</title>
</head>
<body>
<h1>Bar Chart using D3.js</h1>
<svg class="bar-chart"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="index.js"></script>
</body>
</html>
then open index.css and copy this codes:
.bar-chart {
background-color: #C7D9D9;
}
.bar {
fill: #115D8C;
}
and finally copy this codes in index.js:
// javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / dataset.length);
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) {
return svgHeight - d
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("transform", function (d, i) {
var translate = [barWidth * i, 0];
return "translate("+ translate +")";
});
the result will be this:
what if the dataset number were so small?
we have a very tiny bar chart with is look like a liner chart.in this position we should use scale:
var yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, svgHeight]);
var barChart = svg
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function (d) {
return svgHeight - yScale(d);
})
.attr("height", function (d) {
return yScale(d);
})
javascript
for bar chart axis, d3 give us 4 metod:
d3.axisTop()
d3.axisRight()
d3.axisBottom()
d3.axisLeft()
// javascript
var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var svgWidth = 500,
svgHeight = 300;
var svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight);
var xScale = d3
.scaleLinear()
.domain([0, d3.max(data)])
.range([0, svgWidth]);
var yScale = d3
.scaleLinear()
.domain([0, d3.max(data)])
.range([svgHeight, 0]);
var x_axis = d3.axisBottom().scale(xScale);
var y_axis = d3.axisLeft().scale(yScale);
svg.append("g").attr("transform", "translate(50, 10)").call(y_axis);
var xAxisTranslate = svgHeight - 20;
svg
.append("g")
.attr("transform", "translate(50, " + xAxisTranslate + ")")
.call(x_axis);
and the result will be:
Top comments (0)