public
Created

protovis update data

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
var minnesota = [{name:"job 1", values:[182904,196530,203944,192492,77393,81243]}];
 
$(document).ready(function(){
$("button").click(function(){
minnesota = [{name:"changed job", values:[342,34234,2342,543]}];
draw();
});
 
});
 
 
 
 
var w = 200,
h = 30,
numberFormat = pv.Format.number(),
dateFormat = pv.Format.date("%B %Y");
 
/* Color by maximum number of people employed in that job. */
var c = pv.Scale.log(minnesota, function(d) pv.max(d.values))
.range("#ccc", "#1f77b4");
 
/* Tile the visualization for each job. */
vis = new pv.Panel()
.data(minnesota)
.width(w)
.height(h + 10)
.top(6)
.left(6)
.right(6)
.bottom(6);
 
/* A panel instance to store scales (x, y) and the mouseover index (i). */
var panel = vis.add(pv.Panel)
.def("i", -1)
.def("x", function(d) pv.Scale.linear(d.values, pv.index).range(0, w))
.def("y", function(d) pv.Scale.linear(0, pv.max(d.values)).range(0, h))
.bottom(10)
.events("all")
.event("mousemove", pv.Behavior.point(Infinity).collapse("y"));
 
/* The area. */
panel.add(pv.Area)
.data(function(d) d.values)
.fillStyle(function(d, p) panel.i() < 0 ? c(pv.max(p.values)) : "#2ca02c")
.left(function() panel.x()(this.index))
.height(function(d) panel.y()(d))
.bottom(0)
.event("point", function() panel.i(this.index))
.event("unpoint", function() panel.i(-1));
 
/* The x-axis. */
panel.add(pv.Rule)
.bottom(0);
 
/* The mouseover dot. */
panel.add(pv.Dot)
.visible(function() panel.i() >= 0)
.left(function() panel.x()(panel.i()))
.bottom(function(d) panel.y()(d.values[panel.i()]))
.fillStyle("#ff7f0e")
.strokeStyle(null)
.size(10);
 
/* The label: either the job name, or the month and value. */
panel.add(pv.Label)
.bottom(-1)
.textBaseline("top")
.left(function() panel.i() < 0 ? 0 : null)
.right(function() panel.i() < 0 ? null : 0)
.textAlign(function() panel.i() < 0 ? "left" : "right")
.textStyle(function() panel.i() < 0 ? "#999" : "#000")
.text(function(d) panel.i() < 0 ? d.name
: dateFormat(new Date(2000, panel.i() * 3, 1))
+ ": " + numberFormat(d.values[panel.i()]));
 
draw(vis);
 
function draw() {
vis.data(minnesota);
vis.render();
}

what is vis.data(minnesota); for? Im confused, if minnesota is global, and then redefined in the button click handler, why this command ? Thanks.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.