D3.js and Blender: Vertical plot for CPI of Japan

This entry is part 4 of 6 in the series Japanese politics and money

Notice:

This is a post for exploratory purpose. If you want to know accurate description or interpretation on the subject, please check the sources and other opinions by specialists for the field.

 

Data visualization and interpretation for CPI:

This is CPI of Japan from 2000 to earlier 2015.
Japanese government and Bank of Japan primarily use “core CPI” which omits fresh food. But there is another metric to exclude items of energy, “core-core CPI” which is similar with the CPI of FRB.
The chart below show core CPI as blue dot, core-core CPI as red dot.

linechart_vertical2_two_legend1

Effect of energy prices:

The today’s important concern on the CPI is effect of Abenomics.
Abenomics aims to reach 2% inflation of core CPI. But the core CPI has some problems to measure non-cost push inflation and non-resource price-based inflation.

There are sometimes discrepancies between core and core-core.
The only core CPI(blue) dots jumped above the 2% at 2008. Also, during 2014, the blue dots was high separating red dots again.
It can be effect of energy prices, meaning core CPI can be pulled by fluctuation of energy prices.

Although the core CPI covers more item than the core-core CPI, the core CPI has weakness to see the actual result of fiscal policy.

 

Effect of rise of consumption tax rate:

The chart below is more recent trend from 2011 to August, 2015.

linechart_vertical2_two_legend1_2011-2014

The trend shows the big leap during 2014. The jump happened almost at the same time of rise of consumption tax rate from 5% to 8%.

The both core CPI and core-core CPI harbor effect of tax rate. So, the chart itself can’t say how much of the inflation was responsible for credit expansion by Abenomics, and tax rate.

Although the effect of consumption tax is mentioned to be ruled out for the goal of inflation, the estimation would be differ from model. But sorry I haven’t research much about this.

 

Effect of Abenomics:

So, there are at least energy prices and consumption tax as confounding factors in the core CPI aside from Abenomics effect.

But possibility of  frayed rope in Abenomics has already shown in the plot.
The acceleration of inflation had been dwindling in the recent months in 2015, looking like backwater.
Also, wages for small and medium-sized companies, the big node for economical circuit, seems not to quickly respond with the inflation (I plan to make a post for  the dataset and data visualization for it in the near future).

It is core for the argument whether the next rise of consumption tax to 10% is right on the track for Japanese economy.

 

Future tasks:

  • Making dataset and data visualization for distribution ratio of wage in small and medium-sized companies.
  • Data visualization to easily understand difference between change ratio and trend of index.

 

CGI:

I also made a stone tablet by Blender. The holes on the stone was made by displace modifier using the png image of the chart.
The concept came to me since I felt the chart looks like a stone of tree of life in the animation movie, “Ghost in the Shell”.

 

lithograph_2dchart1

ghost-in-the-shell_tree-of-life

 


 

Source, code, and data:

The links:

The Japanese CPI data is 統計表一覧 政府統計の総合窓口 GL08020103.

The gist of the data and Javascript file is “D3 plot for Japanese CPI of core and corecore.“.

The code of Javascript with D3.js:

The legend is d3-legend.susielu.com.

<!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>

 

The CPI data:

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 -0
2000-02-01 2000-02 2000 2 200002 -0 -0
2000-03-01 2000-03 2000 3 200003 -0 -0
2000-04-01 2000-04 2000 4 200004 -0 -1
2000-05-01 2000-05 2000 5 200005 -0 -0
2000-06-01 2000-06 2000 6 200006 -0 -1
2000-07-01 2000-07 2000 7 200007 -0 -0
2000-08-01 2000-08 2000 8 200008 -0 -1
2000-09-01 2000-09 2000 9 200009 -1 -1
2000-10-01 2000-10 2000 10 200010 -1 -1
2000-11-01 2000-11 2000 11 200011 -1 -1
2000-12-01 2000-12 2000 12 200012 -1 -1
2001-01-01 2001-01 2001 1 200101 -1 -1
2001-02-01 2001-02 2001 2 200102 -1 -1
2001-03-01 2001-03 2001 3 200103 -1 -1
2001-04-01 2001-04 2001 4 200104 -1 -1
2001-05-01 2001-05 2001 5 200105 -1 -1
2001-06-01 2001-06 2001 6 200106 -1 -1
2001-07-01 2001-07 2001 7 200107 -1 -1
2001-08-01 2001-08 2001 8 200108 -1 -1
2001-09-01 2001-09 2001 9 200109 -1 -1
2001-10-01 2001-10 2001 10 200110 -1 -1
2001-11-01 2001-11 2001 11 200111 -1 -1
2001-12-01 2001-12 2001 12 200112 -1 -1
2002-01-01 2002-01 2002 1 200201 -1 -1
2002-02-01 2002-02 2002 2 200202 -1 -1
2002-03-01 2002-03 2002 3 200203 -1 -1
2002-04-01 2002-04 2002 4 200204 -1 -1
2002-05-01 2002-05 2002 5 200205 -1 -1
2002-06-01 2002-06 2002 6 200206 -1 -1
2002-07-01 2002-07 2002 7 200207 -1 -1
2002-08-01 2002-08 2002 8 200208 -1 -1
2002-09-01 2002-09 2002 9 200209 -1 -1
2002-10-01 2002-10 2002 10 200210 -1 -1
2002-11-01 2002-11 2002 11 200211 -1 -1
2002-12-01 2002-12 2002 12 200212 -1 -1
2003-01-01 2003-01 2003 1 200301 -1 -1
2003-02-01 2003-02 2003 2 200302 -1 -1
2003-03-01 2003-03 2003 3 200303 -1 -1
2003-04-01 2003-04 2003 4 200304 -0 -0
2003-05-01 2003-05 2003 5 200305 -0 -0
2003-06-01 2003-06 2003 6 200306 -0 -0
2003-07-01 2003-07 2003 7 200307 -0 0
2003-08-01 2003-08 2003 8 200308 -0 -0
2003-09-01 2003-09 2003 9 200309 -0 -0
2003-10-01 2003-10 2003 10 200310 0 -0
2003-11-01 2003-11 2003 11 200311 -0 -0
2003-12-01 2003-12 2003 12 200312 0 -0
2004-01-01 2004-01 2004 1 200401 -0 -0
2004-02-01 2004-02 2004 2 200402 0 -0
2004-03-01 2004-03 2004 3 200403 -0 -0
2004-04-01 2004-04 2004 4 200404 -0 -1
2004-05-01 2004-05 2004 5 200405 -0 -1
2004-06-01 2004-06 2004 6 200406 -0 -1
2004-07-01 2004-07 2004 7 200407 -0 -1
2004-08-01 2004-08 2004 8 200408 -0 -1
2004-09-01 2004-09 2004 9 200409 0 -1
2004-10-01 2004-10 2004 10 200410 -0 -1
2004-11-01 2004-11 2004 11 200411 -0 -1
2004-12-01 2004-12 2004 12 200412 -0 -1
2005-01-01 2005-01 2005 1 200501 -0 -1
2005-02-01 2005-02 2005 2 200502 -0 -1
2005-03-01 2005-03 2005 3 200503 -0 -1
2005-04-01 2005-04 2005 4 200504 -0 -1
2005-05-01 2005-05 2005 5 200505 0 -0
2005-06-01 2005-06 2005 6 200506 -0 -0
2005-07-01 2005-07 2005 7 200507 -0 -0
2005-08-01 2005-08 2005 8 200508 -0 -1
2005-09-01 2005-09 2005 9 200509 -0 -0
2005-10-01 2005-10 2005 10 200510 0 -0
2005-11-01 2005-11 2005 11 200511 0 -0
2005-12-01 2005-12 2005 12 200512 0 0
2006-01-01 2006-01 2006 1 200601 -0 -1
2006-02-01 2006-02 2006 2 200602 0 -1
2006-03-01 2006-03 2006 3 200603 0 -1
2006-04-01 2006-04 2006 4 200604 -0 -1
2006-05-01 2006-05 2006 5 200605 0 -1
2006-06-01 2006-06 2006 6 200606 0 -0
2006-07-01 2006-07 2006 7 200607 0 -0
2006-08-01 2006-08 2006 8 200608 0 -0
2006-09-01 2006-09 2006 9 200609 0 -1
2006-10-01 2006-10 2006 10 200610 0 -0
2006-11-01 2006-11 2006 11 200611 0 -0
2006-12-01 2006-12 2006 12 200612 0 -0
2007-01-01 2007-01 2007 1 200701 0 -0
2007-02-01 2007-02 2007 2 200702 -0 -0
2007-03-01 2007-03 2007 3 200703 -0 -0
2007-04-01 2007-04 2007 4 200704 -0 -0
2007-05-01 2007-05 2007 5 200705 -0 -0
2007-06-01 2007-06 2007 6 200706 -0 -0
2007-07-01 2007-07 2007 7 200707 -0 -1
2007-08-01 2007-08 2007 8 200708 -0 -0
2007-09-01 2007-09 2007 9 200709 -0 -0
2007-10-01 2007-10 2007 10 200710 0 -0
2007-11-01 2007-11 2007 11 200711 0 -0
2007-12-01 2007-12 2007 12 200712 1 -0
2008-01-01 2008-01 2008 1 200801 1 -0
2008-02-01 2008-02 2008 2 200802 1 -0
2008-03-01 2008-03 2008 3 200803 1 0
2008-04-01 2008-04 2008 4 200804 1 -0
2008-05-01 2008-05 2008 5 200805 2 -0
2008-06-01 2008-06 2008 6 200806 2 0
2008-07-01 2008-07 2008 7 200807 2 0
2008-08-01 2008-08 2008 8 200808 2 0
2008-09-01 2008-09 2008 9 200809 2 0
2008-10-01 2008-10 2008 10 200810 2 0
2008-11-01 2008-11 2008 11 200811 1 0
2008-12-01 2008-12 2008 12 200812 0 0
2009-01-01 2009-01 2009 1 200901 0 -0
2009-02-01 2009-02 2009 2 200902 0 -0
2009-03-01 2009-03 2009 3 200903 -0 -0
2009-04-01 2009-04 2009 4 200904 -0 -0
2009-05-01 2009-05 2009 5 200905 -1 -1
2009-06-01 2009-06 2009 6 200906 -2 -1
2009-07-01 2009-07 2009 7 200907 -2 -1
2009-08-01 2009-08 2009 8 200908 -2 -1
2009-09-01 2009-09 2009 9 200909 -2 -1
2009-10-01 2009-10 2009 10 200910 -2 -1
2009-11-01 2009-11 2009 11 200911 -2 -1
2009-12-01 2009-12 2009 12 200912 -1 -1
2010-01-01 2010-01 2010 1 201001 -1 -1
2010-02-01 2010-02 2010 2 201002 -1 -1
2010-03-01 2010-03 2010 3 201003 -1 -1
2010-04-01 2010-04 2010 4 201004 -2 -2
2010-05-01 2010-05 2010 5 201005 -1 -2
2010-06-01 2010-06 2010 6 201006 -1 -2
2010-07-01 2010-07 2010 7 201007 -1 -2
2010-08-01 2010-08 2010 8 201008 -1 -2
2010-09-01 2010-09 2010 9 201009 -1 -2
2010-10-01 2010-10 2010 10 201010 -1 -1
2010-11-01 2010-11 2010 11 201011 -1 -1
2010-12-01 2010-12 2010 12 201012 -0 -1
2011-01-01 2011-01 2011 1 201101 -1 -1
2011-02-01 2011-02 2011 2 201102 -1 -1
2011-03-01 2011-03 2011 3 201103 -1 -1
2011-04-01 2011-04 2011 4 201104 -0 -1
2011-05-01 2011-05 2011 5 201105 -0 -1
2011-06-01 2011-06 2011 6 201106 -0 -1
2011-07-01 2011-07 2011 7 201107 0 -1
2011-08-01 2011-08 2011 8 201108 0 -1
2011-09-01 2011-09 2011 9 201109 0 -0
2011-10-01 2011-10 2011 10 201110 -0 -1
2011-11-01 2011-11 2011 11 201111 -0 -1
2011-12-01 2011-12 2011 12 201112 -0 -1
2012-01-01 2012-01 2012 1 201201 -0 -1
2012-02-01 2012-02 2012 2 201202 0 -1
2012-03-01 2012-03 2012 3 201203 0 -1
2012-04-01 2012-04 2012 4 201204 0 -0
2012-05-01 2012-05 2012 5 201205 -0 -1
2012-06-01 2012-06 2012 6 201206 -0 -1
2012-07-01 2012-07 2012 7 201207 -0 -1
2012-08-01 2012-08 2012 8 201208 -0 -1
2012-09-01 2012-09 2012 9 201209 -0 -1
2012-10-01 2012-10 2012 10 201210 0 -1
2012-11-01 2012-11 2012 11 201211 -0 -1
2012-12-01 2012-12 2012 12 201212 -0 -1
2013-01-01 2013-01 2013 1 201301 -0 -1
2013-02-01 2013-02 2013 2 201302 -0 -1
2013-03-01 2013-03 2013 3 201303 -1 -1
2013-04-01 2013-04 2013 4 201304 -0 -1
2013-05-01 2013-05 2013 5 201305 0 -0
2013-06-01 2013-06 2013 6 201306 0 -0
2013-07-01 2013-07 2013 7 201307 1 -0
2013-08-01 2013-08 2013 8 201308 1 -0
2013-09-01 2013-09 2013 9 201309 1 0
2013-10-01 2013-10 2013 10 201310 1 0
2013-11-01 2013-11 2013 11 201311 1 1
2013-12-01 2013-12 2013 12 201312 1 1
2014-01-01 2014-01 2014 1 201401 1 1
2014-02-01 2014-02 2014 2 201402 1 1
2014-03-01 2014-03 2014 3 201403 1 1
2014-04-01 2014-04 2014 4 201404 3 2
2014-05-01 2014-05 2014 5 201405 3 2
2014-06-01 2014-06 2014 6 201406 3 2
2014-07-01 2014-07 2014 7 201407 3 2
2014-08-01 2014-08 2014 8 201408 3 2
2014-09-01 2014-09 2014 9 201409 3 2
2014-10-01 2014-10 2014 10 201410 3 2
2014-11-01 2014-11 2014 11 201411 3 2
2014-12-01 2014-12 2014 12 201412 3 2
2015-01-01 2015-01 2015 1 201501 2 2
2015-02-01 2015-02 2015 2 201502 2 2
2015-03-01 2015-03 2015 3 201503 2 2
2015-04-01 2015-04 2015 4 201504 0 0
2015-05-01 2015-05 2015 5 201505 0 0
2015-06-01 2015-06 2015 6 201506 0 1
2015-07-01 2015-07 2015 7 201507 0 1
2015-08-01 2015-08 2015 8 201508 -0 1
Series Navigation<< A staffing company drives Abe administration to fire workers and get subsidyYakuza 3D map with stacking symbols >>

Leave a Reply