Databases
StackOverflow2013
Postsdbo
POAnimate lines in a line graph with D3.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimate lines in a line graph with D3.js
    primarykey
    data
    text
    <p>I have my line graph, with 2 lines. Data to draw my line graph is pulled from a .csv file.</p> <p>Can anyone explain how I could start off with an empty graph, and when I click a button, my lines animate across the graph?</p> <p>Thanks in advance!!</p> <p> var button=d3.select("#button");</p> <pre><code>var margin = {top: 30, right: 20, bottom: 50, left: 60}, width = 700 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var parseDate = d3.time.format("%d-%b-%y").parse; //treats value passed to it as a time/date //OUTPUT RANGE var x = d3.time.scale() .range([0, width]); //OUTPUT RANGE var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis().scale(x) .orient("bottom") .ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left") .ticks(5); //assigns coordinates for each piece of data var valueline = d3.svg.line() .interpolate("linear") .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); //second line data var valueline2 = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.open); }); //create area for 'area' below line var area = d3.svg.area() .x(function(d) { return x(d.date); }) .y0(height) .y1(function(d) { return y(d.close); }); //creates area to draw graph var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) //groups content .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); function make_x_axis() { return d3.svg.axis() .scale(x) .orient("bottom") .ticks(5) } function make_y_axis() { return d3.svg.axis() .scale(y) .orient("left") .ticks(30) } // csv callback function d3.csv("myData2.csv", function(data) { data.forEach(function(d) { d.date = parseDate(d.date); //+ operator sets any 'close' values to nuneric d.close = +d.close; d.open = +d.open; </code></pre> <p>});</p> <pre><code>//INPUT DOMAINS //.extent() returns min and max values of argument x.domain(d3.extent(data, function(d) { return d.date; })); //returns max of whichever set of data is bigger y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open); })]); //draws lines //passes the valueline array to path object svg.append("path") // Add the valueline path. .attr("class", "line") //adds dashed line .style("stroke-dasharray", ("5, 9")) // &lt;== This line here!! .attr("d", valueline(data)); button.on("click", function() { svg.append("path") // Add the valueline2 path. .attr("class", "line2") .transition() .attr("d", valueline2(data)); }) svg.append("g") // Add the X Axis .attr("class", "x axis") //moves x axis to bottom of graph .attr("transform", "translate(0," + height + ")") .call(xAxis); //text label for x-axis svg.append("text") // text label for the x axis .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom - 5 ) + ")") .style("text-anchor", "middle") .text("Date"); svg.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis); //text label for y-axis svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x",0 - (height / 2)) //adds extra left padding as original y pos = 0 .attr("dy", "1em") .style("text-anchor", "middle") .text("Value"); //adding a title to the graph svg.append("text") .attr("x", (width / 2)) .attr("y", 0 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text("Me Graph Larry"); //draw x axis grid svg.append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .call(make_x_axis() .tickSize(-height, 0, 0) .tickFormat("") ) //draw y axis grid svg.append("g") .attr("class", "grid") .call(make_y_axis() .tickSize(-width, 0, 0) .tickFormat("") ) });&lt;!--d3.csv close--&gt; </code></pre> <p></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDaft
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAnimate lines in a line graph with D3.js
      1. USDru
      1. VTFavorite
    2. VO
      singulars
      1. POAnimate lines in a line graph with D3.js
      1. USDaft
      1. VTFavorite
    3. VO
      singulars
      1. POAnimate lines in a line graph with D3.js
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload