Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
D3 plot for Japanese CPI of core and corecore.
date Year-Month year month Year month All items, less fresh food All items, less food (less alcoholic beverages) and energy
2000-01-01 2000-01 2000 1 200001 -0.3 -0.4
2000-02-01 2000-02 2000 2 200002 -0.1 -0.2
2000-03-01 2000-03 2000 3 200003 -0.3 -0.3
2000-04-01 2000-04 2000 4 200004 -0.4 -0.6
2000-05-01 2000-05 2000 5 200005 -0.2 -0.2
2000-06-01 2000-06 2000 6 200006 -0.3 -0.5
2000-07-01 2000-07 2000 7 200007 -0.3 -0.3
2000-08-01 2000-08 2000 8 200008 -0.3 -0.5
2000-09-01 2000-09 2000 9 200009 -0.5 -0.5
2000-10-01 2000-10 2000 10 200010 -0.6 -0.6
2000-11-01 2000-11 2000 11 200011 -0.5 -0.5
2000-12-01 2000-12 2000 12 200012 -0.6 -0.5
2001-01-01 2001-01 2001 1 200101 -0.8 -0.9
2001-02-01 2001-02 2001 2 200102 -0.8 -1
2001-03-01 2001-03 2001 3 200103 -0.9 -1.1
2001-04-01 2001-04 2001 4 200104 -0.8 -0.9
2001-05-01 2001-05 2001 5 200105 -1 -1.1
2001-06-01 2001-06 2001 6 200106 -0.9 -0.9
2001-07-01 2001-07 2001 7 200107 -0.9 -0.9
2001-08-01 2001-08 2001 8 200108 -0.9 -0.9
2001-09-01 2001-09 2001 9 200109 -0.8 -0.8
2001-10-01 2001-10 2001 10 200110 -0.7 -0.7
2001-11-01 2001-11 2001 11 200111 -0.8 -0.9
2001-12-01 2001-12 2001 12 200112 -0.9 -0.8
2002-01-01 2002-01 2002 1 200201 -0.8 -0.8
2002-02-01 2002-02 2002 2 200202 -0.8 -0.8
2002-03-01 2002-03 2002 3 200203 -0.7 -0.7
2002-04-01 2002-04 2002 4 200204 -0.9 -0.8
2002-05-01 2002-05 2002 5 200205 -0.8 -0.9
2002-06-01 2002-06 2002 6 200206 -0.8 -0.8
2002-07-01 2002-07 2002 7 200207 -0.8 -0.9
2002-08-01 2002-08 2002 8 200208 -0.9 -0.8
2002-09-01 2002-09 2002 9 200209 -0.9 -0.8
2002-10-01 2002-10 2002 10 200210 -0.9 -0.8
2002-11-01 2002-11 2002 11 200211 -0.8 -0.7
2002-12-01 2002-12 2002 12 200212 -0.7 -0.6
2003-01-01 2003-01 2003 1 200301 -0.8 -0.7
2003-02-01 2003-02 2003 2 200302 -0.7 -0.6
2003-03-01 2003-03 2003 3 200303 -0.6 -0.5
2003-04-01 2003-04 2003 4 200304 -0.4 -0.4
2003-05-01 2003-05 2003 5 200305 -0.4 -0.3
2003-06-01 2003-06 2003 6 200306 -0.4 -0.3
2003-07-01 2003-07 2003 7 200307 -0.2 0
2003-08-01 2003-08 2003 8 200308 -0.1 -0.1
2003-09-01 2003-09 2003 9 200309 -0.1 -0.1
2003-10-01 2003-10 2003 10 200310 0.1 -0.1
2003-11-01 2003-11 2003 11 200311 -0.1 -0.2
2003-12-01 2003-12 2003 12 200312 0 -0.3
2004-01-01 2004-01 2004 1 200401 -0.1 -0.4
2004-02-01 2004-02 2004 2 200402 0 -0.4
2004-03-01 2004-03 2004 3 200403 -0.1 -0.4
2004-04-01 2004-04 2004 4 200404 -0.2 -0.6
2004-05-01 2004-05 2004 5 200405 -0.3 -0.6
2004-06-01 2004-06 2004 6 200406 -0.1 -0.7
2004-07-01 2004-07 2004 7 200407 -0.2 -0.8
2004-08-01 2004-08 2004 8 200408 -0.2 -0.7
2004-09-01 2004-09 2004 9 200409 0 -0.7
2004-10-01 2004-10 2004 10 200410 -0.1 -0.5
2004-11-01 2004-11 2004 11 200411 -0.2 -0.7
2004-12-01 2004-12 2004 12 200412 -0.2 -0.7
2005-01-01 2005-01 2005 1 200501 -0.3 -0.6
2005-02-01 2005-02 2005 2 200502 -0.4 -0.6
2005-03-01 2005-03 2005 3 200503 -0.3 -0.6
2005-04-01 2005-04 2005 4 200504 -0.2 -0.5
2005-05-01 2005-05 2005 5 200505 0 -0.4
2005-06-01 2005-06 2005 6 200506 -0.2 -0.4
2005-07-01 2005-07 2005 7 200507 -0.2 -0.4
2005-08-01 2005-08 2005 8 200508 -0.1 -0.5
2005-09-01 2005-09 2005 9 200509 -0.1 -0.3
2005-10-01 2005-10 2005 10 200510 0 -0.4
2005-11-01 2005-11 2005 11 200511 0.1 -0.1
2005-12-01 2005-12 2005 12 200512 0.1 0
2006-01-01 2006-01 2006 1 200601 -0.1 -0.7
2006-02-01 2006-02 2006 2 200602 0 -0.5
2006-03-01 2006-03 2006 3 200603 0.1 -0.5
2006-04-01 2006-04 2006 4 200604 -0.1 -0.6
2006-05-01 2006-05 2006 5 200605 0 -0.5
2006-06-01 2006-06 2006 6 200606 0.2 -0.4
2006-07-01 2006-07 2006 7 200607 0.2 -0.3
2006-08-01 2006-08 2006 8 200608 0.3 -0.4
2006-09-01 2006-09 2006 9 200609 0.2 -0.5
2006-10-01 2006-10 2006 10 200610 0.1 -0.4
2006-11-01 2006-11 2006 11 200611 0.2 -0.2
2006-12-01 2006-12 2006 12 200612 0.1 -0.3
2007-01-01 2007-01 2007 1 200701 0 -0.2
2007-02-01 2007-02 2007 2 200702 -0.1 -0.3
2007-03-01 2007-03 2007 3 200703 -0.3 -0.4
2007-04-01 2007-04 2007 4 200704 -0.1 -0.2
2007-05-01 2007-05 2007 5 200705 -0.1 -0.3
2007-06-01 2007-06 2007 6 200706 -0.1 -0.4
2007-07-01 2007-07 2007 7 200707 -0.1 -0.5
2007-08-01 2007-08 2007 8 200708 -0.1 -0.2
2007-09-01 2007-09 2007 9 200709 -0.1 -0.3
2007-10-01 2007-10 2007 10 200710 0.1 -0.3
2007-11-01 2007-11 2007 11 200711 0.4 -0.1
2007-12-01 2007-12 2007 12 200712 0.8 -0.1
2008-01-01 2008-01 2008 1 200801 0.8 -0.1
2008-02-01 2008-02 2008 2 200802 1 -0.1
2008-03-01 2008-03 2008 3 200803 1.2 0.1
2008-04-01 2008-04 2008 4 200804 0.9 -0.1
2008-05-01 2008-05 2008 5 200805 1.5 -0.1
2008-06-01 2008-06 2008 6 200806 1.9 0.1
2008-07-01 2008-07 2008 7 200807 2.4 0.2
2008-08-01 2008-08 2008 8 200808 2.4 0
2008-09-01 2008-09 2008 9 200809 2.3 0.2
2008-10-01 2008-10 2008 10 200810 1.9 0.2
2008-11-01 2008-11 2008 11 200811 1 0
2008-12-01 2008-12 2008 12 200812 0.2 0
2009-01-01 2009-01 2009 1 200901 0 -0.2
2009-02-01 2009-02 2009 2 200902 0 -0.1
2009-03-01 2009-03 2009 3 200903 -0.1 -0.3
2009-04-01 2009-04 2009 4 200904 -0.1 -0.4
2009-05-01 2009-05 2009 5 200905 -1.1 -0.5
2009-06-01 2009-06 2009 6 200906 -1.7 -0.7
2009-07-01 2009-07 2009 7 200907 -2.2 -0.9
2009-08-01 2009-08 2009 8 200908 -2.4 -0.9
2009-09-01 2009-09 2009 9 200909 -2.3 -1
2009-10-01 2009-10 2009 10 200910 -2.2 -1.1
2009-11-01 2009-11 2009 11 200911 -1.7 -1
2009-12-01 2009-12 2009 12 200912 -1.3 -1.2
2010-01-01 2010-01 2010 1 201001 -1.3 -1.2
2010-02-01 2010-02 2010 2 201002 -1.2 -1.1
2010-03-01 2010-03 2010 3 201003 -1.2 -1.1
2010-04-01 2010-04 2010 4 201004 -1.5 -1.6
2010-05-01 2010-05 2010 5 201005 -1.2 -1.6
2010-06-01 2010-06 2010 6 201006 -1 -1.5
2010-07-01 2010-07 2010 7 201007 -1.1 -1.5
2010-08-01 2010-08 2010 8 201008 -1 -1.5
2010-09-01 2010-09 2010 9 201009 -1.1 -1.5
2010-10-01 2010-10 2010 10 201010 -0.6 -0.8
2010-11-01 2010-11 2010 11 201011 -0.5 -0.9
2010-12-01 2010-12 2010 12 201012 -0.4 -0.7
2011-01-01 2011-01 2011 1 201101 -0.8 -1.3
2011-02-01 2011-02 2011 2 201102 -0.8 -1.3
2011-03-01 2011-03 2011 3 201103 -0.7 -1.4
2011-04-01 2011-04 2011 4 201104 -0.2 -1.1
2011-05-01 2011-05 2011 5 201105 -0.1 -0.8
2011-06-01 2011-06 2011 6 201106 -0.2 -0.8
2011-07-01 2011-07 2011 7 201107 0.1 -0.5
2011-08-01 2011-08 2011 8 201108 0.2 -0.5
2011-09-01 2011-09 2011 9 201109 0.2 -0.4
2011-10-01 2011-10 2011 10 201110 -0.1 -1
2011-11-01 2011-11 2011 11 201111 -0.2 -1.1
2011-12-01 2011-12 2011 12 201112 -0.1 -1.1
2012-01-01 2012-01 2012 1 201201 -0.1 -0.9
2012-02-01 2012-02 2012 2 201202 0.1 -0.6
2012-03-01 2012-03 2012 3 201203 0.2 -0.5
2012-04-01 2012-04 2012 4 201204 0.2 -0.3
2012-05-01 2012-05 2012 5 201205 -0.1 -0.6
2012-06-01 2012-06 2012 6 201206 -0.2 -0.6
2012-07-01 2012-07 2012 7 201207 -0.3 -0.6
2012-08-01 2012-08 2012 8 201208 -0.3 -0.5
2012-09-01 2012-09 2012 9 201209 -0.1 -0.6
2012-10-01 2012-10 2012 10 201210 0 -0.5
2012-11-01 2012-11 2012 11 201211 -0.1 -0.5
2012-12-01 2012-12 2012 12 201212 -0.2 -0.6
2013-01-01 2013-01 2013 1 201301 -0.2 -0.7
2013-02-01 2013-02 2013 2 201302 -0.3 -0.9
2013-03-01 2013-03 2013 3 201303 -0.5 -0.8
2013-04-01 2013-04 2013 4 201304 -0.4 -0.6
2013-05-01 2013-05 2013 5 201305 0 -0.4
2013-06-01 2013-06 2013 6 201306 0.4 -0.2
2013-07-01 2013-07 2013 7 201307 0.7 -0.1
2013-08-01 2013-08 2013 8 201308 0.8 -0.1
2013-09-01 2013-09 2013 9 201309 0.7 0
2013-10-01 2013-10 2013 10 201310 0.9 0.3
2013-11-01 2013-11 2013 11 201311 1.2 0.6
2013-12-01 2013-12 2013 12 201312 1.3 0.7
2014-01-01 2014-01 2014 1 201401 1.3 0.7
2014-02-01 2014-02 2014 2 201402 1.3 0.8
2014-03-01 2014-03 2014 3 201403 1.3 0.7
2014-04-01 2014-04 2014 4 201404 3.2 2.3
2014-05-01 2014-05 2014 5 201405 3.4 2.2
2014-06-01 2014-06 2014 6 201406 3.3 2.3
2014-07-01 2014-07 2014 7 201407 3.3 2.3
2014-08-01 2014-08 2014 8 201408 3.1 2.3
2014-09-01 2014-09 2014 9 201409 3 2.3
2014-10-01 2014-10 2014 10 201410 2.9 2.2
2014-11-01 2014-11 2014 11 201411 2.7 2.1
2014-12-01 2014-12 2014 12 201412 2.5 2.1
2015-01-01 2015-01 2015 1 201501 2.2 2.1
2015-02-01 2015-02 2015 2 201502 2 2
2015-03-01 2015-03 2015 3 201503 2.2 2.1
2015-04-01 2015-04 2015 4 201504 0.3 0.4
2015-05-01 2015-05 2015 5 201505 0.1 0.4
2015-06-01 2015-06 2015 6 201506 0.1 0.6
2015-07-01 2015-07 2015 7 201507 0 0.6
2015-08-01 2015-08 2015 8 201508 -0.1 0.8
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var t=d.d3_calcType(c,r,j,k,m,p),u=a.selectAll(".cell").data(t.data),v=u.enter().append("g",".cell").attr("class","cell").style("opacity",1e-6);shapeEnter=v.append(e).attr("class","swatch"),shapes=u.select("g.cell "+e),d.d3_addEvents(v,s),u.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(e,shapes,g,f,h,b),d.d3_addText(a,v,t.labels);var w=u.select("text"),x=shapes[0].map(function(a){return a.getBBox()});l?shapes.attr("class",function(a){return"swatch "+t.feature(a)}):"line"==e?shapes.style("stroke",t.feature):shapes.style("fill",t.feature);var y,z,A="start"==o?0:"middle"==o?.5:1;"vertical"===q?(y=function(a,b){return"translate(0, "+b*(x[b].height+i)+")"},z=function(a,b){return"translate("+(x[b].width+x[b].x+n)+","+(x[b].y+x[b].height/2+5)+")"}):"horizontal"===q&&(y=function(a,b){return"translate("+b*(x[b].width+i)+",0)"},z=function(a,b){return"translate("+(x[b].width*A+x[b].x)+","+(x[b].height+x[b].y+n+8)+")"}),d.d3_placement(q,u,y,w,z,o),u.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=15,h=10,i=2,j=[5],k=[],l=!1,m=d3.format(".01f"),n=10,o="middle",p="to",q="vertical",r=!1,s=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(j=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c||"path"==c&&"string"==typeof d)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapeHeight=function(b){return arguments.length?(g=+b,a):a},a.shapeRadius=function(b){return arguments.length?(h=+b,a):a},a.shapePadding=function(b){return arguments.length?(i=+b,a):a},a.labels=function(b){return arguments.length?(k=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(o=b),a):a},a.labelFormat=function(b){return arguments.length?(m=b,a):a},a.labelOffset=function(b){return arguments.length?(n=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(p=b,a):a},a.useClass=function(b){return arguments.length?((b===!0||b===!1)&&(l=b),a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(q=b),a):a},a.ascending=function(b){return arguments.length?(r=!!b,a):a},d3.rebind(a,s,"on"),a}},{"./legend":2}],2:[function(a,b,c){b.exports={d3_identity:function(a){return a},d3_mergeLabels:function(a,b){if(0===b.length)return a;a=a?a:[];for(var c=b.length;c<a.length;c++)b.push(a[c]);return b},d3_linearLegend:function(a,b,c){var d=[];if(b.length>1)d=b;else for(var e=a.domain(),f=(e[e.length-1]-e[0])/(b-1),g=0;b>g;g++)d.push(e[0]+g*f);var h=d.map(c);return{data:d,labels:h,feature:function(b){return a(b)}}},d3_quantLegend:function(a,b,c){var d=a.range().map(function(d){var e=a.invertExtent(d);b(e[0]),b(e[1]);return b(e[0])+" "+c+" "+b(e[1])});return{data:a.range(),labels:d,feature:this.d3_identity}},d3_ordinalLegend:function(a){return{data:a.domain(),labels:a.domain(),feature:function(b){return a(b)}}},d3_drawShapes:function(a,b,c,d,e,f){"rect"===a?b.attr("height",c).attr("width",d):"circle"===a?b.attr("r",e):"line"===a?b.attr("x1",0).attr("x2",d).attr("y1",0).attr("y2",0):"path"===a&&b.attr("d",f)},d3_addText:function(a,b,c){b.append("text").attr("class","label"),a.selectAll("g.cell text").data(c).text(this.d3_identity)},d3_calcType:function(a,b,c,d,e,f){var g=a.ticks?this.d3_linearLegend(a,c,e):a.invertExtent?this.d3_quantLegend(a,e,f):this.d3_ordinalLegend(a);return g.labels=this.d3_mergeLabels(g.labels,d),b&&(g.labels=this.d3_reverse(g.labels),g.data=this.d3_reverse(g.data)),g},d3_reverse:function(a){for(var b=[],c=0,d=a.length;d>c;c++)b[c]=a[d-c-1];return b},d3_placement:function(a,b,c,d,e,f){b.attr("transform",c),d.attr("transform",e),"horizontal"===a&&d.style("text-anchor",f)},d3_addEvents:function(a,b){var c=this;a.on("mouseover.legend",function(a){c.d3_cellOver(b,a,this)}).on("mouseout.legend",function(a){c.d3_cellOut(b,a,this)}).on("click.legend",function(a){c.d3_cellClick(b,a,this)})},d3_cellOver:function(a,b,c){a.cellover.call(c,b)},d3_cellOut:function(a,b,c){a.cellout.call(c,b)},d3_cellClick:function(a,b,c){a.cellclick.call(c,b)}}},{}],3:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var q=d.d3_calcType(c,o,h,i,j,m),r=a.selectAll(".cell").data(q.data),s=r.enter().append("g",".cell").attr("class","cell").style("opacity",1e-6);shapeEnter=s.append(e).attr("class","swatch"),shapes=r.select("g.cell "+e),d.d3_addEvents(s,p),r.exit().transition().style("opacity",0).remove(),"line"===e?(d.d3_drawShapes(e,shapes,0,f),shapes.attr("stroke-width",q.feature)):d.d3_drawShapes(e,shapes,q.feature,q.feature,q.feature,b),d.d3_addText(a,s,q.labels);var t,u,v=r.select("text"),w=shapes[0].map(function(a,b){var d=a.getBBox(),f=c(q.data[b]);return"line"===e&&"horizontal"===n?d.height=d.height+f:"line"===e&&"vertical"===n&&(d.width=d.width),d}),x=d3.max(w,function(a){return a.height+a.y}),y=d3.max(w,function(a){return a.width+a.x}),z="start"==l?0:"middle"==l?.5:1;"vertical"===n?(t=function(a,b){var c=d3.sum(w.slice(0,b+1),function(a){return a.height});return"translate(0, "+(c+b*g)+")"},u=function(a,b){return"translate("+(y+k)+","+(w[b].y+w[b].height/2+5)+")"}):"horizontal"===n&&(t=function(a,b){var c=d3.sum(w.slice(0,b+1),function(a){return a.width});return"translate("+(c+b*g)+",0)"},u=function(a,b){return"translate("+(w[b].width*z+w[b].x)+","+(x+k)+")"}),d.d3_placement(n,r,t,v,u,l),r.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=2,h=[5],i=[],j=d3.format(".01f"),k=10,l="middle",m="to",n="vertical",o=!1,p=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(h=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapePadding=function(b){return arguments.length?(g=+b,a):a},a.labels=function(b){return arguments.length?(i=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(l=b),a):a},a.labelFormat=function(b){return arguments.length?(j=b,a):a},a.labelOffset=function(b){return arguments.length?(k=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(m=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(n=b),a):a},a.ascending=function(b){return arguments.length?(o=!!b,a):a},d3.rebind(a,p,"on"),a}},{"./legend":2}],4:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var r=d.d3_calcType(b,p,i,j,k,n),s=a.selectAll(".cell").data(r.data),t=s.enter().append("g",".cell").attr("class","cell").style("opacity",1e-6);shapeEnter=t.append(c).attr("class","swatch"),shapes=s.select("g.cell "+c),d.d3_addEvents(t,q),s.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(c,shapes,f,e,g,r.feature),d.d3_addText(a,t,r.labels);var u,v,w=s.select("text"),x=shapes[0].map(function(a){return a.getBBox()}),y=d3.max(x,function(a){return a.height}),z=d3.max(x,function(a){return a.width}),A="start"==l?0:"middle"==l?.5:1;"vertical"===o?(u=function(a,b){return"translate(0, "+b*(y+h)+")"},v=function(a,b){return"translate("+(z+m)+","+(x[b].y+x[b].height/2+5)+")"}):"horizontal"===o&&(u=function(a,b){return"translate("+b*(z+h)+",0)"},v=function(a,b){return"translate("+(x[b].width*A+x[b].x)+","+(y+m)+")"}),d.d3_placement(o,s,u,w,v,l),s.transition().style("opacity",1)}var b=d3.scale.linear(),c="path",e=15,f=15,g=10,h=5,i=[5],j=[],k=d3.format(".01f"),l="middle",m=10,n="to",o="vertical",p=!1,q=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(c){return arguments.length?(b=c,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(i=b),a):a},a.shapePadding=function(b){return arguments.length?(h=+b,a):a},a.labels=function(b){return arguments.length?(j=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(l=b),a):a},a.labelFormat=function(b){return arguments.length?(k=b,a):a},a.labelOffset=function(b){return arguments.length?(m=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(n=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(o=b),a):a},a.ascending=function(b){return arguments.length?(p=!!b,a):a},d3.rebind(a,q,"on"),a}},{"./legend":2}],5:[function(a,b,c){d3.legend={color:a("./color"),size:a("./size"),symbol:a("./symbol")}},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.axis text {
font: 15px sans-serif;
}
.axis path {
}
/* No fill, No stroke for x axis. */
.x.axis path {
fill: none;
stroke: none;
}
.y.axis path {
fill: Aquamarine;
fill-opacity: 0.4;
stroke: black;
stroke-width: 1;
opacity: 0.2;
shape-rendering: crispEdges;
}
.axis line {
stroke: #000;
stroke-width: 1;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: DarkGreen;
stroke-width: 1.5px;
}
.grid .tick {
stroke: black;
opacity: 1;
stroke-width: 1;
}
.grid path {
fill: None;
opacity: 0;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-legend.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 80, left: 100},
width = 400 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// Data file name.
var csv_name = "cpi_same-month1.csv";
// Data column names.
var y_column = "Year-Month",
x_column1 = "All items, less fresh food";
x_column2 = "All items, less food (less alcoholic beverages) and energy";
x_color1 = "steelBlue";
x_color2 = "red";
// Offset between chart and axis.
var x_offset = 2;
var y_offset = 4;
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 + ")");
d3.csv(csv_name, function(data){
var xMax = d3.max(data,function(d){ return Math.max(+d[x_column1],+d[x_column2]); });
var xMin = d3.min(data,function(d){ return Math.min(+d[x_column1],+d[x_column2]); });
var format = d3.time.format("%Y-%m");
var newFormat = d3.time.format("%Y-%m");
// Color scale for legend.
var colorOrdinal = d3.scale.ordinal().domain([x_column1,x_column2]).range([x_color1,x_color2]);
var yScale = d3.scale.linear()
.domain([0 - y_offset, data.length + y_offset])
.range([height, 0]);
var xScale = d3.scale.linear()
.domain([xMin - x_offset,xMax + x_offset])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(8)
.orient("bottom")
.tickSize(4, -width);
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(10)
.orient("left")
.tickSize(6, -height)
.tickFormat(function(i){
var f = format.parse(data[i][y_column]);
return newFormat(f);
});
// Line for x=0.
var gridAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(height, height)
.tickValues([0])
.tickFormat("");
var legend = d3.legend.color()
.scale(colorOrdinal)
.orient('vertical')
.shape("circle")
.shapeWidth(30)
.shapeHeight(30)
.shapeRadius(5)
.shapePadding(5)
.labelOffset(5)
.labels([
"CPI, less fresh food",
"CPI, less food and energy"]);
svg.selectAll(".circle1")
.data(data)
.enter()
.append("circle")
.attr("class","circle1")
.attr("r",2)
.attr("fill", "steelBlue")
.attr("cx", function(d){ return xScale(d[x_column1]); })
.attr("cy", function(d,i){ return yScale(i); });
svg.selectAll(".circle2")
.data(data)
.enter()
.append("circle")
.attr("class","circle2")
.attr("r",2)
.attr("fill", function(){ return colorOrdinal(x_column2); })
.attr("cx", function(d){ return xScale(d[x_column2]); })
.attr("cy", function(d,i){ return yScale(i); });
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", 35)
.attr("x",width/2)
.style("text-anchor", "middle")
.text("Same month of the last year (%)");
// Make line for x=0.
svg.append("g")
.attr("class","grid")
.call(gridAxis);
// Make legend.
svg.append("g").call(legend)
.attr("transform", "translate(0," + String(height + margin.bottom - 30) + ")");
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment