Health vs GDP

  var chart;
  jQuery.get("/wp-content/uploads/examples/xy/health-gdp/health-vs-gdp.json", function (data) {
    function option(name, val) {
      return {
        tag: "option",
        attr: {
          value: val
        },
        child: name
      };
    }
    var options = [];
    for (var i = 1995; i <= 2013; i++) {
      options.push(option(i + "", i + ""));
    }
    var select = ReactiveChart.reactive({
      tag: "select",
      prop: {
        suppressCanvasEvents: true
      },
      style: {
        fontSize: "16px",
      },
      child: options,
      value: "1995"
    });
    var playing = false;
    var play = {
      tag: "button",
      prop: {
        suppressCanvasEvents: true
      },
      child: "play",
      style: {
        marginRight: "10px",
        fontSize: "16px",
        fontWeight: "bold"
      },
      event: {
        click: function () {
          if (!playing) {
            playing = true;
            var year = parseInt(select.value);
            function next() {
              year = year + 1;
              if (year > 2013) {
                playing = false;
              }
              else {
                select.value = year;
                setTimeout(next, 200);
              }
            }
            next();
          }
        }
      }
    };
    var infobar = ReactiveChart.canvas({
      tag: "html",
      html: {
        tag: "div",
        style: {
          paddingRight: "20px"
        },
        child: [play, select]
      }
    });
    chart = ReactiveChart.chart({
      element: "_chart1",
      type: "xy",
      series: {
        style: {
          globalAlpha: 0.5
        },
        shape: {
          type: "point"
        },
        series: [{
          dataLabels: {
            style: {
              background: null
            },
            position: "top"
          },
          style: {
            fillStyle: {
              coordinates: "user",
              line: {
                start: { x: 0, y: -500 },
                end: { x: 0, y: 10000 }
              },
              stops: [{
                color: "rgba(0, 255, 0, 0.7)",
                stop: 0
              },
                      {
                        color: "rgba(255, 0, 0, 0.7)",
                        stop: 0.5
                      }]
            }
          },
          data: data["1995"],
          radiusScale: "default"
        }]
      },
      tooltip: {
        render: function (focus) {
          var data = focus.nearestData.data;
          return {
            tag: "div",
            style: {
              background: "#FEFEFE",
              border: "solid thin black",
              color: "black",
              padding: "5px"
            },
            child: {
              tag: "table",
              style: { border: "none", margin: "0px", padding: "0px" },
              child: { tag: "tbody", child: [{
                tag: "tr",
                child: { tag: "th", child: data.l, style: { textAlign: "center", margin: "0px", padding: "3px", border: "none", borderBottom: "1px solid black" }, attr: { colspan: "2" } }
              }, {
                tag: "tr",
                child: [{ tag: "th", child: "healthcare", style: { margin: "0px", padding: "3px", border: "none" } },
                        { tag: "td", style: { margin: "0px", padding: "3px", border: "none" }, child: [{ tag: "decimal", value: data.y, format: ",###.##" }, "$"] }]
              }, {
                tag: "tr",
                child: [{ tag: "th", child: "gdp", style: { margin: "0px", padding: "3px", border: "none" } },
                        { tag: "td", style: { margin: "0px", padding: "3px", border: "none" }, child: [{ tag: "decimal", value: data.x, format: ",###.##" }, "$"] }]
              }, {
                tag: "tr",
                child: [{ tag: "th", child: "population", style: { margin: "0px", padding: "3px", border: "none" } },
                        { tag: "td", style: { margin: "0px", padding: "3px", border: "none" }, child: data.r }]
              }]
                     }
            }
          };
        }
      },
      xAxis: {
        maxWindow: {
          domain: {
            start: 370,
            end: 107000
          },
          offset: "50px"
        }
      },
      yAxis: {
        maxWindow: {
          domain: {
            start: 0,
            end: 9150
          },
          offset: "50px"
        }
      },
      layout: [{
        position: "bottom",
        component: "axis-labels"
      }, {
        position: "left",
        component: "axis-labels"
      },
               {
                 position: "inner-top",
                 halign: "left",
                 shared: true,
                 component: "toolbar"
               }, {
                 position: "top",
                 component: "scrollbar"
               }, {
                 position: "right",
                 component: "scrollbar"
               }, {
                 position: "left",
                 component: {
                   type: "label",
                   text: "Healthcare",
                   style: {
                     rotate: Math.PI / 2 * 3,
                     fontSize: "16px"
                   }
                 }
               }, {
                 position: "bottom",
                 component: {
                   type: "label",
                   text: "GDP",
                   style: {
                     fontSize: "16px"
                   }
                 }
               }, {
                 position: "bottom",
                 halign: "middle",
                 component: infobar
               },]
    });
    var series = chart.series.collection.get(0);
    ReactiveChart.reactive(function () {
      var year = select.value;
      var vals = data[year];
      if (vals) {
        for (var i = 0; i < vals.length; i++) {
          series.data.set(i, vals[i]);
        }
      }
    });
  });

Bubble chart with animated changing data