javascript - How to draw a line graph using d3.js? -

-

i new d3.js , trying graph 3 lines on same plot. i'm reading tsv file 4 columns: time, x, y, , z. accelerometer data. want plot x,y,z columns vs time can't seem it. suggestions? 

    function graph(){  // set dimensions of canvas / graph var margin = {top: 30, right: 20, bottom: 30, left: 50},     width = 600 - margin.left - margin.right,     height = 270 - margin.top - margin.bottom;  // set ranges var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]);  // define axes var xaxis = d3.svg.axis().scale(x)     .orient("bottom").ticks(5);  var yaxis = d3.svg.axis().scale(y)     .orient("left").ticks(5);  // define line var valueline = d3.svg.line()     .x(function(d) { return x(d.time); })     .y(function(d) { return y(d.x); });  var     valueline2 = d3.svg.line()         .x(function(d) { return x(d.time); })         .y(function(d) { return y(d.y); })  var     valueline3 = d3.svg.line()         .x(function(d) { return x(d.time); })         .y(function(d) { return y(d.z); });  // adds svg canvas var svg = d3.select("body")     .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 + ")");  // data d3.tsv("data/data2.tsv", function(error, data) {     data.foreach(function(d) {         d.time = +d.time;         d.x = +d.x;                 d.y = +d.y;                 d.z = +d.z;     });      // scale range of data     x.domain(d3.extent(data, function(d) { return d.time; }));     y.domain([0, d3.max(data, function(d) { return math.max(d.x, d.y, d.z); })]);      // add valueline path.     svg.append("path")      // add valueline path.         .attr("class", "line")         .attr("d", valueline(data));          svg.append("path")      // add valueline path.         .attr("class", "line")                 .style("stroke", "red")         .attr("d", valueline2(data));          svg.append("path")      // add valueline path.         .attr("class", "line")                 .style("stroke", "green")         .attr("d", valueline3(data));      // add x axis     svg.append("g")         // add x axis         .attr("class", "x axis")         .attr("transform", "translate(0," + height + ")")         .call(xaxis);      // add y axis     svg.append("g")         // add y axis         .attr("class", "y axis")         .call(yaxis);  });}

you can add each line 1 @ time canvas it's not d3 or efficient. it's better organise data in appropriate way. the main issue way data's been prepared. in example lar's pointed data nested using block of code:

var series = color.domain().map(function(name) {     return {         name: name,         values: data.map(function(d) {             return {                 time: d.time,                 score: +d[name]             };         })     }; });

and create array of 3 objects. each object has key value pair: name , array. in each array object contains time , score information plotting. last array of object passed line generator.

i've created fiddle, here, that's heavily based on example lar's has pointed , it's commented throughout. trick @ stage inspect elements , use console.log

best of luck.


Comments

Post a Comment

Popular posts from this blog

Change the color of an oval at click in Java AWT -

-
i have draw ovals in java, , @ click change color. beginning tried change color after 20 ms, doesn't work. my code is: public class mycomponentnew extends frame { public graphics2d g2d; public mycomponentnew(string title) { super(title); setsize(400, 550); } @override public void paint(graphics g) { this.g2d = (graphics2d) g; this.g2d.setcolor(color.red); this.g2d.filloval(10, 55, 50, 100); } public void changecolor () { this.g2d.setcolor(color.blue); this.g2d.filloval(10, 55, 50, 100); } } and in class main method have: mycomponentnew m; m = new mycomponentnew("fereastra cu baloane"); m.setvisible(true); m.addwindowlistener(new windowadapter() { @override public void windowclosing(windowevent we) { system.exit(0); } }); try { thread.sleep(20); } catch(interruptedexception e) {} m.changecolor(); the color of oval remains red. ...
Read more

c# - Unity IoC Lifetime per HttpRequest for UserStore -

-
i'm trying clean default implementation of accountcontroller.cs comes out of box in new mvc5/owin security implementation. have modified constructor this: private usermanager<applicationuser> usermanager; public accountcontroller(usermanager<applicationuser> usermanager) { this.usermanager = usermanager; } also, have created lifetime manager unity looks this: public class httpcontextlifetimemanager<t> : lifetimemanager, idisposable { private httpcontextbase _context = null; public httpcontextlifetimemanager() { _context = new httpcontextwrapper(httpcontext.current); } public httpcontextlifetimemanager(httpcontextbase context) { if (context == null) throw new argumentnullexception("context"); _context = context; } public void dispose() { this.removevalue(); } public override object get...
Read more

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -

-
i writing program in fortran find velocity of parachuting person in relation time. keep getting error can't fix. new programming , appreciated. the error is v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) 1 error: incompatible ranks 0 , 1 in assignment @ (1) and program is program para integer :: real :: v(11) !velocity real :: q !initial velocity real :: h !time step real :: c !drag coefficient real :: m !mass ! gravity equal 32 ft/s^2 write (*,*)'enter time step' read(*,*)h write(*,*)'enter initial velocity' read(*,*)q write(*,*)'enter drag coefficient' read(*,*)c write(*,*)'enter mass' read(*,*)m i=1,10 ! 1 10, 1 being interval. end v(i+1)=v(i)+[32-((c*v(i)*v(i))/m)]*(h) q=v(1) end program you cannot use [] normal parenthesis in expressions. array constructor, [ items ] means array items elements. end do should after line.
Read more