Sample d3 fancy things

gistfile1.txt

{% extends "base.html" %}
{% block body %}

<h3>X Results</h3>
{{x_array}}

<div id ="table">
</div>

<script>

var dataset =[[0.79397623257292449, 0.47522821761787826, 0.29310619390531145, 1.2647319686369869], [0.60675005394298342, 0.43239052568645464, 0.56943934600060986, 0.0806352176614831], [0.70114457621271309, 0.2415444947619281, 0.24855550151819705, 0.12679694512938167], [13.022426812327259, 19.735206633021956, 6.2591200477799855, 8.0723571227549122], [19.691835013697666, 12.275757419918344, 7.9030217810738463, 7.6598119026118887], [18.383836317677574, 11.479979602713868, 9.205954539239082, 8.3728413087719762], [23.377451918511134, 17.580718959462779, 11.712809868405863, 0.45420005950833142], [15.55709541958519, 6.4655545663196419, 7.5172179157301597, 3.4052780883143638], [7.7238226417434106, 18.138006010966624, 9.4792263731945781, 16.356881882136406], [15.483028672673962, 15.936518643289041, 6.7652777498317231, 2.7953312602668809], [22.893593032051147, 12.633981703517454, 18.083910178123414, 25.076236028052861], [41.322079827502577, 13.572896818477785, 19.40989570972182, 7.0538720257754921], [19.695601439159546, 40.353511232707014, 13.317404663806629, 5.4707719093103009], [24.764578729682114, 44.346115641005724, 17.224742842093395, 1.1057204498373503], [32.53976041159747, 11.659832758964395, 37.292920569622694, 14.726284110570347], [9.3615958475757601, 11.45547879953709, 3.3847648529226801, 4.4077328551322248]];


var td = d3.select("#table")
	.append("table")
    .style("border-collapse", "collapse")
    .style("border", "2px black solid")

    .selectAll("tr")
    .data(dataset)
    .enter().append("tr")

    .selectAll("td")
    .data((function(d, i) { return d; }))
    .enter().append("td")
    .style("border", "1px black solid")
    .style("padding", "5px")
    .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
    .on("mouseout", function(){d3.select(this).style("background-color", "white")})
    .text(function(d){return d;})
    .style("font-size", "12px");




</script>


<script>

var dataset =[9.3615958475757601, 11.45547879953709, 3.3847648529226801, 4.4077328551322248];


//Width and height
var w = 800;
var h = 500;


//Create an SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);


//Create a group of stacked rectangles representing each data item in the array
svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")

	.attr("x", 110)
	.attr("y", function(d, i) {
	    return i * 31;  //Bar height of 30 plus 1 for padding
	})
    .attr("width", 125)
	.attr("height", 30)
	.attr("fill", function(d) {
    return "rgb(0, 0, " + parseInt(d)*20 + ")";
});


//Superimpose text for funsies
svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
        return d;
   })
   	.attr("x", 110 + 5) //Shifting over 5 px for good looks
	.attr("y", function(d, i) {
	    return (i * 31) +18;  //Bar height of 30 plus 1 for padding, not sure why you need extra 18 to make it look ok
	})
	.attr("font-family", "sans-serif")
    .attr("font-size", "12px")
    .attr("fill", "white");

</script>


{% endblock %}