This is a bar chart built from scratch for educational purposes.
Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
</style>
</head>
<body>
<script>
//Set Variables
var width = 30,
barwidth = 50,
barOffset = 20,
color = 'red'
CanvasWidth = 200
CanvasHeight = 200;
// Set Data
var data = [
{ "x_axis": (CanvasWidth/4)*1 -(barwidth*0.5) , "y_axis": 10 },
{ "x_axis": (CanvasWidth/4)*2 -(barwidth*0.5) , "y_axis": 40 },
{ "x_axis": (CanvasWidth/4)*3 -(barwidth*0.5) , "y_axis": 70 }];
var svgContainer = d3.select("body").append("svg")
.attr("width", CanvasWidth)
.attr("height", CanvasHeight);
//Set up bars
var rectangles = svgContainer.selectAll("rect")
.data(data)
.enter()
.append("rect");
//Draw Bars
var rectangleAttributes = rectangles
.attr("x", function (d) { return d.x_axis; })
.attr("y", function (d) { return CanvasHeight - d.y_axis ;})
.attr("height", function (d) { return d.y_axis ;})
.attr("width", width)
.style("fill", color);
//set up text
var text = svgContainer.append("Text")
.data(data)
.enter()
.append("TextAttributes");
// Draw Text
var TextAttributes = text
.attr()
svg.append("text")
.text("Edit the code below to change me!")
.attr("y", 200)
.attr("x", 120)
.attr("font-size", 36)
.attr("font-family", "monospace")
//---------------------------------------------------------------------
</script>
</body>
https://d3js.org/d3.v4.min.js