This is a bar chart built from scratch for educational purposes.
Built with blockbuilder.org
license: mit |
This is a bar chart built from scratch for educational purposes.
Built with blockbuilder.org
State | PurchPer100th | |
---|---|---|
Hawaii | 0 | |
District of Columbia | 9 | |
Iowa | 69 | |
New Jersey | 83 | |
Nebraska | 95 | |
Massachusetts | 116 | |
New York | 118 | |
North Carolina | 139 | |
Maryland | 144 | |
Rhode Island | 161 | |
California | 180 | |
Georgia | 200 | |
Utah | 205 | |
Michigan | 206 | |
Connecticut | 211 | |
Nevada | 234 | |
Illinois | 248 | |
Alabama | 265 | |
Texas | 279 | |
Arizona | 294 | |
South Carolina | 316 | |
Minnesota | 318 | |
Delaware | 325 | |
Ohio | 329 | |
Kentucky | 346 | |
Kansas | 357 | |
Arkansas | 358 | |
Washington | 359 | |
Florida | 362 | |
Pennsylvania | 421 | |
Vermont | 426 | |
Louisiana | 432 | |
Virginia | 440 | |
New Mexico | 454 | |
Idaho | 458 | |
Indiana | 467 | |
Maine | 477 | |
Wisconsin | 481 | |
Oregon | 515 | |
Oklahoma | 524 | |
Tennessee | 536 | |
New Hampshire | 539 | |
Missouri | 551 | |
West Virginia | 552 | |
North Dakota | 558 | |
Wyoming | 567 | |
Colorado | 579 | |
Mississippi | 589 | |
South Dakota | 653 | |
Montana | 676 | |
Alaska | 832 |
<!DOCTYPE html> | |
<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> |