Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active August 10, 2016 01:31
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/be1a49bc4c4ad4d0f787a8e26ab2718e to your computer and use it in GitHub Desktop.
Save Guerino1/be1a49bc4c4ad4d0f787a8e26ab2718e to your computer and use it in GitHub Desktop.
Download ZIP
Tutorial for drawing multiple axes using D3 Axis
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>IF4IT Sample Charts Web Page</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" charset="utf-8"></script>
<script type="text/javascript">
d3.select(self.frameElement).style("height", "1000px");
d3.select(self.frameElement).style("width", "1200px");
// DATA FOR EXAMPLES
var seasonsArray = ["Winter", "Spring", "Summer", "Autumn"];
var numericArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
dataSet1 = [
{cx: 7, cy: 2, r: 10, color: "blue"},
{cx: 2, cy: 2, r: 30, color: "orange"},
{cx: 3, cy: 6, r: 30, color: "purple"},
{cx: 4, cy: 4, r: 10, color: "yellow"},
{cx: 5, cy: 5, r: 5, color: "red"},
{cx: 9, cy: 8, r: 20, color: "green"}
];
dataSet2 = [
{cx: "Summer", cy: 2, r: 10, color: "blue"},
{cx: "Winter", cy: 2, r: 30, color: "orange"},
{cx: "Autumn", cy: 5, r: 5, color: "red"},
{cx: "Spring", cy: 8, r: 20, color: "green"}
];
dataSet3 = [
{cx: 2, cy: "Summer", r: 10, color: "blue"},
{cx: 2, cy: "Winter", r: 30, color: "orange"},
{cx: 5, cy: "Autumn", r: 5, color: "red"},
{cx: 8, cy: "Spring", r: 20, color: "green"}
];
dataSet4 = [
{cx: "Summer", cy: "Summer", r: 10, color: "blue"},
{cx: "Autumn", cy: "Winter", r: 25, color: "orange"},
{cx: "Winter", cy: "Winter", r: 5, color: "maroon"},
{cx: "Spring", cy: "Autumn", r: 5, color: "red"},
{cx: "Spring", cy: "Summer", r: 8, color: "yellow"},
{cx: "Autumn", cy: "Autumn", r: 15, color: "purple"},
{cx: "Winter", cy: "Spring", r: 20, color: "green"}
];
// FUNCTIONS
function draw10( xAxisData, yAxisData, selectString )
{
var w = 400;
var h = 400;
var marginLeft = 10;
var marginRight = w - 40;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(30,10)");
// Setup y axis : Range is the length of the line
// [0, 10] generates integer tick markers
var yAxisScale = d3.scale.linear().domain([yAxisData[0], (yAxisData.length-1)]).range([marginBottom-20, marginTop]);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.call(yAxis);
// Setup x axis : Range is the length of the line
// [0, 10] generates integer tick markers
var xAxisScale = d3.scale.linear().domain([xAxisData[0], (xAxisData.length-1)]).range([0, marginRight]);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xAxisGroup = innerCanvas.append("g")
.attr("transform", "translate(0,354)")
.call(xAxis);
};
function draw20( xAxisData, yAxisData, selectString )
{
var w = 400;
var h = 400;
var marginLeft = 10;
var marginRight = w - 10;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(60,10)");
// Setup y axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.call(yAxis);
// Setup x axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, marginRight], 1);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xAxisGroup = innerCanvas.append("g")
.attr("transform", "translate(0,354)")
.call(xAxis);
};
function draw30( xAxisData, yAxisData, selectString )
{
var w = 400;
var h = 400;
var marginLeft = 10;
var marginRight = w - 10;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(60,10)");
// Setup y axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.call(yAxis);
// Setup x axis : Range is the length of the line
// [0, 10] generates integer tick markers
var xAxisScale = d3.scale.linear().domain([xAxisData[0], (xAxisData.length-1)]).range([0, marginRight-70]);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
//var xAxisGroup = innerCanvas.call(xAxis);
var xAxisGroup = innerCanvas.append("g")
.attr("transform", "translate(0,354)")
.call(xAxis);
};
function draw40( xAxisData, yAxisData, selectString )
{
var w = 400;
var h = 400;
var marginLeft = 10;
var marginRight = w - 10;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(60,10)");
// Setup y axis : Range is the length of the line
// [0, 10] generates integer tick markers
var yAxisScale = d3.scale.linear().domain([yAxisData[0], (yAxisData.length-1)]).range([marginBottom-20, marginTop]);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.call(yAxis);
// Setup x axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, marginRight], 1);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xAxisGroup = innerCanvas.append("g")
.attr("transform", "translate(0,354)")
.call(xAxis);
};
function draw50( xAxisData, yAxisData, selectString )
{
var w = 500;
var h = 400;
var marginLeft = 10;
var marginRight = w - 10;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(60,10)");
// Setup y axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.append("g")
.attr("class", "y axis")
.call(yAxis);
// Setup x axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xAxisGroup = innerCanvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0,354)")
.call(xAxis);
// Transitions the X axis to Y value set.
xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1);
xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xTransitions = innerCanvas.selectAll(".x.axis")
.transition()
.duration(3000)
.delay(500)
.attr("fill", "red")
.attr("transform", "translate(0,354)")
.call(xAxis);
// Transitions the Y axis to X value set.
yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yTransitions = innerCanvas.selectAll(".y.axis")
.transition()
.duration(3000)
.delay(500)
.attr("fill", "red")
.call(yAxis);
};
function draw60( xAxisData, yAxisData, selectString )
{
var flag = true;
var w = 500;
var h = 400;
var marginLeft = 10;
var marginRight = w - 10;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(60,10)");
// Setup y axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.append("g")
.attr("class", "y axis")
.call(yAxis);
// Setup x axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xAxisGroup = innerCanvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0,354)")
.call(xAxis);
d3.select("#buttonChart60")
.on("click", function(){
var color;
if (flag) {
xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1);
yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
color = "red";
} else {
xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
color = "black";
}
flag = !flag
// Transitions the X axis to Y value set.
xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xTransitions = innerCanvas.selectAll(".x.axis")
.transition()
.duration(2000)
.delay(200)
.attr("fill", color)
.attr("transform", "translate(0,354)")
.call(xAxis);
// Transitions the Y axis to X value set.
yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yTransitions = innerCanvas.selectAll(".y.axis")
.transition()
.duration(2000)
.delay(200)
.attr("fill", color)
.call(yAxis);
})
.on("mouseover", function(){
var thisObject = d3.select(this);
thisObject.style({"background-color": "DarkGreen"});
})
.on("mouseleave", function(){
var thisObject = d3.select(this);
thisObject.style({"background-color": "#4CAF50"});
});
};
function draw70( xAxisData, yAxisData, selectString )
{
var flag = true;
var w = 500;
var h = 400;
var marginLeft = 10;
var marginRight = w - 10;
var marginTop = 20;
var marginBottom = h - 20;
var lineData = [];
var pt1 = {x: 0, y: 0};
lineData.push(pt1);
var pt2 = {x: 0, y: h};
lineData.push(pt2);
var pt3 = {x: w, y: h};
lineData.push(pt3);
var pt4 = {x: w, y: 0};
lineData.push(pt4);
var pt5 = {x: 0, y: 0};
lineData.push(pt5);
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
var canvas = d3.select(selectString).append("svg")
.attr("height", h)
.attr("width", w)
// Put a border around the canvas for visual effects
canvas.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 4)
.attr("fill", "none");
// InnerCanvas is the offset canvas, that is offset away
// from the margins, using the transform/translate for the
// entire canvas, instead of just for individual axis.
var innerCanvas = canvas.append("g")
.attr("transform", "translate(60,10)");
// Setup y axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
var yAxisGroup = innerCanvas.append("g")
.attr("class", "y axis")
.call(yAxis);
// Setup x axis : Range is the length of the line
// NOTE: A value of "1" for rangeRoundBands allows points
// to be centered over the ordinal text markers
var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
var xAxisGroup = innerCanvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0,354)")
.call(xAxis);
d3.select("#buttonChart70")
.on("click", function(){
var color;
if (flag) {
//yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
//xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1);
yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginTop, marginBottom-20], 1);
xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([(marginRight-100), 0], 1);
yAxis.orient("bottom");
xAxis.orient("left");
color = "red";
} else {
yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
yAxis.orient("bottom");
xAxis.orient("left");
color = "black";
}
flag = !flag
// Transitions the Y axis to X value set.
var yTransitions = innerCanvas.selectAll(".y.axis")
.transition()
.duration(2000)
.delay(200)
.attr("fill", color)
.attr("transform", function(){
if (flag){
return "transform(0, 354)";
} else {
return "transform(marginTop, marginBottom-20)";
//return "transform(marginBottom-20, marginTop)";
};
}
)
.call(yAxis);
// Transitions the X axis to Y value set.
var xTransitions = innerCanvas.selectAll(".x.axis")
.transition()
.duration(2000)
.delay(200)
.attr("fill", color)
//.attr("transform", "translate(0,354)")
.attr("transform", function(){
if (flag){
return "transform(marginTop, marginBottom-20)";
//return "transform(marginBottom-20, marginTop)";
} else {
return "transform(0, 354)";
};
}
)
.call(xAxis);
})
.on("mouseover", function(){
var thisObject = d3.select(this);
thisObject.style({"background-color": "DarkGreen"});
})
.on("mouseleave", function(){
var thisObject = d3.select(this);
thisObject.style({"background-color": "#4CAF50"});
});
};
</script>
<style type="text/css">
svg {
font: 10px sans-serif;
display: block;
}
.button {
background-color: #4CAF50; /* A lighter Green */
border: none;
color: white;
cursor: pointer;
padding: 10px 10px; /* Controls text padding inside button: y and x */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* unvisited link */
a:link {
color: "blue";
text-decoration: none;
}
/* visited link */
a:visited {
color: "darkblue";
text-decoration: none;
}
/* mouse over link */
a:hover {
color: "maroon";
text-decoration: none;
}
/* selected link */
a:active {
color: "maroon";
text-decoration: none;
}
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;
}
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 {
width: 100%;
height: 100%;
padding: 0;
}
td.td_BodyLeft {
width: 250px;
height: 100%;
padding: 0;
}
td.td_BodyRight {
vertical-align: top;
}
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 {
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 (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/resources.html">RESOURCES</a></li>
<li><a href="http://www.if4it.com">PRODUCTS</a></li>
<li><a href="http://www.if4it.com">SERVICES</a></li>
<li><a href="http://www.if4it.com">SUPPORT</a></li>
<li><a href="http://www.if4it.com">HELP</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://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>
<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">
<div class="div_RootBody">
<h1 style="text-align:center; font: bold 1.5em Arial;">D3 Axis/Axes Tutorial</h1>
</div>
<div class="div_RootBody">
<h3>An X axis and a Y axis that are both integer based and linear:</h3>
<p>Both axes are generated from a numeric array [0,10], which has 11 elements.</p>
<div id="chart10"></div>
</div>
<div class="div_RootBody">
<h3>X and Y axes are both ordinal scale:</h3>
<p>Notice the right shift of the Y axis to accommodate width of the label text strings.</p>
<div id="chart20"></div>
</div>
<div class="div_RootBody">
<h3>Using numeric arrays with ordinal scale:</h3>
<p>In this example, we pass in numeric arrays for both axes but use an ordinal scale to generate them.</p>
<p>Note the difference in tick text positions between numerics as oridinals, in this example, vs. numerics as linear, in other examples.</p>
<div id="chart20b"></div>
</div>
<div class="div_RootBody">
<h3>X axis is numeric scale &amp Y axis is ordinal scale:</h3>
<p>Notice the right shift of the Y axis to accommodate label text strings.</p>
<div id="chart30"></div>
</div>
<div class="div_RootBody">
<h3>X axis is ordinal scale &amp Y axis is numeric scale:</h3>
<div id="chart40"></div>
</div>
<div class="div_RootBody">
<h3>Transitions Axes automatically, after a short delay:</h3>
<p>The following example transitions axes in such a manner as to transpose X to Y and Y to X.</p>
<p>Note: You have to refresh your screen to see these transitions occur.</p>
<div id="chart50"></div>
</div>
<div class="div_RootBody">
<h3>Transitions Axes (Text Only) using a button, with a short delay:</h3>
<h3>Transitions Axes using a button, with a short delay:</h3>
<p>The following example transitions axes in such a manner as to transpose X to Y and Y to X with a button click.</p>
<button id="buttonChart60" class="button">Swap Axes</button>
<div id="chart60"></div>
</div>
<div class="div_RootBody">
<h3>Transitions Axes using a button, with a short delay:</h3>
<p>The following example transitions axes like the previous example but also transitions the lines/paths.</p>
<button id="buttonChart70" class="button">Swap Axes</button>
<div id="chart70"></div>
</div>
</td>
</tr>
</table>
<div class="div_Footer"><p><p>This is the IF4IT Footer Message for this web page.</p></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">
draw10( numericArray, numericArray, "#chart10" );
draw20( seasonsArray, seasonsArray, "#chart20" );
draw20( numericArray, numericArray, "#chart20b" );
draw30( numericArray, seasonsArray, "#chart30" );
draw40( seasonsArray, numericArray, "#chart40" );
draw50( seasonsArray, numericArray, "#chart50" );
draw60( seasonsArray, numericArray, "#chart60" );
draw70( seasonsArray, numericArray, "#chart70" );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment