¿Cómo crear charts de viñetas de JSONArrays en JavaScript?

¡Ayuda! Cómo cambiar el código JavaScript de Bullet Charts desde esta página web: http://mbostock.github.com/d3/ex/bullet.html de tal manera que los datos para la visualización no se tomarán de "bullets.json" (d3.json ("bullets.json", function (data) {), pero ya sería una variable en el código fuente. Mi solución no funciona:

var data = [{title: "Revenue", subtitle: "", ranges: [0,0,0], measures: [220,270], markers: [0] }, //!!! {title: "Profit" , subtitle: "", ranges: [0,0,0], measures: [21,23] , markers: [0] } ]; 

Código fuente:

 <html> <head> <title>Bullet Charts</title> <script type="text/javascript" src="../../d3.js"></script> <script type="text/javascript" src="../../d3.chart.js"></script> <link type="text/css" rel="stylesheet" href="../button.css"/> <link type="text/css" rel="stylesheet" href="bullet.css"/> </head> <body> <div id="chart"> <button class="first last" onclick="transition()"> Update </button><p> </div> <script> var w = 960, h = 50, m = [5, 40, 20, 120]; // top right bottom left var chart = d3.chart.bullet() .width(w - m[1] - m[3]) .height(h - m[0] - m[2]); //d3.json("bullets.json", function(data) { var data = [{title: "Revenue", subtitle: "", ranges: [0,0,0], measures: [220,270], markers: [0] }, //!!! {title: "Profit" , subtitle: "", ranges: [0,0,0], measures: [21,23] , markers: [0] } ]; //!!! var vis = d3.select("#chart").selectAll("svg") .data(data) .enter().append("svg:svg") .attr("class", "bullet") .attr("width", w) .attr("height", h) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")") .call(chart); var title = vis.append("svg:g") .attr("text-anchor", "end") .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")"); title.append("svg:text") .attr("class", "title") .text(function(d) { return d.title; }); title.append("svg:text") .attr("class", "subtitle") .attr("dy", "1em") .text(function(d) { return d.subtitle; }); chart.duration(1000); window.transition = function() { vis.map(randomize).call(chart); }; } ); function randomize(d) { if (!d.randomizer) d.randomizer = randomizer(d); d.ranges = d.ranges.map(d.randomizer); d.markers = d.markers.map(d.randomizer); d.measures = d.measures.map(d.randomizer); return d; } function randomizer(d) { var k = d3.max(d.ranges) * .2; return function(d) { return Math.max(0, d + k * (Math.random() - .5)); }; } </script> </body> </html> 

después de var data = [{title: "(…) type:

 data = JSON.stringify(data); 
 var Data='${datafrom}'; Json= JSON.parse(Data); var chart = d3.bullet() .width(width) .height(height); var svg = d3.select("body").selectAll("svg") .data(Json) .enter().append("svg") .attr("class", "bullet") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(chart); });