Multi-series line charts (comparison of libraries)

binomial.js

// calculates exact binomial confidence intervals (4 decimal digits)
// http://statpages.org/confint.html

function CalcBinL(x,N,vTL,vTU) {
    vTL = typeof vTL !== 'undefined' ? vTL : 0.25;
    vTU = typeof vTU !== 'undefined' ? vTU : 0.25;
    var vx = x
    var vN = N
    var vP = vx/vN
    P= vP
    if(vx==0)
	{ DL = 0 } else
        { var v=vP/2; vsL=0; vsH=vP; var p=vTL
        while((vsH-vsL)>1e-5) { if(BinP(vN,v,vx,vN)>p) { vsH=v; v=(vsL+v)/2 } else { vsL=v; v=(v+vsH)/2 } }
        DL = v }

    return DL  
}

function CalcBinU(x,N,vTL,vTU) {
    vTL = typeof vTL !== 'undefined' ? vTL : 0.25;
    vTU = typeof vTU !== 'undefined' ? vTU : 0.25;
    var vx = x
    var vN = N
    var vP = vx/vN
    P= vP
    if(vx==vN)
        { DU = 1 } else
        { var v=(1+vP)/2; vsL=vP; vsH=1; var p=vTU
        while((vsH-vsL)>1e-5) { if(BinP(vN,v,0,vx)<p) { vsH=v; v=(vsL+v)/2 } else { vsL=v; v=(v+vsH)/2 } }
        DU = v }
    return DU
}
        
function BinP(N,p,x1,x2) {
    var q=p/(1-p); var k=0; var v = 1; var s=0; var tot=0
    while(k<=N) {
        tot=tot+v
        if(k>=x1 & k<=x2) { s=s+v }
        if(tot>1e30){s=s/1e30; tot=tot/1e30; v=v/1e30}
        k=k+1; v=v*q*(N+1-k)/k
        }
    return s/tot
    }

function Fmt(x) { 
var v
if(x>=0) { v=''+(x+0.00005) } else { v=''+(x-0.00005) }
return v.substring(0,v.indexOf('.')+5)
}

d3.chart.base.min.js

/*! d3.chart.base - v0.4.0
 *  License: MIT Expat
 *  Date: 2013-10-15
 */
(function(t){function e(t){var e,i=this.base[0][0];return window.getComputedStyle?e=window.getComputedStyle(i):i.currentStyle&&(e=i.currentStyle),t?e[t]:e}function i(t,i,s){var r=n(e.call(this,i));null===r||0===r||""===r?(this[t]=s,this.base.style(i,s)):this[t]=n(e.call(this,i))}function s(t,e,i){var s,r,h,n,a;return function(){h=this,r=arguments,n=new Date;var o=function(){var l=new Date-n;e>l?s=setTimeout(o,e-l):(s=null,i||(a=t.apply(h,r)))},l=i&&!s;return s||(s=setTimeout(o,e)),l&&(a=t.apply(h,r)),a}}function r(){var t=this._currentMode;if(this._currentMode=null,"modes"in this){var e=!1;for(var i in this._modes)if(e=this._modes[i].call(this)){this._currentMode=i;break}}return t!==this._currentMode}function h(){var t=this;for(var e in t._layersArguments){var i=t._layersArguments[e];if(-1===i.options.modes.indexOf(t.mode())){if(i.showing===!0){var s=t.unlayer(e);s.style("display","none"),t._layersArguments[e].showing=!1,t._layersArguments[e].layer=s}}else t._layersArguments[e].showing===!1&&(null!==t._layersArguments[e].layer?(o.call(t,e,t._layersArguments[e].layer),t._layersArguments[e].layer.style("display","inline")):o.call(t,t._layersArguments[e].name,t._layersArguments[e].selection,t._layersArguments[e].options),t._layersArguments[e].showing=!0)}}var n=function(){var t=/px$/;return function(e){return t.test(e)?+e.replace(t,""):e}}(),a=t.chart("BaseChart",{initialize:function(){var t=this;this._layersArguments={},this._modes=this.modes||{},delete this.modes,this._modeLayers={},r.call(this),t._width=n(e.call(t,"width"))||200,t._height=n(e.call(t,"height"))||200,i.call(this,"_width","width",200),i.call(this,"_height","height",200),window.addEventListener("resize",s(function(){t.trigger("resize"),isNaN(t._width)||t.width(n(e.call(t,"width"))||200,{noDraw:!0}),isNaN(t._height)||t.height(n(e.call(t,"height"))||200,{noDraw:!0});var i=r.call(t);i&&t.trigger("change:mode",this._currentMode),t.data&&t.draw(t.data)},150)),window.addEventListener("orientationchange",function(){t.trigger("change:mode",this._currentMode),t.data&&t.draw(t.data)},!1),t.on("change:mode",function(){h.call(t)})},mode:function(){return this._currentMode},recomputeMode:function(){var t=r.call(this);return t&&this.trigger("change:mode",this._currentMode),t},width:function(t,i){if(i=i||{},0===arguments.length)return this._width&&!isNaN(+this._width)?this._width:n(e.call(this,"width"));var s=this._width;return this._width=t,this._width!==s&&(this.base.style("width",isNaN(this._width)?this._width:this._width+"px"),i.silent||this.trigger("change:width",this._width,s),this.data&&!i.noDraw&&this.draw(this.data)),this},height:function(t,i){if(i=i||{},0===arguments.length)return this._height&&!isNaN(+this._height)?this._height:n(e.call(this,"height"));var s=this._height;return this._height=t,this._height!==s&&(this.base.style("height",isNaN(this._height)?this._height:this._height+"px"),i.silent||this.trigger("change:height",this._height,s),this.data&&!i.noDraw&&this.draw(this.data)),this}}),o=a.prototype.layer;a.prototype.layer=function(t,e,i){var s=this;if(1===arguments.length)return o.call(this,t);s._layersArguments[t]={name:t,selection:e,options:i,showing:!1,layer:null};var r;if((i.modes===void 0||"modes"in i&&i.modes.indexOf(s.mode())>-1)&&(r=o.call(this,t,e,i),s._layersArguments[t].showing=!0,s._layersArguments[t].layer=r),"modes"in i)r&&(r._modes=i.modes),i.modes.forEach(function(e){if(!(e in s._modes))throw Error("Mode "+e+" is not defined");s._modeLayers[e]=s._modeLayers[e]||[],s._modeLayers[e].push(t)});else if(s._modes){var h=Object.keys(s._modes);r&&(r._modes=h),h.forEach(function(e){s._modeLayers[e]=s._modeLayers[e]||[],s._modeLayers[e].push(t)}),s._layersArguments[t].showing=!0,s._layersArguments[t].layer=r}return r}})(window.d3);

d3.chart.lines.js

d3.chart("Sizes").extend("Circles", {
  initialize: function() {
    // create a base scale we will use later.
    this.xScale = d3.scale.linear();

    var circlesBase = this.base.append("g")
        .classed("circles", true)
        .attr("height", function() {
          return this.h;
        })
        .attr("width", this.w);

    this.layer("circles", circlesBase, {
      dataBind: function(data) {
        var chart = this.chart();

        // update the domain of the xScale since it depends on the data
        chart.xScale.domain(d3.extent(data));

        // return a data bound selection for the passed in data.
        return this.selectAll("circle")
          .data(data);

      },
      insert: function() {
        var chart = this.chart();

        // update the range of the xScale (account for radius width)
        // on either side
        chart.xScale.range([chart.r, chart.w - chart.r]);

        // setup the elements that were just created
        return this.append("circle")
          .classed("circle", true)
          .style("fill", "red")
          .attr("cy", chart.h/2)
          .attr("r", chart.r);
      },

      // setup an enter event for the data as it comes in:
      events: {
        "enter" : function() {
          var chart = this.chart();

          // position newly entering elements
          return this.attr("cx", function(d) {
            return chart.xScale(d);
          });
        }
      }
    });
  },


  // configures the radius of the circles in the chart.
  // when called without arguments, returns the
  // current radius.
  radius: function(newRadius) {
   if (arguments.length === 0) {
      return this.r;
    }
    this.r = newRadius;
    return this;
  }  
});

d3.chart.min.js

/*! d3.chart - v0.2.1
 *  License: MIT Expat
 *  Date: 2014-06-24
 */
(function(t){"use strict";function e(t){var e,r,n,i;if(!t)return t;for(r=arguments.length,e=1;r>e;e++)if(n=arguments[e])for(i in n)t[i]=n[i];return t}var r=t.d3,n=Object.hasOwnProperty,i=function(t,e){if(!t)throw Error("[d3.chart] "+e)};i(r,"d3.js is required"),i("string"==typeof r.version&&r.version.match(/^3/),"d3.js version 3 is required");var a=/^(enter|update|merge|exit)(:transition)?$/,s=function(t){i(t,"Layers must be initialized with a base."),this._base=t,this._handlers={}};s.prototype.dataBind=function(){i(!1,"Layers must specify a `dataBind` method.")},s.prototype.insert=function(){i(!1,"Layers must specify an `insert` method.")},s.prototype.on=function(t,e,r){return r=r||{},i(a.test(t),"Unrecognized lifecycle event name specified to `Layer#on`: '"+t+"'."),t in this._handlers||(this._handlers[t]=[]),this._handlers[t].push({callback:e,chart:r.chart||null}),this._base},s.prototype.off=function(t,e){var r,n=this._handlers[t];if(i(a.test(t),"Unrecognized lifecycle event name specified to `Layer#off`: '"+t+"'."),!n)return this._base;if(1===arguments.length)return n.length=0,this._base;for(r=n.length-1;r>-1;--r)n[r].callback===e&&n.splice(r,1);return this._base},s.prototype.draw=function(t){var e,n,a,s,o,h,c,l;e=this.dataBind.call(this._base,t),i(e&&e.call===r.selection.prototype.call,"Invalid selection defined by `Layer#dataBind` method."),i(e.enter,"Layer selection not properly bound."),n=e.enter(),n._chart=this._base._chart,a=[{name:"update",selection:e},{name:"enter",selection:this.insert.bind(n)},{name:"merge",selection:e},{name:"exit",selection:e.exit.bind(e)}];for(var u=0,p=a.length;p>u;++u)if(h=a[u].name,s=a[u].selection,"function"==typeof s&&(s=s()),!s.empty()){if(i(s&&s.call===r.selection.prototype.call,"Invalid selection defined for '"+h+"' lifecycle event."),o=this._handlers[h])for(c=0,l=o.length;l>c;++c)s._chart=o[c].chart||this._base._chart,s.call(o[c].callback);if(o=this._handlers[h+":transition"],o&&o.length)for(s=s.transition(),c=0,l=o.length;l>c;++c)s._chart=o[c].chart||this._base._chart,s.call(o[c].callback)}},r.selection.prototype.layer=function(t){var e,r=new s(this);if(r.dataBind=t.dataBind,r.insert=t.insert,"events"in t)for(e in t.events)r.on(e,t.events[e]);return this.on=function(){return r.on.apply(r,arguments)},this.off=function(){return r.off.apply(r,arguments)},this.draw=function(){return r.draw.apply(r,arguments)},this};var o=function(t,e){var r=this.constructor,i=r.__super__;i&&o.call(i,t,e),n.call(r.prototype,"initialize")&&this.initialize.apply(t,e)},h=function(t,e){var r=this.constructor,i=r.__super__;return this===t&&n.call(this,"transform")&&(e=this.transform(e)),n.call(r.prototype,"transform")&&(e=r.prototype.transform.call(t,e)),i&&(e=h.call(i,t,e)),e},c=function(t,e){this.base=t,this._layers={},this._attached={},this._events={},e&&e.transform&&(this.transform=e.transform),o.call(this,this,[e])};c.prototype.initialize=function(){},c.prototype.unlayer=function(t){var e=this.layer(t);return delete this._layers[t],delete e._chart,e},c.prototype.layer=function(t,e,r){var n;if(1===arguments.length)return this._layers[t];if(2===arguments.length){if("function"==typeof e.draw)return e._chart=this,this._layers[t]=e,this._layers[t];i(!1,"When reattaching a layer, the second argument must be a d3.chart layer")}return n=e.layer(r),this._layers[t]=n,e._chart=this,n},c.prototype.attach=function(t,e){return 1===arguments.length?this._attached[t]:(this._attached[t]=e,e)},c.prototype.draw=function(t){var e,r,n;t=h.call(this,this,t);for(e in this._layers)this._layers[e].draw(t);for(r in this._attached)n=this.demux?this.demux(r,t):t,this._attached[r].draw(n)},c.prototype.on=function(t,e,r){var n=this._events[t]||(this._events[t]=[]);return n.push({callback:e,context:r||this,_chart:this}),this},c.prototype.once=function(t,e,r){var n=this,i=function(){n.off(t,i),e.apply(this,arguments)};return this.on(t,i,r)},c.prototype.off=function(t,e,r){var n,i,a,s,o,h;if(0===arguments.length){for(t in this._events)this._events[t].length=0;return this}if(1===arguments.length)return a=this._events[t],a&&(a.length=0),this;for(n=t?[t]:Object.keys(this._events),o=0;n.length>o;o++)for(i=n[o],a=this._events[i],h=a.length;h--;)s=a[h],(e&&e===s.callback||r&&r===s.context)&&a.splice(h,1);return this},c.prototype.trigger=function(t){var e,r,n=Array.prototype.slice.call(arguments,1),i=this._events[t];if(void 0!==i)for(e=0;i.length>e;e++)r=i[e],r.callback.apply(r.context,n);return this},c.extend=function(t,r,i){var a,s=this;a=r&&n.call(r,"constructor")?r.constructor:function(){return s.apply(this,arguments)},e(a,s,i);var o=function(){this.constructor=a};return o.prototype=s.prototype,a.prototype=new o,r&&e(a.prototype,r),a.__super__=s.prototype,c[t]=a,a},r.chart=function(t){return 0===arguments.length?c:1===arguments.length?c[t]:c.extend.apply(c,arguments)},r.selection.prototype.chart=function(t,e){if(0===arguments.length)return this._chart;var r=c[t];return i(r,"No chart registered with name '"+t+"'"),new r(this,e)},r.selection.enter.prototype.chart=function(){return this._chart},r.transition.prototype.chart=r.selection.enter.prototype.chart})(this);
//@ sourceMappingURL=d3.chart.min.map

d3.chart.min.map

{"version":3,"file":"d3.chart.min.js","sources":["d3.chart.js"],"names":["window","extend","object","argsIndex","argsLength","iteratee","key","arguments","length","d3","hasOwnProp","Object","hasOwnProperty","d3cAssert","test","message","Error","version","match","lifecycleRe","Layer","base","this","_base","_handlers","prototype","dataBind","insert","on","eventName","handler","options","push","callback","chart","off","idx","handlers","splice","draw","data","bound","entering","events","selection","len","call","enter","_chart","name","bind","exit","i","l","empty","transition","layer","apply","initCascade","instance","args","ctor","constructor","sup","__super__","initialize","transformCascade","transform","Chart","chartOptions","_layers","_attached","_events","unlayer","attach","attachmentName","layerName","attachmentData","demux","context","once","self","names","n","event","j","keys","trigger","ev","Array","slice","undefined","protoProps","staticProps","child","parent","Surrogate","chartName","ChartCtor"],"mappings":"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"}

d3.chart.sizes.js

d3.chart("Sizes", {
  // configures the width of the chart.
  // when called without arguments, returns the
  // current width, if does not exist, returns default.
  width: function(newWidth) {
    if (arguments.length === 0) {
      if (typeof(this.w) === "undefined") {
        this.w = 200;
        return this;
      }
      return this.w;
    }
    this.w = newWidth;
    return this;
  },
  
  // configures the height of the chart.
  // when called without arguments, returns the
  // current height, if does not exist, returns default.
  height: function(newHeight) {
    if (arguments.length === 0) {
      if (typeof(this.h) === "undefined") {
        this.h = 200;
        return this;
      }
      return this.h;
    }
    this.h = newHeight;
    return this;
  }
});

d3chart.html

<html>
  <head>
    <title>d3.chart</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="d3.chart.min.js"></script>
    <script src="d3.chart.sizes.js"></script>
    <script src="d3.chart.lines.js"></script>
    
    <style>

        body {
          font: 10px sans-serif;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }
        .x.axis path {
          display: none;
        }
        .line {
          fill: none;
          stroke: steelblue;
          stroke-width: 1.5px;
        }
    </style>
  </head>
  <body>
    <div id="vis"></div>
    <script>
        var data = [1,3,4,6,10];

        var chart = d3.select("#vis")
          .append("svg")
          .chart("Circles")
            .width(100)
            //.height(50)
            .radius(10);

        chart.draw(data);
            
    </script>
  </body>
</html>

d3line.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}


.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}



/*.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}*/

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="./binomial.js"></script>
<script>

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;


var color = d3.scale.category10();

var x = d3.time.scale()
    .range([0, width])
    .domain([parseDate("2013-12-25"),parseDate("2014-03-5")]);
var y = d3.scale.linear()
    .range([height, 0])
    .domain([0,0.45]);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.months)
    .tickSize(16, 0)
    //.tickFormat(d3.time.format("%B"));
    .tickFormat(d3.time.format("%Y-%-m"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".0%"));


var area = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) { return x(parseDate(d.x)) })
    .y0(function(d) { return y(2*CalcBinL(d.y*d.n,d.n)-d.y) })  //2 times the stat.error
    .y1(function(d) { return y(2*CalcBinU(d.y*d.n,d.n)-d.y) });  //2 times the stat.error

var line = d3.svg.area()
    .interpolate("cardinal")
    .x(function(d) { return x(parseDate(d.x)) })
    .y(function(d) { return y(d.y) })

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 + ")");

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll(".tick text")
    .style("text-anchor", "start")
    .attr("x", 6)
    .attr("y", 6);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Rate");
      

d3.json("d3line.json", function(error, data) {

  // interval
  svg.selectAll(".band")
     .data(data)
    .enter().append("path")
     .attr("d",function(d) {return area(d.values)})
     .attr("class","area")
     .attr("id",function(d) {return d.name + "-band"})
     .style("fill",function(d) {return d.properties.fill})
     .style("fill-opacity",0.2)
     .attr("title",function(d) {return d.name});
  
  // line   
  svg.selectAll(".line")
     .data(data)
   .enter().append("path")
     .attr("d",function(d) {return line(d.values)})
     .attr("class","line")
     .attr("id",function(d) {return d.name + "-line"})
     .style("stroke",function(d) {return d.properties.fill})
     .style("stroke-opacity",1)
     .attr("title",function(d) {return d.name});
  
  // points
  data.forEach(function(dat,i) {
      svg.selectAll(".point")
          .data(dat.values)
        .enter().append("circle")
          .attr("cx", function(d) {
            nothing = 0;
            return x(parseDate(d.x)) 
          })
          .attr("cy", function(d) {return y(d.y) })
          .attr("r", 6)
          .style("stroke",function(d) {return dat.properties.fill})
          .style("stroke-width","3px")
          .style("fill","none");
          
  });
});

</script>

d3line.json

[
    {
      "name": "cssd",
      "values": [
        {"x": "2014-01-01","y":0.10,"n":500},{"x":"2014-02-01","y":0.15,"n":600},{"x":"2014-03-01","y":0.30,"n":400}
      ],
      "properties": {
          "fill": "orange"
      }
    },
    {
      "name": "ods",
      "values": [
        {"x": "2014-01-01","y":0.20,"y1":0.1,"y2":0.4,"n":500},{"x":"2014-02-01","y":0.12,"y1":0.05,"y2":0.25,"n":600},{"x":"2014-03-01","y":0.13,"y1":0.7,"y2":0.95,"n":400}
      ],
      "properties": {
          "fill": "#008"
      }
    },
    {
      "name": "kscm",
      "values": [
        {"x": "2014-01-01","y":0.10,"n":500},{"x":"2014-02-01","y":0.05,"n":600},{"x":"2014-03-01","y":0.07,"n":400}
      ],
      "properties": {
          "fill": "red"
      }
    },
    {
      "name": "zeleni",
      "values": [
        {"x": "2014-01-01","y":0.03,"n":500},{"x":"2014-02-01","y":0.035,"n":600},{"x":"2014-03-01","y":0.02,"n":400}
      ],
      "properties": {
          "fill": "green"
      }
    },
    {
      "name": "zeleni",
      "values": [
        {"x": "2014-01-01","y":0.01,"n":500},{"x":"2014-02-01","y":0.02,"n":600},{"x":"2014-03-01","y":0.05,"n":400}
      ],
      "properties": {
          "fill": "black"
      }
    }
]

list_of_d3ers.txt

GitHub names (for bl.ocks):

vicapow
sebg
eesur
NelsonMinar
MartynJones87
Stacked area
davo
madelfio
michalskop
emeeks
poezn
jugglingnutcase
peterqliu
alex-girard
enjalot
danharr
proclamo
biovisualize
smilli
hnesk
jczaplew
bollwyvl
pnavarrc
wboykinm
sxv
Forumrunner
Area chart
bostock
phoebebright
iros
seemantk
zjonsson
andrewxhill
ramnathv
gisminister
magrawala
monfera
jeremybuis
eins78
dougdowson
carlmanaster
finiterank
herrstucki
tomgp
gelicia
bumbu
gskielian
sathomas
edfg
roachhd
oluckyman
samehelhakim
jfsiii
MikeCostelloe
mwcl_wikipedia_adminstrator
hugolpz
Stewartnoyce
wiinci
jasondavies
pcj
hobbes7878
the13fools
gusafig
saraquigley
DAVIDBEIJINHO
timelyportfolio
kiddphunk
edouard_lopez
jdarling
johnkiernander
hsuh
couchand
zanarmstrong
vlandham
hlvoorhees
aaizemberg
ckuijjer
mbostock
mpmckenna8
christophermanning
thlorenz
fernoftheandes
bloc
zjhiphop
brucemcpherson
milroc
syntagmatic

thumbnail.png

vega.html

<html>
  <head>
    <title>Vega Scaffold</title>
    <script src="http://trifacta.github.io/vega/lib/d3.v3.min.js"></script>
    <!--<script src="http://trifacta.github.io/vega/lib/d3.geo.projection.min.js"></script>
    <script src="http://trifacta.github.io/vega/lib/topojson.js"></script>-->
    <script src="http://trifacta.github.io/vega/vega.js"></script>
  </head>
  <body>
    <div id="vis"></div>
  </body>
<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
  vg.parse.spec(spec, function(chart) { chart({el:"#vis",renderer:"svg"}).update(); });
}
parse("vega_lines.json");
// note: may be simplified into one part for each type in the json file
</script>
</html>

vega_lines.json

{
  "width": 400,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 20, "right": 10},
  "data":[
    {
      "name": "line-1",
      "values": [
        {"x": 1,"y":0.10},{"x":2,"y":0.15},{"x":3,"y":0.40}
      ]
    },
    {
      "name": "line-2",
      "values": [
        {"x": 1,"y":0.20,"y1":0.1,"y2":0.4},{"x":2,"y":0.15,"y1":0.05,"y2":0.25},{"x":3,"y":0.80,"y1":0.7,"y2":0.95}
      ]
    }
  ],
  "scales": [
    {"name":"x", "range":"width","domain":{"data":"line-1", "field":"data.x"}},
    {"name":"y", "range":"height", "nice":true, "domain":[0,1]}
  ],
  "axes": [
    {"type":"x", "scale":"x"},
    {"type":"y", "scale":"y"}
  ],
  "marks": [

    {
      "type": "area",
      "from": {"data": "line-2"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y1"},
          "y2": {"scale": "y", "field": "data.y2"},
          "fillOpacity": {"value": 0.5},
          "fill": {"value": "pink"},
          "interpolate": {"value": "cardinal"}
        },
        "update": {

        },
        "hover": {
          "fill": {"value": "pink"}
        }
      }
    },
      {
      "type": "symbol",
      "from": {"data": "line-1"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y"},
          "stroke": {"value": "steelblue"},
          "fillOpacity": {"value": 0.5},
          "attr": {"value": "steel"}
        },
        "update": {
          "fill": {"value": "steel"},
          "size": {"value": 50}
        },
        "hover": {
          "fill": {"value": "pink"},
          "size": {"value": 300}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "line-2"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y"},
          "stroke": {"value": "red"},
          "fillOpacity": {"value": 0.5}
        },
        "update": {
          "fill": {"value": "transparent"},
          "size": {"value": 100}
        },
        "hover": {
          "fill": {"value": "pink"},
          "size": {"value": 300}
        }
      }
    },
    {
      "type": "line",
      "from": {"data": "line-1"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y"},
          "stroke": {"value": "steelblue"},
          "fillOpacity": {"value": 0.5},
          "interpolate": {"value": "cardinal"}
        },
        "update": {
          "fill": {"value": "transparent"},
          "size": {"value": 100}
        },
        "hover": {
          "fill": {"value": "pink"},
          "size": {"value": 300}
        }
      }
    },
    {
      "type": "line",
      "from": {"data": "line-2"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y"},
          "stroke": {"value": "red"},
          "fillOpacity": {"value": 0.5},
          "interpolate": {"value": "cardinal"}
        },
        "update": {
          "fill": {"value": "transparent"},
          "size": {"value": 100}
        },
        "hover": {
          "fill": {"value": "pink"},
          "size": {"value": 300}
        }
      }
    }
    
  ]
  
}