Skip to content

Instantly share code, notes, and snippets.

@emeeks
Last active March 17, 2016 16:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/faa8a6f3464735079ec3 to your computer and use it in GitHub Desktop.
Save emeeks/faa8a6f3464735079ec3 to your computer and use it in GitHub Desktop.
Ch. 8, Fig. 6 - D3.js in Action

This is the code for Chapter 8, Figure 6 from D3.js in Action showing how to draw with HTML5 canvas.

<html>
<head>
<title>D3 in Action Chapter 8 - Example 5</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
tr {
border: 1px gray solid;
}
td {
border: 2px black solid;
}
div.table {
position:relative;
}
div.data {
position: absolute;
width: 90px;
padding: 0 5px;
}
div.head {
position: absolute;
}
div.datarow {
position: absolute;
width: 100%;
border-top: 2px black solid;
background: white;
height: 35px;
overflow: hidden;
}
div.gallery {
position: relative;
}
img.infinite {
position: absolute;
background: rgba(255,255,255,0);
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,0);
}
</style>
<body>
<div id="traditional">
</div>
</body>
<footer>
<script>
d3.select("#traditional")
.append("canvas")
.attr("height", 500)
.attr("width", 500);
var context = d3.select("canvas").node().getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 2;
context.fillStyle = "red";
context.beginPath();
context.arc(250,250,200,0,2*Math.PI);
context.fill();
context.stroke();
context.textAlign = "center";
context.font="200px Georgia";
context.fillStyle = "black";
context.textAligh = "center";
context.fillText("1",250,250);
</script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment