<script>
        $.post("getorderedtheories",{},
            function(data,status){
                render(data);
            });
        function render(data){
            var width = document.getElementById('timelineContainer').offsetWidth;
            var height = document.getElementById('timelineContainer').offsetHeight;

            var scaleX = d3.scale.linear()
                .domain([data[0].theoryYear,data[data.length-1].theoryYear])
                .range([10, width-30]);

            var svg = d3.select(".timelineContainer")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .style("pointer-events", "all");

            svg.append("rect")
                .attr("x", 10)
                .attr("y", height/2)
                .attr("width", width-35)
                .attr("height", 10);
            svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function(d){
                    return scaleX(d.theoryYear);
                })
                .attr("cy", (height/2)+5)
                .attr("r", 10)
                .on("mouseover", handleMouseOver)
                .on("mouseout", handleMouseOut)
                .on("click", function(d) {
                    $.post("gettheorydata",
                        {
                            id : d.id
                        },
                        function(data,status){
                            for(field in data[0]){
                                $("#"+field).text(data[0][field]);
                            }
                        });
                });
            function handleMouseOver(d, i) {  // Add interactivity
                d3.select(this).attr({
                  fill: "orange",
                });
                svg.append("text").attr({
                   id: "t" + d.theoryYear + "-" + "-" + i,  // Create an id for text so we can select it later for removing on mouseout
                    x: function() { return scaleX(d.theoryYear) - 50; },
                    y: (height/2)+10,
                    })
                    .attr("transform", "rotate(90,"+(scaleX(d.theoryYear)-35)+","+((height/2)+40)+")")
                    .text(function() {
                        return [d.theoryName];  // Value of the text
                    });
            }
            function handleMouseOut(d, i) {
                d3.select(this).attr({
                  fill: "black",
                });
                // Select text by id and then remove
                d3.select("#t" + d.theoryYear + "-" + "-" + i).remove();  // Remove text location
            }
        }
    </script>