Test block

This is a bar chart built from scratch for educational purposes.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

</style>
</head>

//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