Skip to content

Instantly share code, notes, and snippets.

@meesern
Created December 5, 2012 18:29
Building Energy experiment

Building Energy Data Visualisation

This is a D3 experiment in visualising office energy data. The data comes from the publicly available Cambridge Computer Lab Sources which have been uploaded into a Timestreams service - a project run by Horizon Digital Economy Research Institute.

The gist uses an SVG drawn initially in inkscape. Inkscape rendered the circles in the image as paths which needed to be transposed back to circles before the SVG file was merged with the index.html.

building.js uses d3 to request a block of data from the 1st June 2011 and replay it at two minutes every second.

The variation of the data is suprising at first but could be a good indication of energy efficiency with socket and lighting power varying in response to instantanious demand.

function setup()
{
d3.select('#layer1'); //for initial transition/scaling
getData();
scheduleUpdate();
}
var timer;
var run = true;
var samples;
var slot = 0
var max_expected = 250;
var limit = 1000;
var offset = 900;
function scheduleUpdate()
{
clearTimeout(timer);
slot += 1;
if (slot >= limit) run = false;
console.log(slot);
timer=setTimeout("updateVis(slot)",1000);
}
var api_base = "http://c-tech.wp.horizon.ac.uk/wp-content/plugins/timestreams/2/measurement_container/wp_1_ts_current_";
var limit_str = '?limit='
var offset_str = '&offset='
function composeApiUrl(stream,limit,offset)
{
return api_base+stream.toString()+limit_str+limit.toString()+
offset_str+offset.toString()
}
function apiRequest(sample)
{
d3.json(composeApiUrl(sample.stream,limit,offset), function (data) {
sample.data = data.data
console.log(data);
});
}
function getData()
{
samples = {
cngl: {stream:53},
cngs: {stream:54},
cnfl: {stream:55},
cnfs: {stream:56},
cnsl: {stream:57},
cnss: {stream:58},
ccgl: {stream:59},
ccgs: {stream:60},
ccfl: {stream:61},
ccfs: {stream:62},
ccsl: {stream:63},
ccss: {stream:64},
csgl: {stream:65},
csgs: {stream:66},
csfl: {stream:67},
csfs: {stream:68},
cssl: {stream:69},
csss: {stream:70},
cwgl: {stream:71},
cwgs: {stream:72},
cwfl: {stream:73},
cwfs: {stream:74},
cwsl: {stream:75},
cwss: {stream:76}
};
apiRequest(samples.cwgl);
apiRequest(samples.cwgs);
apiRequest(samples.cngl);
apiRequest(samples.cngs);
apiRequest(samples.ccgl);
apiRequest(samples.ccgs);
apiRequest(samples.csgl);
apiRequest(samples.csgs);
apiRequest(samples.cwfl);
apiRequest(samples.cwfs);
apiRequest(samples.cnfl);
apiRequest(samples.cnfs);
apiRequest(samples.ccfl);
apiRequest(samples.ccfs);
apiRequest(samples.csfl);
apiRequest(samples.csfs);
apiRequest(samples.cwsl);
apiRequest(samples.cwss);
apiRequest(samples.cnsl);
apiRequest(samples.cnss);
apiRequest(samples.ccsl);
apiRequest(samples.ccss);
apiRequest(samples.cssl);
apiRequest(samples.csss);
}
function primeSockets(slot)
{
var arr = [];
var val;
try { val = samples.cwgs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.ccgs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cngs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.csgs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cwfs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.ccfs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cnfs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.csfs.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cwss.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.ccss.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cnss.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.csss.data[slot].value; } catch(err) {val = 0};
arr.push(val);
//Use this array to verify positions of the circles in the svg
// G, F, S, W, C, N, S
//var arr = [0,10,20,30,100,110,120,130,200,210,220,230];
return arr;
}
function primeLighting(slot)
{
var arr = [];
var val;
try { val = samples.cwgl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.csgl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cngl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.ccgl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
arr.push(1000);
arr.push(1000);
try { val = samples.cwfl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.csfl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cnfl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.ccfl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
arr.push(1000);
try { val = samples.cwsl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cssl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.cnsl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
try { val = samples.ccsl.data[slot].value; } catch(err) {val = 0};
arr.push(val);
//Use this array to verify positions of the rectangles in the svg
// G, F, S, W, S, N, C
//var arr = [0,20,40,80,1000,1000,100,120,140,180,1000,200,220,240,280];
return arr;
}
function updateVis(slot)
{
var sockets = primeSockets(slot);
var lights = primeLighting(slot);
d3.selectAll('circle')
.data(sockets)
.transition()
.duration(300)
.attr('r', function(d) {return d/max_expected * 60;});
d3.selectAll('rect')
.data(lights)
.transition()
.duration(300)
.style('fill-opacity', function(d) {
var o = Math.min(Math.max(0,1-(d/max_expected)),1);
return o;});
var date_time = samples.cngl.data[slot].valid_time.split(' ');
var times = date_time[1].split(':');
var disp_time = times[0]+':'+times[1];
d3.select('#tspan4039').text(disp_time);
if (run == true)
scheduleUpdate();
}
setup();
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id='frame'>
<div id='left'>.</div>
<div id='port'><div id='chart'>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="666.6908"
height="569.60638"
id="svg2"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="Building-Energy-Vis1.svg">
<defs
id="defs4">
<linearGradient
inkscape:collect="always"
id="linearGradient3956">
<stop
style="stop-color:#524656;stop-opacity:1;"
offset="0"
id="stop3958" />
<stop
style="stop-color:#524656;stop-opacity:0;"
offset="1"
id="stop3960" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient3883">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop3885" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop3887" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3883"
id="linearGradient3889"
x1="53.680077"
y1="40.902222"
x2="100.82578"
y2="40.902222"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3956"
id="linearGradient4175"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.0152218,-6)"
x1="558.12122"
y1="104.32287"
x2="576.94769"
y2="104.32287" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="346.40001"
inkscape:cy="299.47911"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1280"
inkscape:window-height="717"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
fit-margin-top="8"
fit-margin-left="8"
fit-margin-right="8"
fit-margin-bottom="8" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-17.853753,35.463843)">
<g
id="g4101"
transform="translate(3,298)">
<rect
y="21.362183"
x="41.358414"
height="206.27531"
width="78.321602"
id="rect4103"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<circle
r="23"
cy="372.36218"
cx="486"
id="path4105"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
transform="matrix(0.64663106,0,0,0.64663106,-233.74348,-116.28112)"
/>
<rect
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none"
id="rect4107"
width="251.0571"
height="68.680779"
x="119.68073"
y="158.69742" />
<rect
y="21.526253"
x="119.68073"
height="68.680779"
width="251.0571"
id="rect4109"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<rect
y="90.535187"
x="119.68073"
height="68.680779"
width="251.0571"
id="rect4111"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<circle
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path4113"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.64663106,0,0,0.64663106,-69.053409,-115.90537)" />
<circle
transform="matrix(0.64663106,0,0,0.64663106,-69.053409,-184.91431)"
r="23"
cy="372.36218"
cx="486"
id="path4115"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
<circle
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path4117"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.64663106,0,0,0.64663106,-69.053419,-47.743138)" />
<rect
y="21.362183"
x="41.358772"
height="206.27531"
width="329.37869"
id="rect4119"
style="fill:none;stroke:#271d63;stroke-width:1.01003778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g
id="g4121">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro,Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4123"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4125"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">West</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4127"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan4129"
sodipodi:role="line">West</tspan></text>
</g>
<g
transform="translate(234.75945,13.435029)"
id="g4131">
<text
sodipodi:linespacing="125%"
id="text4133"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:none"
y="47.362183"
x="53"
id="tspan4135"
sodipodi:role="line">North</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4137"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4139"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1">North</tspan></text>
</g>
<g
id="g4141"
transform="translate(234.05234,82.024386)">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4143"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4145"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">Central</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4147"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan4149"
sodipodi:role="line">Central</tspan></text>
</g>
<g
id="g4151"
transform="translate(232.63813,151.32085)">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4153"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4155"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">South</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4157"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan4159"
sodipodi:role="line">South</tspan></text>
</g>
</g>
<flowRoot
xml:space="preserve"
id="flowRoot3895"
style="font-size:12px;font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Source Sans Pro, Hegel;-inkscape-font-specification:Hegel Semi-Bold"><flowRegion
id="flowRegion3897"><rect
id="rect3899"
width="68.589355"
height="33.23402"
x="44.547726"
y="26.350243" /></flowRegion><flowPara
id="flowPara3901"></flowPara></flowRoot> <g
transform="translate(138,122)"
id="g4041">
<rect
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none"
id="rect4043"
width="78.321602"
height="206.27531"
x="41.358414"
y="21.362183" />
<circle
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path4045"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.64663106,0,0,0.64663106,-233.74348,-116.28112)" />
<rect
y="158.69742"
x="119.68073"
height="68.680779"
width="251.0571"
id="rect4047"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<rect
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none"
id="rect4049"
width="251.0571"
height="68.680779"
x="119.68073"
y="21.526253" />
<rect
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none"
id="rect4051"
width="251.0571"
height="68.680779"
x="119.68073"
y="90.535187" />
<circle
transform="matrix(0.64663106,0,0,0.64663106,-69.053409,-115.90537)"
ry="23"
cy="372.36218"
cx="486"
id="path4053"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
<circle
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path4055"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.64663106,0,0,0.64663106,-69.053409,-184.91431)" />
<circle
transform="matrix(0.64663106,0,0,0.64663106,-69.053419,-47.743138)"
r="23"
cy="372.36218"
cx="486"
id="path4057"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
<rect
style="fill:none;stroke:#271d63;stroke-width:1.01003778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="rect4059"
width="329.37869"
height="206.27531"
x="41.358772"
y="21.362183" />
<g
id="g4061">
<text
sodipodi:linespacing="125%"
id="text4063"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:none"
y="47.362183"
x="53"
id="tspan4065"
sodipodi:role="line">West</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4067"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4069"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1">West</tspan></text>
</g>
<g
id="g4071"
transform="translate(234.75945,13.435029)">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4073"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4075"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">North</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4077"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan4079"
sodipodi:role="line">North</tspan></text>
</g>
<g
transform="translate(234.05234,82.024386)"
id="g4081">
<text
sodipodi:linespacing="125%"
id="text4083"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:none"
y="47.362183"
x="53"
id="tspan4085"
sodipodi:role="line">Central</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4087"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4089"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1">Central</tspan></text>
</g>
<g
transform="translate(232.63813,151.32085)"
id="g4091">
<text
sodipodi:linespacing="125%"
id="text4093"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:none"
y="47.362183"
x="53"
id="tspan4095"
sodipodi:role="line">South</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text4097"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4099"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1">South</tspan></text>
</g>
</g>
<g
id="g3978"
transform="translate(-15,-7)">
<rect
y="21.362183"
x="41.358414"
height="206.27531"
width="78.321602"
id="rect3853"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<circle
transform="matrix(0.64663106,0,0,0.64663106,-233.74348,-116.28112)"
r="23"
cy="372.36218"
cx="486"
id="path3855"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
<rect
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none"
id="rect3857"
width="251.0571"
height="68.680779"
x="119.68073"
y="158.69742" />
<rect
y="21.526253"
x="119.68073"
height="68.680779"
width="251.0571"
id="rect3859"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<rect
y="90.535187"
x="119.68073"
height="68.680779"
width="251.0571"
id="rect3861"
style="fill:#524656;fill-opacity:1;stroke:#202060;stroke-width:0.49273288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none" />
<circle
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3863"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.64663106,0,0,0.64663106,-69.053409,-115.90537)" />
<circle
transform="matrix(0.64663106,0,0,0.64663106,-69.053409,-184.91431)"
r="23"
cy="372.36218"
cx="486"
id="path3865"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
<circle
sodipodi:type="arc"
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3867"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.64663106,0,0,0.64663106,-69.053419,-47.743138)" />
<rect
y="21.362183"
x="41.358772"
height="206.27531"
width="329.37869"
id="rect3869"
style="fill:none;stroke:#271d63;stroke-width:1.01003778;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g
id="g3903">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text3871"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3873"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">West</tspan></text>
<text
sodipodi:linespacing="125%"
id="text3891"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan3893"
sodipodi:role="line">West</tspan></text>
</g>
<g
transform="translate(234.75945,13.435029)"
id="g3909">
<text
sodipodi:linespacing="125%"
id="text3911"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:none"
y="47.362183"
x="53"
id="tspan3913"
sodipodi:role="line">North</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text3915"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3917"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1">North</tspan></text>
</g>
<g
id="g3919"
transform="translate(234.05234,82.024386)">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text3921"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3923"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">Central</tspan></text>
<text
sodipodi:linespacing="125%"
id="text3925"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan3927"
sodipodi:role="line">Central</tspan></text>
</g>
<g
id="g3929"
transform="translate(232.63813,151.32085)">
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="53"
y="47.362183"
id="text3931"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3933"
x="53"
y="47.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">South</tspan></text>
<text
sodipodi:linespacing="125%"
id="text3935"
y="47.362183"
x="53"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke:#524656;stroke-opacity:1"
y="47.362183"
x="53"
id="tspan3937"
sodipodi:role="line">South</tspan></text>
</g>
</g>
<text
xml:space="preserve"
style="font-size:24px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#a089a0;fill-opacity:1;stroke:#161316;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="279"
y="-10.110718"
id="text4013"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4015"
x="279"
y="-10.110718"
style="font-size:24px;fill:#a089a0;fill-opacity:1;stroke:#161316;stroke-opacity:1">Gates Building</tspan></text>
<g
id="g4161"
transform="translate(7,-17)">
<circle
style="fill:#ea431a;fill-opacity:0.25;stroke:#ea431a;stroke-width:1.56200004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3948"
cx="486"
cy="372.36218"
r="23"
transform="matrix(0.47842955,0,0,0.47842955,335.00245,-106.64924)" />
<rect
style="fill:url(#linearGradient4175);fill-opacity:1;stroke:#202060;stroke-width:0.07547782;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.51595746;stroke-dasharray:none"
id="rect3950"
width="18.701466"
height="20.270699"
x="558.16846"
y="88.187523" />
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="596"
y="76.362183"
id="text3966"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3968"
x="596"
y="76.362183"
style="fill:#ffffff;fill-opacity:1;stroke:none">West</tspan></text>
<text
sodipodi:linespacing="125%"
id="text3970"
y="76.821167"
x="599"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:0;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#000000;fill-opacity:0;stroke:#524656;stroke-opacity:1"
y="76.821167"
x="599"
id="tspan3972"
sodipodi:role="line">Sockets</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:0;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="597"
y="103.88928"
id="text4009"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4011"
x="597"
y="103.88928"
style="fill:#000000;fill-opacity:0;stroke:#524656;stroke-opacity:1">Lighting</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4031"
y="132.88928"
x="597"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:0;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#000000;fill-opacity:0;stroke:#524656;stroke-opacity:1"
y="132.88928"
x="597"
id="tspan4033"
sodipodi:role="line">Time</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4037"
y="136.36218"
x="511"
style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ea431a;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
y="136.36218"
x="511"
id="tspan4039"
sodipodi:role="line">10:30</tspan></text>
</g>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="555"
y="366.36218"
id="text4183"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4185"
x="555"
y="366.36218"
style="fill:#ffffff;fill-opacity:1;stroke:none">West</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4187"
y="121.82117"
x="382"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:0;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#000000;fill-opacity:0;stroke:#524656;stroke-opacity:1"
y="121.82117"
x="382"
id="tspan4189"
sodipodi:role="line">:Second</tspan></text>
<text
xml:space="preserve"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:0;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
x="115"
y="259.88928"
id="text4191"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan4193"
x="115"
y="259.88928"
style="fill:#000000;fill-opacity:0;stroke:#524656;stroke-opacity:1">First:</tspan></text>
<text
sodipodi:linespacing="125%"
id="text4195"
y="425.88928"
x="406"
style="font-size:20px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:0;stroke:#524656;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Source Sans Pro, Hei;-inkscape-font-specification:Hei Bold"
xml:space="preserve"><tspan
style="fill:#000000;fill-opacity:0;stroke:#524656;stroke-opacity:1"
y="425.88928"
x="406"
id="tspan4197"
sodipodi:role="line">:Ground</tspan></text>
</g>
</svg>
</div></div>
<div id='right'>.</div>
</div>
</body>
<script src="building.js"></script>
</html>
body {
font-family: 'Helvetica Neue';
}
h1,#count{
font-size: 36px;
font-weight: 300;
}
h2 {
font-weight: 300;
text-align: center;
color: #000046;
}
#count {
margin-left: 33px;
color: steelBlue;
position: relative;
top: 7px;
}
#form {
/*preserve vertical rhythm*/
margin-top: -1em;
}
#frame {
position: relative;
}
#left, #right {
font-size: 28px;
line-height: 400px;
color: steelBlue;
float: left;
width: 2%;
}
#right {
text-indent: 4px;
}
#port {
width: 96%;
float: left;
overflow-x: hidden;
}
#chart {
margin-top: 10px;
width: 7000px;
position: relative;
left: 0px;
}
.marker {
width: 240px;
margin: 40px;
margin-left: 0px;
float: left;
}
.pack {
margin-left: auto;
margin-right: auto;
display: block;
}
.root {
stroke: white;
fill: white;
display: none;
}
.node {
stroke: #000046;
fill: white;
stroke-width: 4px;
}
.leaf {
stroke: white;
fill: #000046;
}
path {
fill: #000046;
stroke: #000046;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment