Playing around with web apps

I've been playing around a bit with javascript, jQuery mobile, d3, c3, and using json for serving up data.  Here's what I have so far.  It's fairly easy using jquery mobile to create a basic web app with some smooth animations among different pages.  Although I'm not showing graphs in the screenshot above, C3 graphs seem to scale well and play nice with jQuery mobile.

It's also quite easy to parse json and use it, including things like processing timestamps.  The json that python is generating seems compatible with what javascript expects.

Circles with Text

My first encounter with d3 is not quite as straight forward.  It seem like "draw some circles with text in the middle" should be easier to write than this.  Also, the whole mindset of attaching data to part of the page and then drawing with callbacks feel odd.  Here's some code that draws the circles, colors each according to some temperature reading, and then labels the circles.  It assumes that you have the data in a variable called "temps" in the form [ [item1, value1], [item2, value2] ].  It will load circles into a div with the id "d3test":

var color = d3.scale.linear().domain([60,80]).
                              interpolate(d3.interpolateHcl).
                              range([d3.rgb("#007AFF"), d3.rgb("#FFF500")]);

var w = $(window).width();

var svg2 = d3.select("#d3test").
              append("svg").
              attr("width", w).
              attr("height", 120);

var step = w/(Object.keys(temps).length+1);
var groups = svg2.selectAll('g').
                  data(temps).
                  enter().
                  append('g');

groups.attr("transform", function(d,i) {
    return "translate("+[step*(i+1)-15, 60]+")";
});

var circles = groups.append("circle").
                     attr({ cx: function(d,i) { return 0; },
                            cy: function(d,i) { return 0; },
                            r: 35,
                            fill: function(d,i) { return color(Math.round(d[1]));},
                            stroke: "#2F3550",
                            "stroke-width": 2.4
                          });

 var label = groups.append("text").
                    text(function(d) { return d[1]; }).
                    attr({
                          "alignment-baseline": "middle",
                          "text-anchor": "middle"
                        });

var label2 = groups.append("text").
                    text(function(d) { return d[0]; }).
                    attr({
                          "alignment-baseline": "middle",
                          "text-anchor": "middle",
                          "dy": "3em"
                         });