Skip to content

Instantly share code, notes, and snippets.

@enthal

enthal/index.html

Last active November 14, 2020 02:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save enthal/060290a72e8c29d9f160 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save enthal/060290a72e8c29d9f160 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. enthal revised this gist Nov 14, 2020. No changes.
  2. enthal revised this gist Aug 31, 2015. 1 changed file with 52 additions and 4 deletions.
    56 changes: 52 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,19 @@
    fill: none;
    pointer-events: all;
    }

    svg .guides {
    stroke-width: 1px;
    }
    svg .guides line {
    stroke: #BBC;
    shape-rendering: crispEdges;
    }
    svg .guides circle {
    fill: #BBC;
    stroke: #348;
    opacity: 0.3;
    }
    </style>

    <body></body>
    @@ -32,16 +45,34 @@
    x.domain([0, n]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    .attr("width", width)
    .attr("height", height);
    var chart = svg.append('g').classed('chart', true);

    var guides;
    effectScaledPaths(0);

    guides = chart.append("svg:g")
    .classed("guides", true);
    guides.append("svg:line")
    .attr("y1",height);
    var yGuides = guides.append("svg:g")
    yGuides.append("svg:circle")
    .attr("r",7);
    yGuides.append("svg:line")
    .attr("x1",-20)
    .attr("x2",+20);



    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemove);
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);

    mouseout();



    function pushSeries(fn) {
    @@ -53,6 +84,9 @@
    function mousemove() {
    effectScaledPaths(Math.floor(x.invert(d3.mouse(this)[0]))); // TODO: bisect when x domain isn't index?
    }
    function mouseout() {
    // guides.attr("visibility", "hidden");
    }

    var lastX0 = 0;
    function effectScaledPaths(x0) {
    @@ -80,12 +114,26 @@
    updateSel
    .attr("stroke", d3.scale.category10())
    .transition()
    .duration(70)
    .duration(90)
    .ease("linear")
    .attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );

    if (!guides) { return; }
    guides
    .attr("visibility", "visible")
    .transition()
    .duration(90)
    .ease("linear")
    .attr("transform", "translate("+(x(x0))+",0)")
    yGuides
    .transition()
    .duration(90)
    .ease("linear")
    .attr("transform", "translate(0,"+y(1)+")")

    }

    </script>
  3. enthal revised this gist Aug 30, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>series normalization per mouse-x (in d3.js)</title>
    <style>
    svg .chart {
    fill: none;
    @@ -10,8 +10,8 @@
    fill: none;
    pointer-events: all;
    }

    </style>

    <body></body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  4. enthal revised this gist Aug 12, 2015. No changes.
  5. enthal revised this gist Aug 12, 2015. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -63,16 +63,14 @@
    */

    if (x0 === lastX0) { return; }
    lastX0 = x0
    lastX0 = x0;

    var ss = seriesList.slice();
    var extents = [];
    for (var ssi in ss) {
    var s = ss[ssi] = ss[ssi].slice();
    var factor = 1.0 / s[x0]; // but nothing is proportional to a value of 0
    for (var si in s) {
    s[si] *= factor;
    }
    for (var si in s) { s[si] *= factor; }
    extents.push(d3.extent(s));
    }
    y.domain(d3.extent(d3.merge(extents)));
  6. enthal revised this gist Aug 12, 2015. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,6 @@
    .attr("height", height)
    .on("mousemove", mousemove);

    // var lastX0;

    function pushSeries(fn) {
    var s = [];
    @@ -55,13 +54,17 @@
    effectScaledPaths(Math.floor(x.invert(d3.mouse(this)[0]))); // TODO: bisect when x domain isn't index?
    }

    var lastX0 = 0;
    function effectScaledPaths(x0) {
    /*
    Scale each series to be proportional to its value at x0,
    such that all series cross at some single point at mouse.x,
    setting y.domain to extent of extents of all so-scaled series (i.e., global max,min).
    */

    if (x0 === lastX0) { return; }
    lastX0 = x0

    var ss = seriesList.slice();
    var extents = [];
    for (var ssi in ss) {
  7. enthal revised this gist Aug 12, 2015. 1 changed file with 11 additions and 6 deletions.
    17 changes: 11 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,12 +17,11 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script>

    var n=100, seriesList = [[],[],[]];
    // for (var i=0;i<n;i++) { seriesList[0].push(Math.pow(2,i)); }
    for (var i=0;i<n;i++) { seriesList[0].push(Math.sin(i*Math.PI/(n*0.2))+2); }
    for (var i=0;i<n;i++) { seriesList[1].push(Math.cos(i*Math.PI/(n*0.3))+2); }
    for (var i=0;i<n;i++) { seriesList[2].push(i/n+1); }
    // for (var i=0;i<n;i++) { seriesList[3].push(2); }
    var n=100, seriesList = [];
    pushSeries(function(i) { return Math.sin(i*Math.PI/(n*0.2))+2; });
    pushSeries(function(i) { return Math.cos(i*Math.PI/(n*0.3))+2; });
    pushSeries(function(i) { return Math.cos(i*Math.PI/(n*0.15))/2+3*i/n+2; });
    pushSeries(function(i) { return Math.pow(i/n,1.8)+1; });

    var width = 960,
    height = 500;
    @@ -46,6 +45,12 @@

    // var lastX0;

    function pushSeries(fn) {
    var s = [];
    seriesList.push(s);
    for (var i=0;i<n;i++) { s.push(fn(i)); }
    }

    function mousemove() {
    effectScaledPaths(Math.floor(x.invert(d3.mouse(this)[0]))); // TODO: bisect when x domain isn't index?
    }
  8. enthal revised this gist Aug 12, 2015. 1 changed file with 7 additions and 4 deletions.
    11 changes: 7 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -73,10 +73,13 @@
    updateSel.enter().append('path').classed('series', true)
    updateSel
    .attr("stroke", d3.scale.category10())
    .attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );
    .transition()
    .duration(70)
    .ease("linear")
    .attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );
    }

    </script>
  9. enthal revised this gist Aug 11, 2015. 1 changed file with 7 additions and 19 deletions.
    26 changes: 7 additions & 19 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,16 +30,14 @@
    var x = d3.scale.linear().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);
    var series = seriesList[0];
    x.domain([0, series.length]);
    // y.domain(d3.extent(series));
    y.domain([0,3]);
    x.domain([0, n]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    var chart = svg.append('g').classed('chart', true);

    doSeriesPaths(seriesList);
    effectScaledPaths(0);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    @@ -49,18 +47,15 @@
    // var lastX0;

    function mousemove() {
    var x0 = Math.floor(x.invert(d3.mouse(this)[0])); // TODO: bisect when x domain isn't index?
    var y0 = Math.floor(y.invert(d3.mouse(this)[1]));
    // console.log(x0,y0);
    effectScaledPaths(Math.floor(x.invert(d3.mouse(this)[0]))); // TODO: bisect when x domain isn't index?
    }

    function effectScaledPaths(x0) {
    /*
    Scale each series to be proportional to its value at x0,
    such that all series cross at some single point at mouse.x,
    setting y.domain to extent of extents of all so-scaled series (i.e., global max,min).
    */
    var ysAtX0 = seriesList.map(function(series) {
    return series[x0];
    });
    console.log('****', x0,y0,ysAtX0);

    var ss = seriesList.slice();
    var extents = [];
    @@ -71,17 +66,10 @@
    s[si] *= factor;
    }
    extents.push(d3.extent(s));
    // console.log(s, factor);
    console.log(d3.extent(s), factor);
    }
    y.domain(d3.extent(d3.merge(extents)));
    console.log(y.domain());

    doSeriesPaths(ss);
    }

    function doSeriesPaths(seriess) {
    var updateSel = chart.selectAll('path.series').data(seriess);
    var updateSel = chart.selectAll('path.series').data(ss);
    updateSel.enter().append('path').classed('series', true)
    updateSel
    .attr("stroke", d3.scale.category10())
  10. enthal revised this gist Aug 11, 2015. 1 changed file with 6 additions and 9 deletions.
    15 changes: 6 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,13 +39,7 @@
    .attr("height", height);
    var chart = svg.append('g').classed('chart', true);

    chart.selectAll('path.series')
    .data(seriesList)
    .enter().append('path').classed('series', true)
    .attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );
    doSeriesPaths(seriesList);

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    @@ -83,15 +77,18 @@
    y.domain(d3.extent(d3.merge(extents)));
    console.log(y.domain());

    var updateSel = chart.selectAll('path.series').data(ss);
    doSeriesPaths(ss);
    }

    function doSeriesPaths(seriess) {
    var updateSel = chart.selectAll('path.series').data(seriess);
    updateSel.enter().append('path').classed('series', true)
    updateSel
    .attr("stroke", d3.scale.category10())
    .attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );

    }

    </script>
  11. enthal revised this gist Aug 11, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -70,10 +70,10 @@

    var ss = seriesList.slice();
    var extents = [];
    for (var ssi=0; ssi<ss.length; ssi++) {
    for (var ssi in ss) {
    var s = ss[ssi] = ss[ssi].slice();
    var factor = 1.0 / s[x0]; // but nothing is proportional to a value of 0
    for (var si=0; si<s.length; si++) {
    for (var si in s) {
    s[si] *= factor;
    }
    extents.push(d3.extent(s));
  12. enthal revised this gist Aug 11, 2015. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    svg .chart {
    fill: none;
    stroke: #000;
    stroke-width: 0.5px;
    stroke-width: 2px;
    }
    svg rect.mouse {
    fill: none;
    @@ -85,10 +85,12 @@

    var updateSel = chart.selectAll('path.series').data(ss);
    updateSel.enter().append('path').classed('series', true)
    updateSel.attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );
    updateSel
    .attr("stroke", d3.scale.category10())
    .attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );

    }

  13. enthal revised this gist Aug 11, 2015. 1 changed file with 14 additions and 4 deletions.
    18 changes: 14 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,10 +17,12 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script>

    var n=15, seriesList = [[],[]];
    var n=100, seriesList = [[],[],[]];
    // for (var i=0;i<n;i++) { seriesList[0].push(Math.pow(2,i)); }
    for (var i=0;i<n;i++) { seriesList[0].push(Math.sin(i)+2); }
    for (var i=0;i<n;i++) { seriesList[1].push(i/10+1); }
    for (var i=0;i<n;i++) { seriesList[0].push(Math.sin(i*Math.PI/(n*0.2))+2); }
    for (var i=0;i<n;i++) { seriesList[1].push(Math.cos(i*Math.PI/(n*0.3))+2); }
    for (var i=0;i<n;i++) { seriesList[2].push(i/n+1); }
    // for (var i=0;i<n;i++) { seriesList[3].push(2); }

    var width = 960,
    height = 500;
    @@ -41,7 +43,7 @@
    .data(seriesList)
    .enter().append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );

    @@ -80,6 +82,14 @@
    }
    y.domain(d3.extent(d3.merge(extents)));
    console.log(y.domain());

    var updateSel = chart.selectAll('path.series').data(ss);
    updateSel.enter().append('path').classed('series', true)
    updateSel.attr('d', d3.svg.line()
    // .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );

    }

    </script>
  14. enthal revised this gist Aug 11, 2015. 1 changed file with 15 additions and 9 deletions.
    24 changes: 15 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,8 +18,9 @@
    <script>

    var n=15, seriesList = [[],[]];
    for (var i=0;i<n;i++) { seriesList[0].push(Math.pow(2,i)); }
    for (var i=0;i<n;i++) { seriesList[1].push(i); }
    // for (var i=0;i<n;i++) { seriesList[0].push(Math.pow(2,i)); }
    for (var i=0;i<n;i++) { seriesList[0].push(Math.sin(i)+2); }
    for (var i=0;i<n;i++) { seriesList[1].push(i/10+1); }

    var width = 960,
    height = 500;
    @@ -28,7 +29,8 @@
    var y = d3.scale.linear().range([height, 0]);
    var series = seriesList[0];
    x.domain([0, series.length]);
    y.domain(d3.extent(series));
    // y.domain(d3.extent(series));
    y.domain([0,3]);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    @@ -55,25 +57,29 @@
    var y0 = Math.floor(y.invert(d3.mouse(this)[1]));
    // console.log(x0,y0);
    /*
    Scale each series to be proportional to its value at x0
    Scale each series to be proportional to its value at x0,
    such that all series cross at some single point at mouse.x,
    TODO setting y.domain to extent of extents all so-scaled series (i.e., global max,min).
    setting y.domain to extent of extents of all so-scaled series (i.e., global max,min).
    */
    var ysAtX0 = seriesList.map(function(series) {
    return series[x0];
    });
    console.log(x0,y0,ysAtX0);
    console.log('****', x0,y0,ysAtX0);

    var ss = seriesList.slice();
    var extents = [];
    for (var ssi=0; ssi<ss.length; ssi++) {
    var s = ss[ssi] = ss[ssi].slice();
    var factor = 1.0 / s[x0];
    var factor = 1.0 / s[x0]; // but nothing is proportional to a value of 0
    for (var si=0; si<s.length; si++) {
    s[si] *= factor;
    }
    console.log(s, factor);
    extents.push(d3.extent(s));
    // console.log(s, factor);
    console.log(d3.extent(s), factor);
    }

    y.domain(d3.extent(d3.merge(extents)));
    console.log(y.domain());
    }

    </script>
  15. enthal revised this gist Aug 10, 2015. No changes.
  16. enthal revised this gist Aug 10, 2015. 1 changed file with 26 additions and 4 deletions.
    30 changes: 26 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@

    var n=15, seriesList = [[],[]];
    for (var i=0;i<n;i++) { seriesList[0].push(Math.pow(2,i)); }
    for (var i=0;i<n;i++) { seriesList[1].push(Math.pow(2,n) / (i+1)); }
    for (var i=0;i<n;i++) { seriesList[1].push(i); }

    var width = 960,
    height = 500;
    @@ -48,10 +48,32 @@
    .attr("height", height)
    .on("mousemove", mousemove);

    // var lastX0;

    function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]);
    var y0 = y.invert(d3.mouse(this)[1]);
    console.log(x0,y0);
    var x0 = Math.floor(x.invert(d3.mouse(this)[0])); // TODO: bisect when x domain isn't index?
    var y0 = Math.floor(y.invert(d3.mouse(this)[1]));
    // console.log(x0,y0);
    /*
    Scale each series to be proportional to its value at x0
    such that all series cross at some single point at mouse.x,
    TODO setting y.domain to extent of extents all so-scaled series (i.e., global max,min).
    */
    var ysAtX0 = seriesList.map(function(series) {
    return series[x0];
    });
    console.log(x0,y0,ysAtX0);

    var ss = seriesList.slice();
    for (var ssi=0; ssi<ss.length; ssi++) {
    var s = ss[ssi] = ss[ssi].slice();
    var factor = 1.0 / s[x0];
    for (var si=0; si<s.length; si++) {
    s[si] *= factor;
    }
    console.log(s, factor);
    }

    }

    </script>
  17. enthal revised this gist Aug 10, 2015. No changes.
  18. enthal revised this gist Aug 10, 2015. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,11 @@
    stroke: #000;
    stroke-width: 0.5px;
    }
    svg rect.mouse {
    fill: none;
    pointer-events: all;
    }

    </style>
    <body></body>

    @@ -38,4 +43,15 @@
    .x(function(d,i) { return x(i); })
    .y(y) );

    svg.append("rect").classed("mouse", true)
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemove);

    function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]);
    var y0 = y.invert(d3.mouse(this)[1]);
    console.log(x0,y0);
    }

    </script>
  19. enthal revised this gist Aug 4, 2015. 1 changed file with 7 additions and 16 deletions.
    23 changes: 7 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,21 +30,12 @@
    .attr("height", height);
    var chart = svg.append('g').classed('chart', true);

    console.log(seriesList);
    chart
    .append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y)
    (seriesList[0]) );

    chart
    .append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y)
    (seriesList[1]) );
    chart.selectAll('path.series')
    .data(seriesList)
    .enter().append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y) );

    </script>
  20. enthal revised this gist Aug 3, 2015. 1 changed file with 15 additions and 4 deletions.
    19 changes: 15 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,14 +12,16 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script>

    var series = [];
    for (var i=0;i<15;i++) { series.push(Math.pow(2,i)); }
    var n=15, seriesList = [[],[]];
    for (var i=0;i<n;i++) { seriesList[0].push(Math.pow(2,i)); }
    for (var i=0;i<n;i++) { seriesList[1].push(Math.pow(2,n) / (i+1)); }

    var width = 960,
    height = 500;

    var x = d3.scale.linear().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);
    var series = seriesList[0];
    x.domain([0, series.length]);
    y.domain(d3.extent(series));

    @@ -28,12 +30,21 @@
    .attr("height", height);
    var chart = svg.append('g').classed('chart', true);

    console.log(seriesList);
    chart
    .append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); })
    (series) );
    .y(y)
    (seriesList[0]) );

    chart
    .append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(y)
    (seriesList[1]) );

    </script>
  21. enthal revised this gist Aug 3, 2015. 1 changed file with 26 additions and 3 deletions.
    29 changes: 26 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,39 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    svg .chart {
    fill: none;
    stroke: #000;
    stroke-width: 0.5px;
    }
    </style>
    <body></body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script>

    var series = [];
    for (var i=0;i<15;i++) { series.push(Math.pow(2,i)); }

    var width = 960,
    height = 500;


    var x = d3.scale.linear().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);
    x.domain([0, series.length]);
    y.domain(d3.extent(series));

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    var chart = svg.append('g').classed('chart', true);

    chart
    .append('path').classed('series', true)
    .attr('d', d3.svg.line()
    .interpolate('basis')
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); })
    (series) );

    </script>
    </script>
  22. enthal created this gist Aug 3, 2015.
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var width = 960,
    height = 500;

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    </script>