Geek Answers Handbook

Update d3 chart with form input

Search around the world to help with this, but do not seem to find anything close enough.

In short, I am trying to update a graph that I created using d3.js, with data from a form on the same page as the graph. That is, I am showing a bar chart with three columns and want to be able to adjust the height of the third column through simple input along with the chart. I am currently loading data through the d3 csv method, so this may not be the best way to work.

If anyone can help, I would really appreciate it! I can send the code if you want, but I decided that a general explanation could be achievable.

amuses, Allen

Here's what it looks like after I got the job:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .x.axis path { display: none; } </style> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <div id="chart"></div> <div> <form> A: <input class="fields" id="a" type="float"/> B: <input class="fields" id="b" type="float"/> C: <input class="fields" id="c" type="float"/> <input type="submit" /> </form> </div> <!--d3 code--> <script> var data = [10,50,200]; var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatPercent = d3.format(".0%"); var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") var svg = d3.select(document.getElementById("chart")).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("x", function(d, i) { return i * 200; }) .attr("width", function(d) {return 100;}) .attr("y", function(d) { return height - d;}) .attr("height", function(d) { return d; }); </script> <!--on form submit--> <script type="text/javascript"> $("form").submit(function() { var newA = document.getElementById("a").value; var newB = document.getElementById("b").value; var newC = document.getElementById("c").value; svg.selectAll("rect") .data([newA, newB, newC]) .attr("y", function(d) { return height - d;}) .attr("height", function(d) { return d; }); return false; }); </script> </body> </html>
+4
source share
1 answer

The main template is that you call the function from the onclick handler of the form, which updates the data. Thus, in your case with 3 columns, the first two data points will remain unchanged, and the third will be updated based on the input value (which you can get from the form using d3 or jquery or something like that).

Downloading source data via d3.csv should not be a problem if you use d3 selection templates - see the tutorial on circles for more details on the general idea. Thus, in your handler, you must adjust the height based on the new data, which should be the same code that you used to create the chart initially.

+3
source

More articles:


All Articles