Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active January 29, 2016 19:35
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 Guerino1/6aa3861bcbe96c343103 to your computer and use it in GitHub Desktop.
Save Guerino1/6aa3861bcbe96c343103 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Rectangles Tutorial and Cookbook
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US"
lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<title>D3 Rectangle Examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Description" content="This page tries to mix charts with html formatting and layout constructs." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="-l" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
<script type="text/javascript">
d3.select(self.frameElement).style("height", "1800px");
d3.select(self.frameElement).style("width", "1800px");
// document.writeln("TEST");
// DATA SETS
var dataSet1 = [];
dataSet1.svgWidth = 400;
dataSet1.svgHeight = 75;
dataSet1.w = 70;
dataSet1.h = 50;
dataSet1.fillColor = "Red";
var dataSet2 = [];
dataSet2.svgWidth = 400;
dataSet2.svgHeight = 75;
dataSet2.w = 70;
dataSet2.h = 50;
dataSet2.fillColor = "Red";
dataSet2.strokeWidth = 4;
dataSet2.strokeColor = "Black";
dataSet2.strokeAlignment = "inside";
var dataSet3 = [];
dataSet3.svgWidth = 400;
dataSet3.svgHeight = 75;
dataSet3.w = 70;
dataSet3.h = 50;
dataSet3.fillColor = "Red";
dataSet3.strokeWidth = 4;
dataSet3.strokeColor = "Black";
dataSet3.strokeAlignment = "inside";
dataSet3.x = 2;
dataSet3.y = 2;
var dataSet4 = [];
dataSet4.svgWidth = 400;
dataSet4.svgHeight = 75;
dataSet4.w = 70;
dataSet4.h = 50;
dataSet4.fillColor = "Blue";
dataSet4.cornerRadiusX = 6;
dataSet4.cornerRadiusY = 6;
var dataSet5 = [];
dataSet5.svgWidth = 400;
dataSet5.svgHeight = 75;
dataSet5.w = 70;
dataSet5.h = 50;
dataSet5.fillColor = "Blue";
dataSet5.cornerRadiusX = 6;
dataSet5.cornerRadiusY = 6;
dataSet5.strokeWidth = 4;
dataSet5.strokeColor = "Black";
dataSet5.strokeAlignment = "inside";
var dataSet6 = [];
dataSet6.svgWidth = 400;
dataSet6.svgHeight = 75;
dataSet6.w = 70;
dataSet6.h = 50;
dataSet6.fillColor = "Blue";
dataSet6.cornerRadiusX = 6;
dataSet6.cornerRadiusY = 6;
dataSet6.strokeWidth = 4;
dataSet6.strokeColor = "Black";
dataSet6.strokeAlignment = "inside";
dataSet6.x = 2;
dataSet6.y = 2;
var dataSet7 = [];
dataSet7.svgWidth = 400;
dataSet7.svgHeight = 95;
dataSet7.r1 = {"x": 0, "y": 0, "w": 50, "h": 30, "color": "Red"};
dataSet7.r2 = {"x": 10, "y": 30, "w": 150, "h": 30, "color": "Yellow"};
dataSet7.r3 = {"x": 20, "y": 60, "w": 90, "h": 30, "color": "Blue"};
// FUNCTIONS
function drawRectangle1( dataSet, selectString ) {
var svgContainer = d3.select(selectString).append("svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var rectangle = svgContainer.append("rect")
.attr("width", dataSet.w)
.attr("height", dataSet.h)
.style("fill", dataSet.fillColor);
}
function drawRectangle2( dataSet, selectString ) {
var svgContainer = d3.select(selectString).append("svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var rectangle = svgContainer.append("rect")
.attr("width", dataSet.w)
.attr("height", dataSet.h)
.style("fill", dataSet.fillColor)
.style("stroke", dataSet.strokeColor)
.style("stroke-width", dataSet.strokeWidth)
.style("stroke-alignment", dataSet.strokeAlignment);
}
function drawRectangle3( dataSet, selectString ) {
var svgContainer = d3.select(selectString).append("svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var rectangle = svgContainer.append("rect")
.attr("width", dataSet.w)
.attr("height", dataSet.h)
.style("fill", dataSet.fillColor)
.style("stroke", dataSet.strokeColor)
.style("stroke-width", dataSet.strokeWidth)
.style("stroke-alignment", dataSet.strokeAlignment)
.attr("x", dataSet.x)
.attr("y", dataSet.y);
}
function drawRectangle4( dataSet, selectString ) {
var svgContainer = d3.select(selectString).append("svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var rectangle = svgContainer.append("rect")
.attr("width", dataSet.w)
.attr("height", dataSet.h)
.style("fill", dataSet.fillColor)
.style("rx", dataSet.cornerRadiusX)
.style("ry", dataSet.cornerRadiusY);
}
function drawRectangle5( dataSet, selectString ) {
var svgContainer = d3.select(selectString).append("svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var rectangle = svgContainer.append("rect")
.attr("width", dataSet.w)
.attr("height", dataSet.h)
.style("fill", dataSet.fillColor)
.style("rx", dataSet.cornerRadiusX)
.style("ry", dataSet.cornerRadiusY)
.style("stroke", dataSet.strokeColor)
.style("stroke-width", dataSet.strokeWidth)
.style("stroke-alignment", dataSet.strokeAlignment);
}
function drawRectangle6( dataSet, selectString ) {
var svgContainer = d3.select(selectString).append("svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var rectangle = svgContainer.append("rect")
.attr("width", dataSet.w)
.attr("height", dataSet.h)
.style("fill", dataSet.fillColor)
.style("rx", dataSet.cornerRadiusX)
.style("ry", dataSet.cornerRadiusY)
.style("stroke", dataSet.strokeColor)
.style("stroke-width", dataSet.strokeWidth)
.style("stroke-alignment", dataSet.strokeAlignment)
.attr("x", dataSet.x)
.attr("y", dataSet.y);
}
function drawRectangle7( dataSet, selectString ) {
// Extract Rectangles from dataSet
var rectangles = [];
rectangles[0] = dataSet.r1;
rectangles[1] = dataSet.r2;
rectangles[2] = dataSet.r3;
var svgContainer = d3.select(selectString).append("svg:svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
svgContainer.selectAll("rect")
.data(rectangles)
.enter().append("svg:rect")
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; })
.attr("width", function(d){ return d.w; })
.attr("height", function(d){ return d.h; })
.style("fill", function(d){ return d.color; });
}
function drawRectangle8( dataSet, selectString ) {
// Extract Rectangles from dataSet
var rectangles = [];
rectangles[0] = dataSet.r1;
rectangles[1] = dataSet.r2;
rectangles[2] = dataSet.r3;
var svgContainer = d3.select(selectString).append("svg:svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
svgContainer.selectAll("rect")
.data(rectangles)
.enter().append("svg:rect")
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; })
.attr("width", function(d){ return d.w; })
.attr("height", function(d){ return d.h; })
.style("fill", function(d){ return d.color; })
.transition()
.ease("linear")
.duration(1500)
.attr("x", function(d){ return dataSet.svgWidth-d.w; })
.transition()
.ease("linear")
.duration(3500)
.attr("x", function(d){ return d.x; });
}
function drawRectangle9( dataSet, selectString ) {
// Extract Rectangles from dataSet
var rectangles = [];
rectangles[0] = dataSet.r1;
rectangles[1] = dataSet.r2;
rectangles[2] = dataSet.r3;
var svgContainer = d3.select(selectString).append("svg:svg")
.attr("width", dataSet.svgWidth)
.attr("height", dataSet.svgHeight);
var arrayOfRectangles = svgContainer.selectAll("rect")
.data(rectangles)
.enter().append("svg:rect")
.attr("class", "rect_flip1")
.attr("x", function(d){ return d.x; })
.attr("orig_x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; })
.attr("width", function(d){ return d.w; })
.attr("height", function(d){ return d.h; })
.attr("color", function(d){ return d.color; })
.style("fill", function(d){ return d.color; });
var flip = function(){
var selectedRectangles = d3.selectAll(".rect_flip1");
selectedRectangles.transition()
.ease("linear")
.duration(1500)
.attr("x", function(d,i){
var rect = d3.select(this)
var x = rect.attr("x")
var orig_x = rect.attr("orig_x")
var width = rect.attr("width")
if(x == orig_x){
var retVal = dataSet.svgWidth-width;
return retVal;
}
else{
var retVal = orig_x;
return retVal;
}
})
.each("end", flip);
};
flip();
}
</script>
<style type="text/css">
svg {
font: 10px sans-serif;
display: block;
}
</style>
<STYLE type="text/css">
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
h1.h1_BodyHeader { text-align:center;
font: bold 1.5em Arial;
}
h2.h2_LeftMenuHeader {
text-align:center;
font: bold 1.2em Arial;
}
h1.h1_Body {
text-align:center;
font: bold 1.8em Arial;
width: 100%;
}
h2.h2_Body {
text-align:center;
font: bold 1.4em Arial;
width: 100%;
}
h3.h3_Body {
text-align:center;
}
p.p_Red {
color:Red;
}
table.table_Header {
width: 100%;
text-align:center;
}
td.td_HeaderLeft {
text-align:left;
}
td.td_HeaderRight {
text-align:right;
}
div.div_Menu {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_Left {
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:left;
padding-left: 5px;
font: normal 14px Arial;
}
table.table_Body {
height: 100%;
padding: 0;
}
/* The following is a hack that requires parent td elements to have at least 1px */
/* height so that child div elements with 100% height will use full height. */
td.td_tableBody {
height: 1px;
}
td.td_BodyLeft {
vertical-align: top;
width: "15%";
height: 100%;
padding: 0;
}
td.td_BodyRight {
vertical-align: top;
height: 100%;
width: "85%";
}
li.li_LeftMenu {
text-align:left;
font: normal 14px Arial;
}
a.a_LeftMenuNoUnderLine {
text-decoration: none;
}
div.div_Body {
height: 100%;
width: 100%;
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:center;
}
div.div_Footer {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_if4itMessage {
width: 100%; background: White;
font: bold .75em Arial;
font-family:Arial, Helvetica, sans-serif;
color:GoldenRod;
text-align:center;
}
.menuButton{
background-color: MidnightBlue;
}
.menuButton li{
height: 100%;
list-style: none;
display: inline;
}
.menuButton li a{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: White;
background-color: MidnightBlue;
border: 2px solid MidnightBlue;
}
.menuButton li a:hover{
height: 100%;
color: MidnightBlue;
background-color: White;
border-style: outset;
background-color: White;
}
.menuButton li a:active{
height: 100%;
border-style: inset;
color: MidnightBlue;
background-color: White;
}
.menuButton li a.disabled{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: MidnightBlue; background-color: White;
border: 2px solid MidnightBlue;
border-style: inset;
border-color: White;
}
</STYLE>
<STYLE type="text/css">
div.div_RootBody {
height: 100%;
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: normal 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
padding: 0px 1em;
text-align:left;
}
</STYLE>
<!--[if gt IE 7]>
<style>body { overflow-y:scroll; } </style>
<![endif]-->
</head>
<body>
<div>
<h1 style="text-align:center; font: bold 1.7em Arial;"><a href="http://www.if4it.com">The International Foundation for Information Technology</a> (<a href="http://www.if4it.com">IF4IT</a>)</h1>
</div>
<div class="div_Menu">
<ul class="menuButton">
<li><a href="http://www.if4it.com">HOME</a></li>
<li><a href="http://www.if4it.com/aboutUs.html">ABOUT US</a></li>
<li><a href="http://www.if4it.com/products_and_services.html">PRODUCTS &amp; SERVICES</a></li>
<li><a href="http://www.if4it.com/resources.html">RESOURCES</a></li>
<li><a href="http://www.if4it.com/contactUs.html">CONTACT US</a></li>
<li><a href="http://www.if4it.com/contactUs.html">US</a></li>
</ul>
</div>
<table class="table_Body">
<tr>
<td class="td_BodyLeft">
<div class="div_Body">
<h2 class="h2_LeftMenuHeader">Sample Left Menu Links</h2>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Applications/Dashboard.html">See D3.js Bar Charts and Pie Charts in Dashboards</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeCluster.html">See D3.js Force Directed Graphs in Node Cluster Diagrams</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Capabilities/Horizontal_Block_Partition.html">See D3.js Horizontal Block Browser</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Applications/noun_type_relationship_density_table.html">See D3.js Elements in Sortable Tables</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://bl.ocks.org/Guerino1/3169420">D3 Radial Wheel</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
</div>
</td>
<td class="td_BodyRight">
<table class="table_Header">
<tr>
<td colspan="3">
<div class="div_RootBody">
<h1 class="h1_Body">D3 Rectangles Tutorial and Cookbook</h1>
<p>This document is meant to act as a tutorial that helps understand how draw, use, and work with D3 rectangles... all embedded within an HTML document. The page attempts to segment each example into small and contained HTML div elements, while trying to show different traits and manipulations. Hopefully, you'll find it useful in your attempts to learn and use D3.</p>
<p><b>How to use this document:</b> If you'd like to understand the code, simply open up the source for the HTML page and search for the title of the HTML div section that you're interested in. The page source is partitioned into four distinct areas:</p>
<ol>
<li>The data that is used for examples</li>
<li>The D3 Javascript code, each wrapped as distinct functions</li>
<li>The HTML Body that includes each HTML div element</li>
<li>The actual Javascript function calls that correlate with each appropriate HTML div element.</li>
</ol>
<p>NOTE: The examples on this page are intended to grow and improve, over time, so please always feel free to check back for and provide feedback on improvements.</b>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="div_RootBody">
<h2 class="h2_Body">Simple Rectangle</h2>
</div>
</td>
</tr>
<tr>
<td class="td_tableBody">
<div class="div_RootBody">
<h3 class="h3_Body">Simple Rectangle; No Stroke; No Offset;</h3>
<p>This example draws a simple rectangle. It has no offset.</p>
<div id="simple_rectangle1"></div>
</div>
</td>
<td class="td_tableBody">
<div class="div_RootBody">
<h3 class="h3_Body">Simple Rectangle; Stroke=4; No Offset;</h3>
<p>This example draws a simple rectangle with a border stroke=4. Notice it has no offset and the border gets clipped.</p>
<div id="simple_rectangle2"></div>
</div>
</td>
<td class="td_tableBody">
<div class="div_RootBody">
<h3 class="h3_Body">Simple Rectangle; Stroke=4; Offset is x=2, y=2;</h3>
<p>This example draws a simple rectangle. Notice it has an offset of x=2 and y=2 that ensures the whole border is visible.</p>
<div id="simple_rectangle3"></div>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="div_RootBody">
<h2 class="h2_Body">Simple Rectangle With Rounded Corners</h2>
</div>
</td>
</tr>
<tr>
<td class="td_tableBody">
<div class="div_RootBody">
<h3 class="h3_Body">Rounded Rectangle; No Stroke; No Offset;</h3>
<p>A rectangle with rounded corners. Notice it has no offset.</p>
<div id="simple_rectangle4"></div>
</div>
</td>
<td class="td_tableBody">
<div class="div_RootBody">
<h3 class="h3_Body">Rounded Rectangle; Stroke=4; No Offset;</h3>
<p>This example draws a simple rectangle with a border stroke=4. Notice it has no offset and the border gets clipped.</p>
<div id="simple_rectangle5"></div>
</div>
</td>
<td class="td_tableBody">
<div class="div_RootBody">
<h3 class="h3_Body">Rounded Rectangle; Stroke=4; Offset is x=2, y=2;</h3>
<p>This example draws a simple rectangle. Notice it has an offset of x=2 and y=2 that ensures the whole border is visible.</p>
<div id="simple_rectangle6"></div>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="div_RootBody">
<h2 class="h2_Body">Multiple Rectangles</h2>
</div>
</td>
</tr>
<tr>
<td class="td_tableBody" colspan="1">
<div class="div_RootBody">
<h3 class="h3_Body">Multiple Simple Vertically Stacked Rectangles</h3>
<p>Three simple rectangles.</p>
<div id="simple_rectangle7"></div>
</div>
</td>
<td class="td_tableBody" colspan="1">
<div class="div_RootBody">
<h3 class="h3_Body">Two Horizontal Transitions of Rectangles</h3>
<p>Transitions the x-axis of each rectangle twice, based on two sequential transition methods.</p>
<div id="simple_rectangle8"></div>
</div>
</td>
<td class="td_tableBody" colspan="1">
<div class="div_RootBody">
<h3 class="h3_Body">Continuous Horizonal Transitions</h3>
<p>Continuously transitions the x-axis of each rectangle.</p>
<div id="simple_rectangle9"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="div_Footer"><p>This is the IF4IT Footer Message for this web page.</p></div>
<div><p class="p_if4itMessage">This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).</p></div>
<script type="text/javascript">
<!-- Draw simple rectangles -->
drawRectangle1(dataSet1, "#simple_rectangle1");
drawRectangle2(dataSet2, "#simple_rectangle2");
drawRectangle3(dataSet3, "#simple_rectangle3");
drawRectangle4(dataSet4, "#simple_rectangle4");
drawRectangle5(dataSet5, "#simple_rectangle5");
drawRectangle6(dataSet6, "#simple_rectangle6");
drawRectangle7(dataSet7, "#simple_rectangle7");
drawRectangle8(dataSet7, "#simple_rectangle8");
drawRectangle9(dataSet7, "#simple_rectangle9");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment