javascript - D3: Spiral plot -


can me implementing spiral chart similar 1 using d3.js? https://en.wikipedia.org/wiki/file:condegram_spiral_plot.png

i've got basic spiral plot (a simple one) of not been able append bars plot based on timeline shown in image. i'm trying out few things (if see commented code).

https://jsfiddle.net/6bhdqqrf/1/

      var width = 400,       height = 430,       axes = 12,       tick_axis = 9,       start = 0,       end = 2.25;    var theta = function(r) {       return 2 * math.pi * r;   };    var angle = d3.scale.linear()       .domain([0, axes]).range([0, 360])    var r = d3.min([width, height]) / 2 - 40;   var r2 = r;    var radius = d3.scale.linear()       .domain([start, end])       .range([0, r]);    var svg = d3.select("#chart").append("svg")       .attr("width", width)       .attr("height", height)       .append("g")       .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 8) + ")");    var points = d3.range(start, end + 0.001, (end - start) / 1000);    var spiral = d3.svg.line.radial()       .interpolate("cardinal")       .angle(theta)       .radius(radius);    var path = svg.selectall(".spiral")       .data([points])       .enter().append("path")       .attr("class", "spiral")       .attr("d", spiral)     var z = d3.scale.category20();    var circles = svg.selectall('.circle')       .data(points);    /*  circles.enter().append('circle')               .attr('r', 5)           .attr('transform', function(d) { return 'translate(' + d + ')'})           .style('fill', function(d) { return z(d); });        */    var circle = svg.append("circle")       .attr("r", 13)       .attr("transform", "translate(" + points[0] + ")");    var movingcircle = circle.transition().duration(4000)       .attrtween('transform', translatealongpath(path.node()))       //            .attr('cx', function(d) { return radius(d) * math.cos(theta(d))})       //        .attr('cy', function(d) { return radius(d) * math.sin(theta(d))})     function translatealongpath(path) {       var l = path.gettotallength();       return function(d, i, a) {           return function(t) {                var p = path.getpointatlength(t * l);               //console.log(p)               return "translate(" + p.x + "," + p.y + ")";           };       };   }    function pathxy(path) {       var l = path.gettotallength();       var start = 0;        /*  for(i=start; i<l; i++) {           var point = path.getpointatlength(i);           svg.append('rect').transition().duration(400).attr('transform', 'translate(' + point.x +','+point.y+')')           .attr('width', 10).attr('height', 30).style('fill', z);         }*/   }   pathxy(path.node());    /*var test = translatealongpath(path.node())()();   //console.log(test)   var bars = svg.selectall('.bar')       .data(points).enter().append('rect').transition().duration(2000)   //  .attrtween('transform', translatealongpath(path.node()))     .attr('class', 'bar')     .attr('width', 10)     .attr('height', 20)     .style('fill', function(d) { return z(d)});   */   var rect = svg.append('rect').attr('width', 10).attr('height', 10);   rect.transition().duration(3400)       .attrtween('transform', translatealongpath(path.node()));

it'd great have few similar examples (i.e. spiral timeline plot).

thanks.

glad came , updated question, because interesting one. here's running minimal implementation. i've commented ok, let me know if have questions...

<!doctype html>  <html>    <head>    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.js"></script>  </head>    <body>    <div id="chart"></div>    <script>      var width = 500,        height = 500,        start = 0,        end = 2.25,        numspirals = 4;        var theta = function(r) {        return numspirals * math.pi * r;      };        var r = d3.min([width, height]) / 2 - 40;        var radius = d3.scalelinear()        .domain([start, end])        .range([40, r]);        var svg = d3.select("#chart").append("svg")        .attr("width", width)        .attr("height", height)        .append("g")        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");        // create spiral, borrowed http://bl.ocks.org/syntagmatic/3543186      var points = d3.range(start, end + 0.001, (end - start) / 1000);        var spiral = d3.radialline()        .curve(d3.curvecardinal)        .angle(theta)        .radius(radius);        var path = svg.append("path")        .datum(points)        .attr("id", "spiral")        .attr("d", spiral)        .style("fill", "none")        .style("stroke", "steelblue");        // fudge data, 2 years of data starting today      var spirallength = path.node().gettotallength(),          n = 730,          barwidth = (spirallength / n) - 1;      var somedata = [];      (var = 0; < n; i++) {        var currentdate = new date();        currentdate.setdate(currentdate.getdate() + i);        somedata.push({          date: currentdate,          value: math.random()        });      }            // here's our time scale that'll run along spiral      var timescale = d3.scaletime()        .domain(d3.extent(somedata, function(d){          return d.date;        }))        .range([0, spirallength]);            // yscale bar height      var yscale = d3.scalelinear()        .domain([0, d3.max(somedata, function(d){          return d.value;        })])        .range([0, (r / numspirals) - 30]);        // append our rects      svg.selectall("rect")        .data(somedata)        .enter()        .append("rect")        .attr("x", function(d,i){                    // placement calculations          var lineper = timescale(d.date),              posonline = path.node().getpointatlength(lineper),              angleonline = path.node().getpointatlength(lineper - barwidth);                  d.lineper = lineper; // % distance on spiral          d.x = posonline.x; // x postion on spiral          d.y = posonline.y; // y position on spiral                    d.a = (math.atan2(angleonline.y, angleonline.x) * 180 / math.pi) - 90; //angle @ spiral position            return d.x;        })        .attr("y", function(d){          return d.y;        })        .attr("width", function(d){          return barwidth;        })        .attr("height", function(d){          return yscale(d.value);        })        .style("fill", "steelblue")        .style("stroke", "none")        .attr("transform", function(d){          return "rotate(" + d.a + "," + d.x  + "," + d.y + ")"; // rotate bar        });            // add date labels      var tf = d3.timeformat("%b %y"),          firstinmonth = {};      svg.selectall("text")        .data(somedata)        .enter()        .append("text")        .attr("dy", 10)        .style("text-anchor", "start")        .style("font", "10px arial")        .append("textpath")        // add first of each month        .filter(function(d){          var sd = tf(d.date);          if (!firstinmonth[sd]){            firstinmonth[sd] = 1;            return true;          }          return false;        })        .text(function(d){          return tf(d.date);        })        // place text along spiral        .attr("xlink:href", "#spiral")        .style("fill", "grey")        .attr("startoffset", function(d){          return ((d.lineper / spirallength) * 100) + "%";        })      </script>  </body>    </html>


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more