eidmanna/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="seats.css" media="screen" />
<script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>
<script type="text/javascript" src="seats.js" ></script>
</head>
<body>
<div class="room"></div>
<div>Name | (Id) | Reserved</div>
<div class="resevations"></div>
<script type="text/javascript" >
d3.xml("steinsaal.svg",  "image/svg+xml",  function(xml) {
   seating(xml);
});
</script>
</body>
</html>

## seats.css
.chart {

}

.chart text {
  fill: white;
  font: 5px sans-serif;
  text-anchor: end;
}

## seats.js
function seating(xml) {
    var svg = d3.select(xml);
    var seats = svg.select("#layer3");
    var data = [];
    seats.selectAll("rect").each(function() {
        var r = d3.select(this);
        data.push({
            id: r.attr("id"),
            title: r.attr("id"),
            reserved: false
        });
    });

    var room = d3.select(".room");
    room.node().appendChild(xml.documentElement);

    handleResevations(data);

    /*
    d3.json("resevations.json", function(data) {

        data;

    });
    */


}

function handleResevations(data) {

    data.forEach(function(value, index) {
        var seat = d3.select("#" + value.id);
        seat.datum(value);

        seat.on("click", function(d) {
            reserve(seat, d, data);
        });

        seat.append("title")
            .text(function(d) {
                return d.title;
            });

    });
}

function saveResevations(data) {
    var res = d3.select(".resevations")
        .selectAll("div")
        .data(data);

    res.enter().append("div");

    res.text(function(d) {
        return d.title + " (" + d.id + ") : " + d.reserved;
    });
}


function reserve(o, data, allData) {
    data.reserved = !data.reserved;
    o.style("fill", seatColor(data, o));
    saveResevations(allData);
}

function seatColor(data, node) {
    if (!data.origColor) {
        data.origColor = node.style("fill");
    }
    node.style("fill");
    return data.reserved ? "red" : data.origColor;
}

function type(d) {
    //d.x = +d.x; // coerce to number
    //d.y = +d.y;
    d.reserved = d.reserved == 'R';
    return d;
}

## steinsaal.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              steinsaal.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="seats.css" media="screen" />
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="seats.js" ></script>
	</head>
	<body>
	<div class="room"></div>
	<div>Name \| (Id) \| Reserved</div>
	<div class="resevations"></div>
	<script type="text/javascript" >
	d3.xml("steinsaal.svg", "image/svg+xml", function(xml) {
	seating(xml);
	});
	</script>
	</body>
	</html>
	.chart {

	}

	.chart text {
	fill: white;
	font: 5px sans-serif;
	text-anchor: end;
	}
	function seating(xml) {
	var svg = d3.select(xml);
	var seats = svg.select("#layer3");
	var data = [];
	seats.selectAll("rect").each(function() {
	var r = d3.select(this);
	data.push({
	id: r.attr("id"),
	title: r.attr("id"),
	reserved: false
	});
	});

	var room = d3.select(".room");
	room.node().appendChild(xml.documentElement);

	handleResevations(data);

	/*
	d3.json("resevations.json", function(data) {

	data;

	});
	*/


	}

	function handleResevations(data) {

	data.forEach(function(value, index) {
	var seat = d3.select("#" + value.id);
	seat.datum(value);

	seat.on("click", function(d) {
	reserve(seat, d, data);
	});

	seat.append("title")
	.text(function(d) {
	return d.title;
	});

	});
	}

	function saveResevations(data) {
	var res = d3.select(".resevations")
	.selectAll("div")
	.data(data);

	res.enter().append("div");

	res.text(function(d) {
	return d.title + " (" + d.id + ") : " + d.reserved;
	});
	}


	function reserve(o, data, allData) {
	data.reserved = !data.reserved;
	o.style("fill", seatColor(data, o));
	saveResevations(allData);
	}

	function seatColor(data, node) {
	if (!data.origColor) {
	data.origColor = node.style("fill");
	}
	node.style("fill");
	return data.reserved ? "red" : data.origColor;
	}

	function type(d) {
	//d.x = +d.x; // coerce to number
	//d.y = +d.y;
	d.reserved = d.reserved == 'R';
	return d;
	}