D3.js vs Vue.js examples
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

2 lines
16 KiB

webpackJsonp([1,2],[,,,,,,,,,,,,,function(t,e,n){"use strict";n.d(e,"a",function(){return i});var r=n(34),i=[{name:"Circle: mount",path:"/circle-mount",component:n(100)},{name:"Circle: size controller",path:"/size-controller",component:n(103)},{name:"Bars: styles basic",path:"/bars-style-basic",component:n(95)},{name:"Bars: styles scoped",path:"/bars-style-scoped",component:n(96)},{name:"Pie chart: local component & props",path:"/pie-chart-local-component",folder:!0,component:n(101)},{name:"Bubbles: nested routes",path:"/bubbles-nested-routes",alias:"/bubbles-nested-routes/*",folder:!0,component:n(98)}].map(function(t){var e=t;return e.source=r.githubLink+r.d3ComponentsPath+t.path+(t.folder?"":".vue"),e})},,,,,,,,,,,,,,,,,,,,,function(t,e){t.exports={githubLink:"https://github.com/corpglory/d3vue/",d3ComponentsPath:"tree/master/src/d3-components"}},function(t,e,n){"use strict";var r=n(55),i=n.n(r),a=n(21),s=n.n(a),o=n(116),u=n.n(o),c=n(94),l=n.n(c),d=n(13);s.a.use(u.a),e.a=new u.a({routes:[{path:"/",name:"Menu",component:l.a}].concat(i()(d.a))})},function(t,e,n){n(90);var r=n(0)(n(37),n(112),"data-v-41b7bac0",null);t.exports=r.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(93),i=n.n(r);e.default={name:"app",components:{topNav:i.a}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(13),i=n(34);e.default={computed:{prev:function(){var t=this.findIndex();if(t!=-1)return t>0?r.a[t-1]:void 0},next:function(){var t=this.findIndex();if(t!=-1)return t+1<r.a.length?r.a[t+1]:void 0},sourceHref:function(){var t=this.findIndex();return t==-1?i.githubLink:r.a[t].source}},methods:{findIndex:function(){var t=this.$route.name;return r.a.findIndex(function(e){return e.name===t})}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(13);e.default={data:function(){return{items:r.a}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);e.default={mounted:function(){var t=r.select(this.$el),e=+t.attr("width"),n=+t.attr("height"),i=[{name:"one",val:100},{name:"two",val:150},{name:"three",val:200}],a=r.scaleBand().rangeRound([0,e]).padding(.1).domain(i.map(function(t){return t.name})),s=r.scaleLinear().rangeRound([n,0]).domain([0,r.max(i,function(t){return t.val})]);t.selectAll("rect").data(i).enter().append("rect").attr("x",function(t){return a(t.name)}).attr("class",function(t){return t.name}).attr("y",function(t){return s(t.val)}).attr("width",a.bandwidth()).attr("height",function(t){return n-s(t.val)})}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);e.default={mounted:function(){var t=(this.$el.attributes[0],r.select(this.$el)),e=+t.attr("width"),n=+t.attr("height"),i=[{name:"one",val:100},{name:"two",val:150},{name:"three",val:200}],a=r.scaleBand().rangeRound([0,e]).padding(.1).domain(i.map(function(t){return t.name})),s=r.scaleLinear().rangeRound([n,0]).domain([0,r.max(i,function(t){return t.val})]);t.selectAll("rect").data(i).enter().append("rect").attr("data-v-0e55e99d","").attr("x",function(t){return a(t.name)}).attr("class",function(t){return t.name}).attr("y",function(t){return s(t.val)}).attr("width",a.bandwidth()).attr("height",function(t){return n-s(t.val)})}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(49),i=n(1);e.default={props:["groupBy","data"],watch:{groupBy:function(t){this.ph2.setLayout(t)},data:function(t){this.ph2.setData(t)}},mounted:function(){var t=i.select(this.$el),e=+t.attr("width"),n=+t.attr("height"),a=this,s=t.append("g").attr("transform","translate("+e/2+", "+n/2+")");i.csv("static/data/earthquakes.csv",function(t){a.ph2=new r.a(s,t,a.groupBy)})}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(99),i=n(97),a="bubbles-nested-routes",s=n(3),o=[{name:"None",path:"",layout:"total"},{name:"By country",path:"/country",layout:"country"},{name:"By day",path:"/day",layout:"day"}].map(function(t){return t.path="#/"+a+t.path,t.active=!1,t});e.default={components:{groupMenu:r,bubbles:i},data:function(){return{activeLink:this.findActiveLink()}},computed:{links:function(){return o}},methods:{findActiveLink:function(){var t=this;s.each(o,function(t){t.active=!1});var e=s.find(o,function(e){return e.path=="#"+t.$route.path});return e||(e=o[0]),e}},watch:{$route:function(t,e){this.activeLink=this.findActiveLink()}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(3);e.default={props:["links","activeLink"],computed:{alinks:function(){var t=this;return r.map(this.links,function(e){return{item:e,active:e.path==t.activeLink.path}})}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);e.default={mounted:function(){r.select(this.$el).append("circle").attr("cx","250").attr("cy","150").attr("r","100")}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(3),i=n(102),a=[{name:"Sarah",value:2502},{name:"Emma",value:2005},{name:"Laura",value:1968},{name:"Chloé",value:1863},{name:"Marie",value:1810},{name:"Emily",value:1637},{name:"Léa",value:1592},{name:"Camille",value:1572},{name:"Anna",value:1433},{name:"Manon",value:1403}];e.default={components:{pie:i},data:function(){return{names:r.take(a,3)}},computed:{canAddAName:function(){return this.names.length<a.length}},methods:{addName:function(){this.names.push(a[this.names.length])}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);e.default={mounted:function(){var t=r.select(this.$el),e=+t.attr("width"),n=+t.attr("height"),i={top:20,left:0,bottom:30,right:0},a=e-(i.left+i.right),s=n-(i.top+i.bottom);this.chartLayer=t.append("g").attr("transform","translate("+i.left+", "+i.top+")"),this.arc=r.arc().outerRadius(s/2).innerRadius(s/4).padAngle(.03).cornerRadius(8),this.pieG=this.chartLayer.append("g").attr("transform","translate("+a/2+", "+s/2+")"),this.drawChart(this.data)},props:["data"],watch:{data:function(t){this.drawChart(t)}},methods:{drawChart:function(t){var e=r.pie().sort(null).value(function(t){return t.value})(t),n=this.pieG.selectAll(".arc").data(e);n.select("path").attr("d",this.arc);var i=n.enter().append("g").classed("arc",!0);i.append("path").attr("d",this.arc).attr("id",function(t,e){return"arc-"+e}).attr("stroke","gray").attr("fill",function(t){return r.interpolateCool(Math.random())}),i.append("text").attr("dx",10).attr("dy",-5).append("textPath").attr("xlink:href",function(t,e){return"#arc-"+e}).text(function(t){return t.data.name})}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1);e.default={data:function(){return{circleSize:50}},mounted:function(t){var e=r.select(this.$el).select("svg");this.circle=e.append("circle").attr("cx","250").attr("cy","150").attr("r",this.circleSize)},watch:{circleSize:function(t){this.circle.attr("r",t)}}}},function(t,e,n){"use strict";var r=n(7),i=n.n(r),a=n(8),s=n.n(a),o=n(52),u=n(50),c=n(51),l=n(3),d=(n.n(l),n(1)),h=function(){function t(e,n,r){i()(this,t),this.svg=e,this.data=n,this.setData(n),this._init(),this.layout=void 0,this.setLayout(r)}return s()(t,[{key:"setLayout",value:function(t){if(void 0===t)throw new Error("layoutName is undefined");if(!this.layouts)throw new Error("Layouts are not defined");if(!this.layouts[t])throw new Error("Can`t find layout "+t);this.layout&&this.layout.exit(),this.layout=this.layouts[t],this.layout.inited||(this.layout.init(),this.layout.inited=!0),this.layout.enter(),this.simulation.alpha(1),this.simulation.restart()}},{key:"setData",value:function(t){this.nodes=t.map(function(t){return{r:+t.Magnitude}})}},{key:"_init",value:function(){this.simulation=d.forceSimulation().force("index-collide",d.forceCollide(function(t){return t.r+5}).iterations(16)).force("index-x",d.forceX().strength(.04)).force("index-y",d.forceY().strength(.04)),this._initLayouts();var t=this.svg.append("g").attr("class","nodes").selectAll("circle").data(this.nodes).enter().append("circle").attr("r",function(t){return t.r}),e=this,n=function(){t.attr("cx",function(t){return t.x}).attr("cy",function(t){return t.y}),e.layout.ticked&&e.layout.ticked()};this.simulation.nodes(this.nodes).on("tick",n)}},{key:"_initLayouts",value:function(){this.layouts={total:o.a,country:u.a,day:c.a};for(var t in this.layouts){var e=this.layouts[t];this.layouts[t]=new e(this.svg,this.data,this.simulation)}}}]),t}();e.a=h},function(t,e,n){"use strict";var r=n(7),i=n.n(r),a=n(8),s=n.n(a),o=n(1),u=n(3),c=function(){function t(e,n,r){i()(this,t),this.elem=e,this.data=n,this.simulation=r}return s()(t,[{key:"init",value:function(){var t=u(this.data).map(function(t,e){return{location:t.Location.split(", ")[1],index:e}}).groupBy("location").value();this.countries=u.map(t,function(t,e){return{key:e,r:-30}}),this.links=[],console.log(t[this.countries[0].key][0]);for(var e=0;e<this.countries.length;e++)for(var n=0;n<t[this.countries[e].key].length;n++)this.links.push({source:e+this.data.length,target:t[this.countries[e].key][n].index})}},{key:"enter",value:function(){this.nodesBefore=this.simulation.nodes(),this.simulation.force("country-link",o.forceLink().id(function(t){return t.index})).force("country-charge",o.forceManyBody().strength(-30)).force("country-x",o.forceX().strength(.11)).force("country-y",o.forceY().strength(.11)),this.simulation.force("link"),this.simulation.nodes(u.concat(this.nodesBefore,this.countries)),this.countryG=this.elem.append("g"),this.countyLabels=this.countryG.selectAll("text").data(this.countries).enter().append("text").text(function(t){return t.key}).attr("text-anchor","middle").attr("font-size","8"),this.linesG=this.elem.insert("g",":first-child"),this.lines=this.linesG.selectAll("line").data(this.links).enter().append("line").attr("stroke","#d7d7d7"),this.simulation.force("country-link").links(this.links)}},{key:"ticked",value:function(){this.lines.attr("x1",function(t){return t.source.x}).attr("y1",function(t){return t.source.y}).attr("x2",function(t){return t.target.x}).attr("y2",function(t){return t.target.y}),this.countyLabels.attr("x",function(t){return t.x}).attr("y",function(t){return t.y})}},{key:"exit",value:function(){this.simulation.nodes(this.nodesBefore),this.simulation.force("country-link",null).force("country-charge",null).force("country-x",null).force("country-y",null),this.linesG.remove(),this.countryG.remove()}}]),t}();e.a=c},function(t,e,n){"use strict";var r=n(7),i=n.n(r),a=n(8),s=n.n(a),o=n(1),u=n(3),c=o.range(14,24),l=500,d=function(){function t(e,n,r){i()(this,t),this.elem=e,this.data=n,this.simulation=r}return s()(t,[{key:"init",value:function(){var t=this;this.dayX=u.map(this.data,function(e){return t._dayToX(+e.Date.split("-")[0])})}},{key:"enter",value:function(){this.forceIndexCollide=this.simulation.force("index-collide"),this.simulation.force("index-collide",null),this.forceIndexY=this.simulation.force("index-y"),this.simulation.force("index-y",null),this.simulation.force("day-collide",o.forceCollide(function(t){return t.r+2}).iterations(16)),this.daysG=this.elem.append("g"),this.daysG.selectAll("text").data(c).enter().append("text").text(function(t){return t}).attr("x",this._dayToX).attr("font-size",10).attr("fill","gray").attr("text-anchor","middle");var t=this;this.simulation.force("day-x",o.forceX(function(e){return t.dayX[e.index]}).strength(1)),this.simulation.force("day-y",o.forceY().strength(.005))}},{key:"exit",value:function(){this.daysG.remove(),this.simulation.force("day-x",null),this.simulation.force("index-collide",this.forceIndexCollide),this.simulation.force("index-y",this.forceIndexY)}},{key:"_dayToX",value:function(t){return(t-c[0])*l/c.length-.48*l}}]),t}();e.a=d},function(t,e,n){"use strict";var r=n(7),i=n.n(r),a=n(8),s=n.n(a),o=function(){function t(e,n,r){i()(this,t),this.elem=e,this.simulation=r}return s()(t,[{key:"init",value:function(){}},{key:"enter",value:function(){}},{key:"exit",value:function(){}}]),t}();e.a=o},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e){},function(t,e,n){n(84);var r=n(0)(n(38),n(105),"data-v-098bb42e",null);t.exports=r.exports},function(t,e,n){n(89);var r=n(0)(n(39),n(111),"data-v-417810ac",null);t.exports=r.exports},function(t,e,n){n(86);var r=n(0)(n(40),n(107),null,null);t.exports=r.exports},function(t,e,n){n(85);var r=n(0)(n(41),n(106),"data-v-0e55e99d",null);t.exports=r.exports},function(t,e,n){var r=n(0)(n(42),n(110),null,null);t.exports=r.exports},function(t,e,n){n(87);var r=n(0)(n(43),n(108),"data-v-28f41ffe",null);t.exports=r.exports},function(t,e,n){n(88);var r=n(0)(n(44),n(109),"data-v-37ada400",null);t.exports=r.exports},function(t,e,n){n(92);var r=n(0)(n(45),n(115),null,null);t.exports=r.exports},function(t,e,n){var r=n(0)(n(46),n(104),null,null);t.exports=r.exports},function(t,e,n){var r=n(0)(n(47),n(114),null,null);t.exports=r.exports},function(t,e,n){n(91);var r=n(0)(n(48),n(113),null,null);t.exports=r.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h4",[t._v("Most popular female names in the world")]),t._v(" "),n("pie",{attrs:{data:t.names}}),t._v(" "),n("br"),t._v(" "),t.canAddAName?n("button",{on:{click:t.addName}},[t._v("Add a name")]):t._e()],1)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"holder"}},[n("div",{staticClass:"links"},[t.prev?n("router-link",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v(" < prev ")]):t._e(),t._v(" "),n("a",{staticClass:"source",attrs:{href:t.sourceHref}},[t._v(" source ")]),t._v(" "),t.next?n("router-link",{staticClass:"next",attrs:{to:t.next.path}},[t._v(" next > ")]):t._e()],1)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{attrs:{width:"500",height:"300"}})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{attrs:{id:"bars-style-basic-svg",width:"500",height:"300"}})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"holder"},[n("groupMenu",{attrs:{links:t.links,activeLink:t.activeLink}}),t._v(" "),n("bubbles",{attrs:{groupBy:t.activeLink.layout}})],1)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"holder"},[n("ul",{staticClass:"menu"},[n("li",[t._v("Group by: ")]),t._v(" "),t._l(t.alinks,function(e){return n("li",[n("a",{class:{active:e.active},attrs:{href:e.item.path}},[t._v(" "+t._s(e.item.name)+" ")])])})],2)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{attrs:{width:"600",height:"500"}})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"hello"},[n("ul",t._l(t.items,function(e){return n("li",[n("router-link",{attrs:{to:e.path}},[t._v(t._s(e.name))])],1)}))])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[t._m(0),t._v(" "),n("h2",[t._v(t._s(t.$route.name))]),t._v(" "),n("top-nav"),t._v(" "),n("router-view")],1)},staticRenderFns:[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("a",{attrs:{href:"#/"}},[n("h1",[t._v(" D3.js vs Vue.js examples ")])])}]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("svg",{attrs:{width:"500",height:"300"}}),t._v(" "),n("br"),t._v(" "),n("input",{directives:[{name:"model",rawName:"v-model",value:t.circleSize,expression:"circleSize"}],attrs:{type:"range",min:"1",max:"100",step:"1"},domProps:{value:t._s(t.circleSize)},on:{input:function(e){t.circleSize=e.target.value}}})])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{attrs:{width:"500",height:"300"}})},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{attrs:{width:"500",height:"300"}})},staticRenderFns:[]}},,,,function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(21),i=n.n(r),a=n(36),s=n.n(a),o=n(35);new i.a({el:"#app",router:o.a,template:"<app/>",components:{app:s.a}})}],[119]);
//# sourceMappingURL=app.512839275eb12073589f.js.map