puzzler10/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Let's say you're a restaurant owner, and you want to see exactly how important good table service is to your business. If you use the NPS system, you will have a number of reviews (possibly many if you own multiple restaruants) with ratings between 0 and 10 and comments.
You categorise each review into a number of predefined categories - good/bad table service, good/bad food,  good/bad atmosphere , etc. If you categorise enough of these reviews, then you could fit a multiple linear regression model to quantify exactly just how much good table service affects your NPS score.
This is one way you could visualise these results. You can interpret the above pretty easily - good service adds 30.8 points to your NPS, while a meal that isn't good will take away 45.2 NPS points. You can quickly see how important each factor is.
Note that the values and the categories should not be taken literally - they were simply made up for illustration purposes.
See http://www.puzzlr.org/ for more examples.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>

line {
	stroke-width: 5px;
}

.label {
	 font-family: sans-serif;
	 font-style: normal;
	 font-weight: normal;
	 font-size: 1em;
}
.axis{
	font-weight: bold;

}
</style>
</head>
<body>
<script>
var svgHeight = 700
var svgWidth = 950
var offset = 13
var svg = d3.select("body").append("svg")
			.attr("height", svgHeight)
			.attr("width", svgWidth);


var data = [
{'y': 40 , 'color': '#FF0000', 'pos': 30.8 , "neg": -51.3, "label": "table_service", "leftlabel": "poor service", "rightlabel": "good service" },
{'y': 140 , 'color': '#0000CC', 'pos': 50.1 , "neg": -45.1, "label": "speed", "leftlabel": "slow", "rightlabel": "quick" }, //blue
{'y': 240 , 'color': '#006600', 'pos': 30.3 , "neg": -45.2, "label": "taste", "leftlabel": "not tasty", "rightlabel":"tasty"}, //green
{'y': 340 , 'color': '#FF6600', 'pos': 28.6 , "neg": 0, "label": "simple", "leftlabel":"","rightlabel": "good atmosphere"}, //orange
{'y': 440 , 'color': '#FF44FF', 'pos': 22.3 , "neg": 0, "label": "personal", "leftlabel": "", "rightlabel": "personal service"}, //pink
{'y': 540 , 'color': '#9900FF', 'pos': 0 , "neg": -24.9, "label": "updates", "leftlabel": "too many updates", "rightlabel":""} //purple
]

var min = Math.min.apply(Math,data.map(function(d){return d.neg;}))
var max = Math.max.apply(Math,data.map(function(d){return d.pos;}))

var xScale = d3.scale.linear()
		.domain([min, max])
		.range([100,svgWidth-100]);
;

var line = svg.selectAll("line")
			.data(data)
			.enter()
			.append("line")
			.each(function (d) {
				d3.select(this).attr({
					x1: xScale(d.neg),
					x2: xScale(d.pos),
					y1: d.y,
					y2: d.y,
					stroke: d.color,
					label : d.label
				})

			});

//axis
svg.append("line")
	.attr("x1", xScale(0))
	.attr("x2", xScale(0))
	.attr("y1", 0)
	.attr("y2", 600)
	.style("stroke", "grey")
	.style("stroke-width", "3px");

//axis label
svg.append("text")
	.attr("class","axis label")
	.attr("x", xScale(0) + 10)
	.attr("y", 20)
	.style("stroke", "9900FF")
	.text("0")


var pts = svg.selectAll("circle")
			.data(data)
			.enter()

//Left points
pts.append("circle")
		.attr("class", "leftcircle")
			.each(function(d){
				temp = d.neg
				if (temp != 0)
				{
					d3.select(this).attr(
					{
						cx: xScale(d.neg),
						cy: d.y,
						fill: d.color,
						r: 7
					})
				}
			});


//Right Points
pts.append("circle")
	.attr("class", "rightcircle")
	.each(function(d){
	if(d.pos != 0)
	{
		d3.select(this).attr(
		{
			cx: xScale(d.pos),
			cy: d.y,
			fill: d.color,
			r: 7
		})
	}
}
);

//Left Labels
pts.append("text")
	.attr("class", "left label")
	.each(function(d){
	if(d.neg != 0)
	{
		d3.select(this).attr (
		{
			x: xScale(d.neg),
			y: d.y - offset,
			fill: d.color
		}
		)
		.text(d.leftlabel)
		.style("text-anchor", "middle");
	}
}
);

//Right Labels
pts.append("text")
	.attr("class", "right label")
	.each(function(d){
	if(d.pos != 0)
	{
		d3.select(this).attr (
		{
			x: xScale(d.pos),
			y: d.y - offset,
			fill: d.color
		}
		)
		.text(d.rightlabel)
		//.style("stroke",d.color);
		.attr("text-anchor", "middle")
	}
}
);


//Left value labels
pts.append("text")
	.attr("class", "left label value")
	.each(function(d){
	if(d.neg != 0)
	{
		d3.select(this).text(d.neg)
		d3.select(this).attr (
		{
			x: xScale(d.neg),
			y: d.y + 2* offset,
			fill: d.color
		}
		)
		d3.select(this).style("text-anchor", "middle")
	}
}
);

//Right value labels
pts.append("text")
	.attr("class", "right label value")
	.each(function(d){
	if(d.pos != 0)
	{
		d3.select(this).text(d.pos)
		d3.select(this).attr (
		{
			x: xScale(d.pos),
			y: d.y + 2* offset,
			fill: d.color
		}
		)
		d3.select(this).style("text-anchor", "middle")
	}
}
);

//Style rectangles
pts.append("rect")
	.attr("class", "background")
	.each(function(d)  {
		d3.select(this).attr(
		{
			x: 0,
			y: d.y - 40,
			height: 100,
			width: svgWidth,
			fill: d.color
		}
		)
	d3.select(this).style("opacity", 0.25)
	}
);
</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<style>

	line {
	stroke-width: 5px;
	}

	.label {
	font-family: sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
	}
	.axis{
	font-weight: bold;

	}
	</style>
	</head>
	<body>
	<script>
	var svgHeight = 700
	var svgWidth = 950
	var offset = 13
	var svg = d3.select("body").append("svg")
	.attr("height", svgHeight)
	.attr("width", svgWidth);


	var data = [
	{'y': 40 , 'color': '#FF0000', 'pos': 30.8 , "neg": -51.3, "label": "table_service", "leftlabel": "poor service", "rightlabel": "good service" },
	{'y': 140 , 'color': '#0000CC', 'pos': 50.1 , "neg": -45.1, "label": "speed", "leftlabel": "slow", "rightlabel": "quick" }, //blue
	{'y': 240 , 'color': '#006600', 'pos': 30.3 , "neg": -45.2, "label": "taste", "leftlabel": "not tasty", "rightlabel":"tasty"}, //green
	{'y': 340 , 'color': '#FF6600', 'pos': 28.6 , "neg": 0, "label": "simple", "leftlabel":"","rightlabel": "good atmosphere"}, //orange
	{'y': 440 , 'color': '#FF44FF', 'pos': 22.3 , "neg": 0, "label": "personal", "leftlabel": "", "rightlabel": "personal service"}, //pink
	{'y': 540 , 'color': '#9900FF', 'pos': 0 , "neg": -24.9, "label": "updates", "leftlabel": "too many updates", "rightlabel":""} //purple
	]

	var min = Math.min.apply(Math,data.map(function(d){return d.neg;}))
	var max = Math.max.apply(Math,data.map(function(d){return d.pos;}))

	var xScale = d3.scale.linear()
	.domain([min, max])
	.range([100,svgWidth-100]);
	;

	var line = svg.selectAll("line")
	.data(data)
	.enter()
	.append("line")
	.each(function (d) {
	d3.select(this).attr({
	x1: xScale(d.neg),
	x2: xScale(d.pos),
	y1: d.y,
	y2: d.y,
	stroke: d.color,
	label : d.label
	})

	});

	//axis
	svg.append("line")
	.attr("x1", xScale(0))
	.attr("x2", xScale(0))
	.attr("y1", 0)
	.attr("y2", 600)
	.style("stroke", "grey")
	.style("stroke-width", "3px");

	//axis label
	svg.append("text")
	.attr("class","axis label")
	.attr("x", xScale(0) + 10)
	.attr("y", 20)
	.style("stroke", "9900FF")
	.text("0")


	var pts = svg.selectAll("circle")
	.data(data)
	.enter()

	//Left points
	pts.append("circle")
	.attr("class", "leftcircle")
	.each(function(d){
	temp = d.neg
	if (temp != 0)
	{
	d3.select(this).attr(
	{
	cx: xScale(d.neg),
	cy: d.y,
	fill: d.color,
	r: 7
	})
	}
	});


	//Right Points
	pts.append("circle")
	.attr("class", "rightcircle")
	.each(function(d){
	if(d.pos != 0)
	{
	d3.select(this).attr(
	{
	cx: xScale(d.pos),
	cy: d.y,
	fill: d.color,
	r: 7
	})
	}
	}
	);

	//Left Labels
	pts.append("text")
	.attr("class", "left label")
	.each(function(d){
	if(d.neg != 0)
	{
	d3.select(this).attr (
	{
	x: xScale(d.neg),
	y: d.y - offset,
	fill: d.color
	}
	)
	.text(d.leftlabel)
	.style("text-anchor", "middle");
	}
	}
	);

	//Right Labels
	pts.append("text")
	.attr("class", "right label")
	.each(function(d){
	if(d.pos != 0)
	{
	d3.select(this).attr (
	{
	x: xScale(d.pos),
	y: d.y - offset,
	fill: d.color
	}
	)
	.text(d.rightlabel)
	//.style("stroke",d.color);
	.attr("text-anchor", "middle")
	}
	}
	);


	//Left value labels
	pts.append("text")
	.attr("class", "left label value")
	.each(function(d){
	if(d.neg != 0)
	{
	d3.select(this).text(d.neg)
	d3.select(this).attr (
	{
	x: xScale(d.neg),
	y: d.y + 2* offset,
	fill: d.color
	}
	)
	d3.select(this).style("text-anchor", "middle")
	}
	}
	);

	//Right value labels
	pts.append("text")
	.attr("class", "right label value")
	.each(function(d){
	if(d.pos != 0)
	{
	d3.select(this).text(d.pos)
	d3.select(this).attr (
	{
	x: xScale(d.pos),
	y: d.y + 2* offset,
	fill: d.color
	}
	)
	d3.select(this).style("text-anchor", "middle")
	}
	}
	);

	//Style rectangles
	pts.append("rect")
	.attr("class", "background")
	.each(function(d) {
	d3.select(this).attr(
	{
	x: 0,
	y: d.y - 40,
	height: 100,
	width: svgWidth,
	fill: d.color
	}
	)
	d3.select(this).style("opacity", 0.25)
	}
	);
	</script>
	</body>
	</html>