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
19 KiB

webpackJsonp([1,2],[,,,,,,,,,,,,,function(t,e,n){"use strict";n.d(e,"a",function(){return r});var a=n(35),r=[{name:"Circle: mount",path:"/circle-mount",component:n(114)},{name:"Circle: size controller",path:"/size-controller",component:n(117)},{name:"Bars: styles",path:"/bars-styles",component:n(107)},{name:"Pie chart: local component & props",path:"/pie-chart-local-component",folder:!0,component:n(115)},{name:"Basic map: html tooltip & events",path:"/basic-map-tooltip",folder:!0,component:n(108)},{name:"Bubbles: nested routes",path:"/bubbles-nested-routes",alias:"/bubbles-nested-routes/*",folder:!0,component:n(112)}].map(function(t){var e=t;return e.source=a.githubLink+a.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 a=n(59),r=n.n(a),i=n(22),s=n.n(i),o=n(132),u=n.n(o),c=n(106),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(r()(d.a))})},function(t,e,n){n(97);var a=n(0)(n(39),n(126),"data-v-41b7bac0",null);t.exports=a.exports},,function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(105),r=n.n(a);e.default={name:"app",components:{topNav:r.a}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(13),r=n(35);e.default={computed:{prev:function(){var t=this.findIndex();if(t!=-1)return t>0?a.a[t-1]:void 0},next:function(){var t=this.findIndex();if(t!=-1)return t+1<a.a.length?a.a[t+1]:void 0},sourceHref:function(){var t=this.findIndex();return t==-1?r.githubLink:a.a[t].source}},methods:{findIndex:function(){var t=this.$route.name;return a.a.findIndex(function(e){return e.name===t})}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(13);e.default={data:function(){return{items:a.a}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(1);e.default={mounted:function(){function t(t,e){t.append("text").text(e).attr("x",n/2).attr("y",5).attr("text-anchor","middle"),t.selectAll("rect").data(i).enter().append("rect").attr("x",function(t){return s(t.name)}).attr("class",function(t){return t.name}).attr("y",function(t){return o(t.val)}).attr("width",s.bandwidth()).attr("height",function(t){return o.range()[0]-o(t.val)})}var e=a.select(this.$el),n=+e.attr("width"),r=+e.attr("height"),i=[{name:"one",val:100},{name:"two",val:150},{name:"three",val:200}],s=a.scaleBand().rangeRound([0,n]).padding(.1).domain(i.map(function(t){return t.name})),o=a.scaleLinear().rangeRound([.3*r-20,0]).domain([0,a.max(i,function(t){return t.val})]);e.append("g").attr("id","bars-style").attr("transform","translate(0, 20)").call(t,"Basic styles");var u=this.$el.attributes[0].name;e.append("g").attr("transform","translate(0, "+(.3*r+20)+")").call(t,"Scoped styles").selectAll("rect").attr(u,""),e.append("g").attr("id","bars-style-sass").attr("transform","translate(0, "+(.6*r+20)+")").call(t,"Sass styles")}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(88),r=(n(3),n(109)),i=n(110),s="static/data/states-data.csv";e.default={components:{usMap:r,tooltip:i},created:function(){var t=this;this.$http.get(s).then(function(e){this.statesData={},a.a(";").parse(e.data,function(e){var n=e["2017 Population"].split(",").join("");return e.value=+n,t.statesData[e.STATE_ABBR]=e,delete e["2017 Population"],delete e.STATE_ABBR,e})})},data:function(){return{statesData:void 0,currentState:void 0}},computed:{currentStateDescription:function(){return"Population: "+this.currentState.value}},methods:{onStateSelected:function(t){this.currentState=this.statesData[t]},onStateDeselected:function(t){this.currentState=void 0}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(1),r=n(104);e.default={mounted:function(){var t=this,e=a.select(this.$el),n=(+e.attr("width"),+e.attr("height"),a.geoAlbersUsa()),i=a.geoPath().projection(n);a.json("static/data/us.json",function(n,a){var s=e.append("g");s.selectAll(".state").data(r.feature(a,a.objects.usStates).features).enter().append("path").attr("class","state").attr("d",i).on("mouseover",function(e){t.$emit("stateSelected",e.properties.STATE_ABBR)}).on("mouseout",function(e){t.$emit("stateDeselected",e.properties.STATE_ABBR)}),s.attr("transform","scale(0.57)")})}}},function(t,e){t.exports={name:"tooltip",props:["title","description"]}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(53),r=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=r.select(this.$el),e=+t.attr("width"),n=+t.attr("height"),i=this,s=t.append("g").attr("transform","translate("+e/2+", "+n/2+")");r.csv("static/data/earthquakes.csv",function(t){i.ph2=new a.a(s,t,i.groupBy)})}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(113),r=n(111),i="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="#/"+i+t.path,t.active=!1,t});e.default={components:{groupMenu:a,bubbles:r},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 a=n(3);e.default={props:["links","activeLink"],computed:{alinks:function(){var t=this;return a.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 a=n(1);e.default={mounted:function(){a.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 a=n(3),r=n(116),i=[{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:r},data:function(){return{names:a.take(i,3)}},computed:{canAddAName:function(){return this.names.length<i.length}},methods:{addName:function(){this.names.push(i[this.names.length])}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(1);e.default={mounted:function(){var t=a.select(this.$el),e=+t.attr("width"),n=+t.attr("height"),r={top:20,left:0,bottom:30,right:0},i=e-(r.left+r.right),s=n-(r.top+r.bottom);this.chartLayer=t.append("g").attr("transform","translate("+r.left+", "+r.top+")"),this.arc=a.arc().outerRadius(s/2).innerRadius(s/4).padAngle(.03).cornerRadius(8),this.pieG=this.chartLayer.append("g").attr("transform","translate("+i/2+", "+s/2+")"),this.drawChart(this.data)},props:["data"],watch:{data:function(t){this.drawChart(t)}},methods:{drawChart:function(t){var e=a.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 r=n.enter().append("g").classed("arc",!0);r.append("path").attr("d",this.arc).attr("id",function(t,e){return"arc-"+e}).attr("stroke","gray").attr("fill",function(t){return a.interpolateCool(Math.random())}),r.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 a=n(1);e.default={data:function(){return{circleSize:50}},mounted:function(t){var e=a.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 a=n(7),r=n.n(a),i=n(8),s=n.n(i),o=n(56),u=n(54),c=n(55),l=n(3),d=(n.n(l),n(1)),f=function(){function t(e,n,a){r()(this,t),this.svg=e,this.data=n,this.setData(n),this._init(),this.layout=void 0,this.setLayout(a)}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=f},function(t,e,n){"use strict";var a=n(7),r=n.n(a),i=n(8),s=n.n(i),o=n(1),u=n(3),c=function(){function t(e,n,a){r()(this,t),this.elem=e,this.data=n,this.simulation=a}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 a=n(7),r=n.n(a),i=n(8),s=n.n(i),o=n(1),u=n(3),c=o.range(14,24),l=500,d=function(){function t(e,n,a){r()(this,t),this.elem=e,this.data=n,this.simulation=a}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 a=n(7),r=n.n(a),i=n(8),s=n.n(i),o=function(){function t(e,n,a){r()(this,t),this.elem=e,this.simulation=a}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){},function(t,e){},function(t,e){},function(t,e){},,function(t,e,n){n(91);var a=n(0)(n(40),n(119),"data-v-098bb42e",null);t.exports=a.exports},function(t,e,n){n(96);var a=n(0)(n(41),n(125),"data-v-417810ac",null);t.exports=a.exports},function(t,e,n){n(101),n(102),n(100);var a=n(0)(n(42),n(130),"data-v-63d4ce13",null);t.exports=a.exports},function(t,e,n){n(95);var a=n(0)(n(43),n(123),"data-v-39fd153a",null);t.exports=a.exports},function(t,e,n){n(92);var a=n(0)(n(44),n(120),null,null);t.exports=a.exports},function(t,e,n){n(99);var a=n(0)(n(45),n(129),"data-v-6039702a",null);t.exports=a.exports},function(t,e,n){var a=n(0)(n(46),n(124),null,null);t.exports=a.exports},function(t,e,n){n(93);var a=n(0)(n(47),n(121),"data-v-28f41ffe",null);t.exports=a.exports},function(t,e,n){n(94);var a=n(0)(n(48),n(122),"data-v-37ada400",null);t.exports=a.exports},function(t,e,n){n(103);var a=n(0)(n(49),n(131),null,null);t.exports=a.exports},function(t,e,n){var a=n(0)(n(50),n(118),null,null);t.exports=a.exports},function(t,e,n){var a=n(0)(n(51),n(128),null,null);t.exports=a.exports},function(t,e,n){n(98);var a=n(0)(n(52),n(127),null,null);t.exports=a.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("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("div",{attrs:{id:"holder"}},[n("div",{staticClass:"mapHolder"},[n("us-map",{on:{stateSelected:t.onStateSelected,stateDeselected:t.onStateDeselected}})],1),t._v(" "),t.currentState?n("tooltip",{attrs:{title:t.currentState.Name,description:t.currentStateDescription}}):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:"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("div",{attrs:{id:"tooltipPositioner"}},[n("div",{attrs:{id:"tooltip"}},[n("div",{attrs:{id:"tooltipContainer"}},[n("div",{staticClass:"title"},[t._v(t._s(t.title))]),t._v(" "),n("div",{staticClass:"description"},[t._v(t._s(t.description))])])])])},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){},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(22),r=n.n(a),i=n(37),s=n.n(i),o=n(36),u=n(38),c=n.n(u);r.a.use(c.a),new r.a({el:"#app",router:o.a,template:"<app/>",components:{app:s.a}})}],[136]);
//# sourceMappingURL=app.bb478689be3640ebf141.js.map