Y4suyuki/d3test.html

## d3test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>

    <script type="text/javascript" src = "/static/d3.v3/d3.v3.js"></script>
    <link type="text/css" rel="stylesheet" href="/static/d3test.css">
</head>
<body>
<h1>D3 test on Google App Engine</h1>
<p>D3 is javascript library for data visualization<p>
<!-- jinja2 template python recursion -->


<p class="update">Click on this text to update the chart with new data values (once).</p>
    <script type="text/javascript">
//svg scales
    var w = 500;
    var h = 100;
    var barPadding = 1;

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

    var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                   11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

    // test for reading csv file
//    var dataset = []
//    d3.csv("/static/jgbcme.csv", function(data) {
//      for(var i = 0; i < data.length; i++) {
//        dataset.push(parseFloat(data[i]['10']));
//      }
//
//    });
    console.log(dataset);
    var xScale = d3.scale.ordinal()
                   .domain(d3.range(dataset.length))
                   .rangeRoundBands([0, w], 0.05);

    var yScale = d3.scale.linear()
                   .domain([0, d3.max(dataset)])
                   .range([0, h]);

// barchart rectangles
    svg.selectAll("rect")
                     .data(dataset)
                     .enter()
                     .append("rect")
                     .attr("x", function(d, i) {
                         return xScale(i);
                     })
                     .attr("y", function(d) {
                         return h - yScale(d);
                     })
                     .attr("width", xScale.rangeBand())
                     .attr("height", function(d) {
                         return yScale(d);
                     })
                     .attr("fill", function(d) {
                         return "rgba( 0, 0, 255, " + ( d / 100 * 1.3 + 0.1) +")";
                     })
                     .on("click", function() {
                         sortBars();

                     });

    var sortBars = function() {
        svg.selectAll("rect")
           .sort(function(a, b) {
                return d3.ascending(a, b);
           })
           .transition()
           .duration(1000)
           .attr("x", function(d, i) {
                return xScale(i);
           });
        svg.selectAll("text")
           .sort(function(a, b) {
                return d3.ascending(a, b);
           })
           .transition()
           .duration(1000)
           .attr("x", function(d, i) {
                return xScale(i) + xScale.rangeBand()/2;
           })
           .attr("y", function(d, i) {
               if (d >= 4) { return h - yScale(d) + 14; }
               else { return h - yScale(d) + 14 - yScale(4); }
           });
    };


// labels for barchart
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text(function(d) {
           return d;
       })
       .attr("text-anchor", "middle") //center the text holizontally
       .attr("x", function(d, i) {
           return xScale(i) + xScale.rangeBand()/2;
       })
       .attr("y", function(d) {
           return h - (d * 4) + 14;
       })
       .attr("font-family", "sans-serif")
       .attr("font-size", "11px")
       .attr("fill", "white");

// update
    d3.select(".update")
        .on("click", function() {
            //New values for dataset
            var dataset = []

            for (var i = 0; i < 20; i++) {
                dataset.push(Math.floor(Math.random() * 25));
            };

            //Update all rects
            svg.selectAll("rect")
               .data(dataset)
               .transition()
               .duration(500)
               .attr("y", function(d) {
                    return h - yScale(d);
               })
               .attr("height", function(d) {
                    return yScale(d);
               })
               .attr("fill", function(d) {
                    return "rgba(0, 0, 255, " + (d/100 * 1.3 + 0.1) + ")"
               });

            //UPdate label
            svg.selectAll("text")
               .data(dataset)
               .transition()
               .duration(1000)
               .text(function(d) {
                    return d;
               })
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.rangeBand() / 2;
               })
               .attr("y", function(d) {
                    if (d >= 4)
                      { return h - yScale(d) + 14;}
                    else
                      { return h - yScale(4) + 14 - yScale(d)}
               })
               .attr("fill", function(d) {
                    if (d >= 4)
                      { return "white"; }
                    else
                      { return "blue";}
               });
        });

    </script>

<!-- jinja2 template for python recursion -->
<!--  { % endfor %#} -->

</body>
</html>

## main.py

import os
import webapp2
import jinja2

from google.appengine.ext import db

template_dir = os.path.join(os.path.dirname(__file__), 'templates')
jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
                               autoescape = True)


class BaseHandler(webapp2.RequestHandler):
    def render_str(self, template, **params):
        t = jinja_env.get_template(template)
        return t.render(params)

    def render(self, template, **kw):
        self.response.out.write(self.render_str(template, **kw))

    def write(self, *a, **kw):
        self.response.out.write(*a, **kw)

class MainPage(BaseHandler):
    def get(self):
        self.render('d3test.html', svgs=range(5))


app = webapp2.WSGIApplication([('/', MainPage)], debug=True)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Test</title>

	<script type="text/javascript" src = "/static/d3.v3/d3.v3.js"></script>
	<link type="text/css" rel="stylesheet" href="/static/d3test.css">
	</head>
	<body>
	<h1>D3 test on Google App Engine</h1>
	<p>D3 is javascript library for data visualization<p>
	<!-- jinja2 template python recursion -->


	<p class="update">Click on this text to update the chart with new data values (once).</p>
	<script type="text/javascript">
	//svg scales
	var w = 500;
	var h = 100;
	var barPadding = 1;

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

	var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

	// test for reading csv file
	// var dataset = []
	// d3.csv("/static/jgbcme.csv", function(data) {
	// for(var i = 0; i < data.length; i++) {
	// dataset.push(parseFloat(data[i]['10']));
	// }
	//
	// });
	console.log(dataset);
	var xScale = d3.scale.ordinal()
	.domain(d3.range(dataset.length))
	.rangeRoundBands([0, w], 0.05);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset)])
	.range([0, h]);

	// barchart rectangles
	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return xScale(i);
	})
	.attr("y", function(d) {
	return h - yScale(d);
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) {
	return yScale(d);
	})
	.attr("fill", function(d) {
	return "rgba( 0, 0, 255, " + ( d / 100 * 1.3 + 0.1) +")";
	})
	.on("click", function() {
	sortBars();

	});

	var sortBars = function() {
	svg.selectAll("rect")
	.sort(function(a, b) {
	return d3.ascending(a, b);
	})
	.transition()
	.duration(1000)
	.attr("x", function(d, i) {
	return xScale(i);
	});
	svg.selectAll("text")
	.sort(function(a, b) {
	return d3.ascending(a, b);
	})
	.transition()
	.duration(1000)
	.attr("x", function(d, i) {
	return xScale(i) + xScale.rangeBand()/2;
	})
	.attr("y", function(d, i) {
	if (d >= 4) { return h - yScale(d) + 14; }
	else { return h - yScale(d) + 14 - yScale(4); }
	});
	};


	// labels for barchart
	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) {
	return d;
	})
	.attr("text-anchor", "middle") //center the text holizontally
	.attr("x", function(d, i) {
	return xScale(i) + xScale.rangeBand()/2;
	})
	.attr("y", function(d) {
	return h - (d * 4) + 14;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "white");

	// update
	d3.select(".update")
	.on("click", function() {
	//New values for dataset
	var dataset = []

	for (var i = 0; i < 20; i++) {
	dataset.push(Math.floor(Math.random() * 25));
	};

	//Update all rects
	svg.selectAll("rect")
	.data(dataset)
	.transition()
	.duration(500)
	.attr("y", function(d) {
	return h - yScale(d);
	})
	.attr("height", function(d) {
	return yScale(d);
	})
	.attr("fill", function(d) {
	return "rgba(0, 0, 255, " + (d/100 * 1.3 + 0.1) + ")"
	});

	//UPdate label
	svg.selectAll("text")
	.data(dataset)
	.transition()
	.duration(1000)
	.text(function(d) {
	return d;
	})
	.attr("x", function(d, i) {
	return xScale(i) + xScale.rangeBand() / 2;
	})
	.attr("y", function(d) {
	if (d >= 4)
	{ return h - yScale(d) + 14;}
	else
	{ return h - yScale(4) + 14 - yScale(d)}
	})
	.attr("fill", function(d) {
	if (d >= 4)
	{ return "white"; }
	else
	{ return "blue";}
	});
	});

	</script>

	<!-- jinja2 template for python recursion -->
	<!-- { % endfor %#} -->

	</body>
	</html>

	import os
	import webapp2
	import jinja2

	from google.appengine.ext import db

	template_dir = os.path.join(os.path.dirname(__file__), 'templates')
	jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
	autoescape = True)


	class BaseHandler(webapp2.RequestHandler):
	def render_str(self, template, **params):
	t = jinja_env.get_template(template)
	return t.render(params)

	def render(self, template, **kw):
	self.response.out.write(self.render_str(template, **kw))

	def write(self, a, *kw):
	self.response.out.write(a, *kw)

	class MainPage(BaseHandler):
	def get(self):
	self.render('d3test.html', svgs=range(5))


	app = webapp2.WSGIApplication([('/', MainPage)], debug=True)