Skip to content

Instantly share code, notes, and snippets.

@meesern
Created December 5, 2012 18:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save meesern/4218213 to your computer and use it in GitHub Desktop.
Save meesern/4218213 to your computer and use it in GitHub Desktop.
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