Created
September 5, 2016 15:42
-
-
Save Guerino1/a59713bfcb61d60582204680159a3e55 to your computer and use it in GitHub Desktop.
Using HTML select element with D3 for axis/axes transitions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 | |
mixedDataSet = [ | |
{"System": "System A", "Severity": "Critical", "Owned By": "Business", "Business Domain": "Sales"}, | |
{"System": "System D", "Severity": "High", "Owned By": "Business", "Business Domain": "Marketing"}, | |
{"System": "System N", "Severity": "Low", "Owned By": "Business", "Business Domain": "Marketing"}, | |
{"System": "System C", "Severity": "Critical", "Owned By": "IT", "Business Domain": "Sales"}, | |
{"System": "System L", "Severity": "Critical", "Owned By": "IT", "Business Domain": "NO_DATA"}, | |
{"System": "System M", "Severity": "High", "Owned By": "IT", "Business Domain": "Sales"}, | |
{"System": "System B", "Severity": "Medium", "Owned By": "NO_DATA", "Business Domain": "Support"}, | |
{"System": "System F", "Severity": "Low", "Owned By": "Partner", "Business Domain": "Support"}, | |
{"System": "System E", "Severity": "Low", "Owned By": "Business", "Business Domain": "Sales"}, | |
{"System": "System I", "Severity": "Medium", "Owned By": "IT", "Business Domain": "Sales"}, | |
{"System": "System J", "Severity": "NO_DATA", "Owned By": "Partner", "Business Domain": "NO_DATA"}, | |
{"System": "System K", "Severity": "High", "Owned By": "Partner", "Business Domain": "Manufacturing"}, | |
{"System": "System H", "Severity": "Low", "Owned By": "IT", "Business Domain": "Sales"}, | |
{"System": "System G", "Severity": "Low", "Owned By": "Business", "Business Domain": "Manufacturing"} | |
]; | |
// FUNCTIONS | |
function drawChart( dataSet, selectString ) | |
{ | |
// Initalization of variables | |
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); | |
// Determine axis keys | |
// Will be used for values in dropdown/select menus | |
var axisKeys = Object.getOwnPropertyNames(dataSet[0]).sort(); | |
// Set up a hash by name of axis values to initialize X Axis | |
var xAxisDataHash = []; | |
dataSet.forEach( function(d, i){ | |
xAxisDataHash[d[axisKeys[0]]] = d[axisKeys[0]]; | |
} | |
); | |
// LOCAL FUNCTIONS | |
function keys(obj) | |
{ | |
var keys = []; | |
for(var key in obj) | |
{ | |
if(obj.hasOwnProperty(key)) | |
{ | |
keys.push(key); | |
} | |
} | |
return keys; | |
} | |
var swapAxes = function() | |
{ | |
//CAPTURE NEW DROPDOWN VALUES HERE | |
var xIndex = document.getElementById("xSelectMenu"); | |
var xCategoryValue = xIndex.options[xIndex.selectedIndex].value; | |
var yIndex = document.getElementById("ySelectMenu"); | |
var yCategoryValue = yIndex.options[yIndex.selectedIndex].value; | |
// Set up a hash by name of axis values to initialize X Axis and Y Axis | |
var xAxisData = []; | |
var yAxisData = []; | |
dataSet.forEach( function(d, i){ | |
xAxisData[d[xCategoryValue]] = d[xCategoryValue]; | |
yAxisData[d[yCategoryValue]] = d[yCategoryValue]; | |
} | |
); | |
var color; | |
if (flag){ | |
color = "red"; | |
} else { | |
color = "black"; | |
} | |
flag = !flag | |
// Create new scales | |
xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1); | |
yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1); | |
// Apply new X axis values | |
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); | |
// Apply new Y axis values | |
yAxis = d3.svg.axis().scale(yAxisScale).orient("left"); | |
var yTransitions = innerCanvas.selectAll(".y.axis") | |
.transition() | |
.duration(2000) | |
.delay(200) | |
.attr("fill", color) | |
.call(yAxis); | |
}; | |
var lineFunction = d3.svg.line() | |
.x(function(d) { return d.x; }) | |
.y(function(d) { return d.y; }) | |
.interpolate("linear"); | |
// Initialize data for, both, xAxisData and yAxisData | |
var xAxisData = keys(xAxisDataHash).sort(); | |
var yAxisData = xAxisData; // For now, set yAxisData to xAxisData | |
// Set up Y Axis Dropdown/Selector Menu | |
var ySelectText = d3.select(selectString) | |
.append("span") | |
.text("Y Axis Category:"); | |
var ySelect = d3.select(selectString) | |
.append("select") | |
.attr("id", "ySelectMenu"); | |
var ySelectOptions = ySelect.selectAll("#ySelectMenu") | |
.data(axisKeys) | |
.enter().append("option") | |
.attr("value", function(d){ return d; }) | |
.text(function(d){ return d; }) | |
.attr("id", function(d, i){ | |
return 'y_' + i; | |
}); | |
// Set up X Axis Dropdown/Selector Menu | |
var xSelectText = d3.select(selectString) | |
.append("span") | |
.text(" X Axis Category:"); | |
var xSelect = d3.select(selectString) | |
.append("select") | |
.attr("id", "xSelectMenu"); | |
var xSelectOptions = xSelect.selectAll("#xSelectMenu") | |
.data(axisKeys) | |
.enter().append("option") | |
.attr("value", function(d){ return d; }) | |
.text(function(d){ return d; }) | |
.attr("id", function(d, i){ | |
return 'x_' + i; | |
}); | |
// Set up the "Go" button to select Axes values | |
var controlButton = d3.select(selectString) | |
.append("button") | |
.attr("id", "axisControlButton") | |
//.attr("class", "button") | |
.on("click", swapAxes) | |
.text("Go"); | |
// Create SVG canvas | |
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); | |
}; | |
</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 Transitioning Axis/Axes</h1> | |
</div> | |
<div class="div_RootBody"> | |
<h3>Transitions X Axis text from an HTML dropdown menus:</h3> | |
<div id="chart1"></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"> | |
drawChart( mixedDataSet, "#chart1" ); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment