AL-XF/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <style>
    h3{
      text-align: center;
    }
  </style>
    <script type="text/javascript">
        data = [{"month": "Jan","Record High": 65,"Average High": 47,"Average Low": 38,"Record Low": 12,"precipitation": 6.14},
                {"month": "Feb","Record High": 71,"Average High": 51,"Average Low": 38,"Record Low": 8,"precipitation": 4.79},
                {"month": "Mar","Record High": 79,"Average High": 56,"Average Low": 41,"Record Low": 24,"precipitation": 4.5},
                {"month": "Apr","Record High": 88,"Average High": 61,"Average Low": 55,"Record Low": 31,"precipitation": 3.4},
                {"month": "May","Record High": 103,"Average High": 67,"Average Low": 49,"Record Low": 36,"precipitation": 2.55},
                {"month": "Jun","Record High": 101,"Average High": 73,"Average Low": 53,"Record Low": 41,"precipitation": 1.69},
                {"month": "Jul","Record High": 104,"Average High": 80,"Average Low": 57,"Record Low": 47,"precipitation": 0.59},
                {"month": "Aug","Record High": 106,"Average High": 80,"Average Low": 58,"Record Low": 46,"precipitation": 0.71},
                {"month": "Sep","Record High": 103,"Average High": 75,"Average Low": 54,"Record Low": 41,"precipitation": 1.54},
                {"month": "Oct","Record High": 92,"Average High": 63,"Average Low": 48,"Record Low": 31,"precipitation": 3.42},
                {"month": "Nov","Record High": 71,"Average High": 52,"Average Low": 41,"Record Low": 19,"precipitation": 6.74},
                {"month": "Dec","Record High": 67,"Average High": 45,"Average Low": 36,"Record Low": 10,"precipitation": 6.94}]

        function draw(data) {

            "use strict";
            var margin = 50,
                width = 960 - margin,
                height = 400 - margin;
            var new_data = []

            d3.select("body")
            .append("h3")
            .text("Makeover Weather plot");

            var temperature_list = ["Record High", "Average High", "Average Low", "Record Low"]
            data.forEach(function(data_e) {
                temperature_list.forEach(function(i){
                    var temp_dict = {};
                    temp_dict = {
                    month:          data_e.month,
                    temperature:    data_e[i],
                    type:           i
                    };
                    new_data.push(temp_dict)
                });
            }, this);

            var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');


            var myChart = new dimple.chart(svg, new_data);
            var x = myChart.addCategoryAxis("x", "month");
            var y = myChart.addMeasureAxis("y", "temperature");
            x.title = "Month";
            y.title = "Temperature (\xB0F)";
            myChart.addSeries("type", dimple.plot.line);
            var pointSeries = myChart.addSeries("type", dimple.plot.scatter);
            x.addOrderRule(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]);
            myChart.assignColor("Record High", "red");
            myChart.assignColor("Average High", "orange");
            myChart.assignColor("Average Low", "blue");
            myChart.assignColor("Record Low", "gray");
            var legend = myChart.addLegend(800, 50, 60, 300);
            pointSeries.getTooltipText = function(e) {
                return [
                    "Type: "+ e.aggField[0],
                    "Month: " + e.x,
                    "Temperature: " + e.y + " \xB0F"
                ];
            };
            legend.horizontalAlign = "right";
            myChart.draw();
        };

    </script>
</head>
<body>
    <a href = "http://viz.wtf/image/158971084724">The plot was selected </a>
    <script type="text/javascript">
        draw(data);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
	<style>
	h3{
	text-align: center;
	}
	</style>
	<script type="text/javascript">
	data = [{"month": "Jan","Record High": 65,"Average High": 47,"Average Low": 38,"Record Low": 12,"precipitation": 6.14},
	{"month": "Feb","Record High": 71,"Average High": 51,"Average Low": 38,"Record Low": 8,"precipitation": 4.79},
	{"month": "Mar","Record High": 79,"Average High": 56,"Average Low": 41,"Record Low": 24,"precipitation": 4.5},
	{"month": "Apr","Record High": 88,"Average High": 61,"Average Low": 55,"Record Low": 31,"precipitation": 3.4},
	{"month": "May","Record High": 103,"Average High": 67,"Average Low": 49,"Record Low": 36,"precipitation": 2.55},
	{"month": "Jun","Record High": 101,"Average High": 73,"Average Low": 53,"Record Low": 41,"precipitation": 1.69},
	{"month": "Jul","Record High": 104,"Average High": 80,"Average Low": 57,"Record Low": 47,"precipitation": 0.59},
	{"month": "Aug","Record High": 106,"Average High": 80,"Average Low": 58,"Record Low": 46,"precipitation": 0.71},
	{"month": "Sep","Record High": 103,"Average High": 75,"Average Low": 54,"Record Low": 41,"precipitation": 1.54},
	{"month": "Oct","Record High": 92,"Average High": 63,"Average Low": 48,"Record Low": 31,"precipitation": 3.42},
	{"month": "Nov","Record High": 71,"Average High": 52,"Average Low": 41,"Record Low": 19,"precipitation": 6.74},
	{"month": "Dec","Record High": 67,"Average High": 45,"Average Low": 36,"Record Low": 10,"precipitation": 6.94}]

	function draw(data) {

	"use strict";
	var margin = 50,
	width = 960 - margin,
	height = 400 - margin;
	var new_data = []

	d3.select("body")
	.append("h3")
	.text("Makeover Weather plot");

	var temperature_list = ["Record High", "Average High", "Average Low", "Record Low"]
	data.forEach(function(data_e) {
	temperature_list.forEach(function(i){
	var temp_dict = {};
	temp_dict = {
	month: data_e.month,
	temperature: data_e[i],
	type: i
	};
	new_data.push(temp_dict)
	});
	}, this);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin)
	.attr("height", height + margin)
	.append('g')
	.attr('class','chart');


	var myChart = new dimple.chart(svg, new_data);
	var x = myChart.addCategoryAxis("x", "month");
	var y = myChart.addMeasureAxis("y", "temperature");
	x.title = "Month";
	y.title = "Temperature (\xB0F)";
	myChart.addSeries("type", dimple.plot.line);
	var pointSeries = myChart.addSeries("type", dimple.plot.scatter);
	x.addOrderRule(["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]);
	myChart.assignColor("Record High", "red");
	myChart.assignColor("Average High", "orange");
	myChart.assignColor("Average Low", "blue");
	myChart.assignColor("Record Low", "gray");
	var legend = myChart.addLegend(800, 50, 60, 300);
	pointSeries.getTooltipText = function(e) {
	return [
	"Type: "+ e.aggField[0],
	"Month: " + e.x,
	"Temperature: " + e.y + " \xB0F"
	];
	};
	legend.horizontalAlign = "right";
	myChart.draw();
	};

	</script>
	</head>
	<body>
	<a href = "http://viz.wtf/image/158971084724">The plot was selected </a>
	<script type="text/javascript">
	draw(data);
	</script>
	</body>
	</html>