josiahdavis/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    Responsive Scatter Chart


## giniDummy.csv

          
            Metric
            SubCategory
            Category
            TotalValue
            ProductConcentration
            CustomerConcentration

            
              Cost
              Copiers
              Technology
              93910.21
              0.030137063
              0.087770725

            
              Cost
              Machines
              Technology
              185853.87
              0.727932545
              0.234178493

            
              Cost
              Supplies
              Office Supplies
              47862.64
              0.869843455
              0.967766883

            
              Cost
              Bookcases
              Furniture
              118352.55
              0.185026777
              0.627607548

            
              Cost
              Envelopes
              Office Supplies
              9512.23
              0.080804313
              0.914777644

            
              Cost
              Fasteners
              Office Supplies
              2074.76
              0.303772145
              0.029366578

            
              Cost
              Tables
              Furniture
              224691.01
              0.742161958
              0.886106234

            
              Cost
              Labels
              Office Supplies
              6940.06
              0.06212297
              0.655249515

            
              Cost
              Appliances
              Office Supplies
              89394.16
              0.52971077
              0.439508931

            
              Cost
              Chairs
              Furniture
              301858.94
              0.318459499
              0.209223271

            
              Cost
              Accessories
              Technology
              125443.68
              0.565379441
              0.618075232

            
              Cost
              Art
              Office Supplies
              20591.01
              0.746932104
              0.232158633

            
              Cost
              Storage
              Office Supplies
              202564.78
              0.665022485
              0.230177646

            
              Cost
              Phones
              Technology
              285491.32
              0.554136398
              0.751528667

            
              Cost
              Furnishings
              Furniture
              78646.02
              0.159382955
              0.775545349

            
              Cost
              Paper
              Office Supplies
              44425.64
              0.324886509
              0.508537074

            
              Cost
              Binders
              Office Supplies
              173190.97
              0.469404641
              0.035722445

            
              Quantity
              Copiers
              Technology
              234.00
              0.274276433
              0.496913378

            
              Quantity
              Machines
              Technology
              440.00
              0.944733216
              0.184394845

            
              Quantity
              Supplies
              Office Supplies
              647.00
              0.612738426
              0.868691661

            
              Quantity
              Bookcases
              Furniture
              868.00
              0.65982129
              0.104153314

            
              Quantity
              Envelopes
              Office Supplies
              906.00
              0.655588953
              0.242552112

            
              Quantity
              Fasteners
              Office Supplies
              914.00
              0.897179384
              0.813156798

            
              Quantity
              Tables
              Furniture
              1241.00
              0.588528544
              0.25189882

            
              Quantity
              Labels
              Office Supplies
              1400.00
              0.924220582
              0.084992805

            
              Quantity
              Appliances
              Office Supplies
              1729.00
              0.242865421
              0.562076032

            
              Quantity
              Chairs
              Furniture
              2356.00
              0.199113972
              0.636452213

            
              Quantity
              Accessories
              Technology
              2976.00
              0.628493321
              0.070056799

            
              Quantity
              Art
              Office Supplies
              3000.00
              0.259808311
              0.339959932

            
              Quantity
              Storage
              Office Supplies
              3158.00
              0.91525319
              0.701753169

            
              Quantity
              Phones
              Technology
              3289.00
              0.516688612
              0.814293962

            
              Quantity
              Furnishings
              Furniture
              3563.00
              0.398388252
              0.371875197

            
              Quantity
              Paper
              Office Supplies
              5178.00
              0.870073481
              0.387181538

            
              Quantity
              Binders
              Office Supplies
              5974.00
              0.999998865
              0.374652073

            
              Sales
              Copiers
              Technology
              149528.03
              0.5500512
              0.912443364

            
              Sales
              Machines
              Technology
              189238.63
              0.035090048
              0.498680242

            
              Sales
              Supplies
              Office Supplies
              46673.54
              0.994928778
              0.301969534

            
              Sales
              Bookcases
              Furniture
              114880.00
              0.787150865
              0.316482026

            
              Sales
              Envelopes
              Office Supplies
              16476.40
              0.76309539
              0.760879589

            
              Sales
              Fasteners
              Office Supplies
              3024.28
              0.117653971
              0.909011521

            
              Sales
              Tables
              Furniture
              206965.53
              0.092302682
              0.165237414

            
              Sales
              Labels
              Office Supplies
              12486.31
              0.176029563
              0.722254254

            
              Sales
              Appliances
              Office Supplies
              107532.16
              0.9720534
              0.965335051

            
              Sales
              Chairs
              Furniture
              328449.10
              0.499272629
              0.976469596

            
              Sales
              Accessories
              Technology
              167380.32
              0.420495031
              0.660597611

            
              Sales
              Art
              Office Supplies
              27118.79
              0.199819304
              0.395589862

            
              Sales
              Storage
              Office Supplies
              223843.61
              0.064746832
              0.478247767

            
              Sales
              Phones
              Technology
              330007.05
              0.391114051
              0.743271657

            
              Sales
              Furnishings
              Furniture
              91705.16
              0.431370418
              0.598640219

            
              Sales
              Paper
              Office Supplies
              78479.21
              0.436829536
              0.40016634

            
              Sales
              Binders
              Office Supplies
              203412.73
              0.18955334
              0.24224581

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

#chart {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 300px;
  position: absolute;
}

.d3-tip {
  line-height: 1;
  font: 14px sans-serif;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: rgb(185, 185, 185);
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

</style>
<body>

<svg id="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    dim = Math.min(parseInt(d3.select("#chart").style("width")), parseInt(d3.select("#chart").style("height"))),
    width = dim - margin.left - margin.right,
    height = dim - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var r = d3.scale.linear()
    .range([7, 18]);

var color = d3.scale.ordinal()
      .range(["#8c510a", "#dfc27d", "#35978f"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("#chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var dollarFormatter = d3.format(",.0f")

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      return "<div><span>Category:</span> <span style='color:white'>" + d.Category + "</span></div>" +
              "<div><span>Sub-Category:</span> <span style='color:white'>" + d.SubCategory + "</span></div>" +
             "<div><span>Total Cost:</span> <span style='color:white'>" + "$"+ dollarFormatter(d.TotalValue) + "</span></div>";
    })

svg.call(tip);

d3.csv("giniDummy.csv", function(error, data) {
  if (error) throw error;

  var subset = data.filter(function(el){return el.Metric === 'Cost'});

  subset.forEach(function(d) {
    d.ProductConcentration = +d.ProductConcentration;
    d.CustomerConcentration = +d.CustomerConcentration;
    d.TotalValue = +d.TotalValue;
  });

  x.domain([0, 1]);
  y.domain([0, 1]);
  r.domain(d3.extent (subset, function (d)  {return d.TotalValue;}));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Product Concentration");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Customer Concentration")

  svg.selectAll(".dot")
      .data(subset)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) {return r(d.TotalValue)})
      .attr("cx", function(d) { return x(d.ProductConcentration); })
      .attr("cy", function(d) { return y(d.CustomerConcentration); })
      .style("fill", function(d) { return color(d.Category); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide);

});

function resize() {

  var dim = Math.min(parseInt(d3.select("#chart").style("width")), parseInt(d3.select("#chart").style("height"))),
  width = dim - margin.left - margin.right,
  height = dim - margin.top - margin.bottom;

  console.log(dim);

  // Update the range of the scale with new width/height
  x.range([0, width]);
  y.range([height, 0]);

  // Update the axis and text with the new scale
  svg.select('.x.axis')
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.select('.x.axis').select('.label')
      .attr("x",width);

  svg.select('.y.axis')
    .call(yAxis);

  // Update the tick marks
  xAxis.ticks(dim / 75);
  yAxis.ticks(dim / 75);

  // Update the circles
  r.range([dim / 90, dim / 35])

  svg.selectAll('.dot')
    .attr("r", function(d) {return r(d.TotalValue)})
    .attr("cx", function(d) { return x(d.ProductConcentration); })
    .attr("cy", function(d) { return y(d.CustomerConcentration); })
}

d3.select(window).on('resize', resize);

resize();

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
Metric	SubCategory	Category	TotalValue	ProductConcentration	CustomerConcentration
Cost	Copiers	Technology	93910.21	0.030137063	0.087770725
Cost	Machines	Technology	185853.87	0.727932545	0.234178493
Cost	Supplies	Office Supplies	47862.64	0.869843455	0.967766883
Cost	Bookcases	Furniture	118352.55	0.185026777	0.627607548
Cost	Envelopes	Office Supplies	9512.23	0.080804313	0.914777644
Cost	Fasteners	Office Supplies	2074.76	0.303772145	0.029366578
Cost	Tables	Furniture	224691.01	0.742161958	0.886106234
Cost	Labels	Office Supplies	6940.06	0.06212297	0.655249515
Cost	Appliances	Office Supplies	89394.16	0.52971077	0.439508931
Cost	Chairs	Furniture	301858.94	0.318459499	0.209223271
Cost	Accessories	Technology	125443.68	0.565379441	0.618075232
Cost	Art	Office Supplies	20591.01	0.746932104	0.232158633
Cost	Storage	Office Supplies	202564.78	0.665022485	0.230177646
Cost	Phones	Technology	285491.32	0.554136398	0.751528667
Cost	Furnishings	Furniture	78646.02	0.159382955	0.775545349
Cost	Paper	Office Supplies	44425.64	0.324886509	0.508537074
Cost	Binders	Office Supplies	173190.97	0.469404641	0.035722445
Quantity	Copiers	Technology	234.00	0.274276433	0.496913378
Quantity	Machines	Technology	440.00	0.944733216	0.184394845
Quantity	Supplies	Office Supplies	647.00	0.612738426	0.868691661
Quantity	Bookcases	Furniture	868.00	0.65982129	0.104153314
Quantity	Envelopes	Office Supplies	906.00	0.655588953	0.242552112
Quantity	Fasteners	Office Supplies	914.00	0.897179384	0.813156798
Quantity	Tables	Furniture	1241.00	0.588528544	0.25189882
Quantity	Labels	Office Supplies	1400.00	0.924220582	0.084992805
Quantity	Appliances	Office Supplies	1729.00	0.242865421	0.562076032
Quantity	Chairs	Furniture	2356.00	0.199113972	0.636452213
Quantity	Accessories	Technology	2976.00	0.628493321	0.070056799
Quantity	Art	Office Supplies	3000.00	0.259808311	0.339959932
Quantity	Storage	Office Supplies	3158.00	0.91525319	0.701753169
Quantity	Phones	Technology	3289.00	0.516688612	0.814293962
Quantity	Furnishings	Furniture	3563.00	0.398388252	0.371875197
Quantity	Paper	Office Supplies	5178.00	0.870073481	0.387181538
Quantity	Binders	Office Supplies	5974.00	0.999998865	0.374652073
Sales	Copiers	Technology	149528.03	0.5500512	0.912443364
Sales	Machines	Technology	189238.63	0.035090048	0.498680242
Sales	Supplies	Office Supplies	46673.54	0.994928778	0.301969534
Sales	Bookcases	Furniture	114880.00	0.787150865	0.316482026
Sales	Envelopes	Office Supplies	16476.40	0.76309539	0.760879589
Sales	Fasteners	Office Supplies	3024.28	0.117653971	0.909011521
Sales	Tables	Furniture	206965.53	0.092302682	0.165237414
Sales	Labels	Office Supplies	12486.31	0.176029563	0.722254254
Sales	Appliances	Office Supplies	107532.16	0.9720534	0.965335051
Sales	Chairs	Furniture	328449.10	0.499272629	0.976469596
Sales	Accessories	Technology	167380.32	0.420495031	0.660597611
Sales	Art	Office Supplies	27118.79	0.199819304	0.395589862
Sales	Storage	Office Supplies	223843.61	0.064746832	0.478247767
Sales	Phones	Technology	330007.05	0.391114051	0.743271657
Sales	Furnishings	Furniture	91705.16	0.431370418	0.598640219
Sales	Paper	Office Supplies	78479.21	0.436829536	0.40016634
Sales	Binders	Office Supplies	203412.73	0.18955334	0.24224581
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot {
	stroke: #000;
	}

	#chart {
	width: 100%;
	height: 100%;
	min-width: 300px;
	min-height: 300px;
	position: absolute;
	}

	.d3-tip {
	line-height: 1;
	font: 14px sans-serif;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: rgb(185, 185, 185);
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}

	</style>
	<body>

	<svg id="chart"></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script>

	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	dim = Math.min(parseInt(d3.select("#chart").style("width")), parseInt(d3.select("#chart").style("height"))),
	width = dim - margin.left - margin.right,
	height = dim - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var r = d3.scale.linear()
	.range([7, 18]);

	var color = d3.scale.ordinal()
	.range(["#8c510a", "#dfc27d", "#35978f"]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select("#chart")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var dollarFormatter = d3.format(",.0f")

	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-10, 0])
	.html(function(d) {
	return "<div><span>Category:</span> <span style='color:white'>" + d.Category + "</span></div>" +
	"<div><span>Sub-Category:</span> <span style='color:white'>" + d.SubCategory + "</span></div>" +
	"<div><span>Total Cost:</span> <span style='color:white'>" + "$"+ dollarFormatter(d.TotalValue) + "</span></div>";
	})

	svg.call(tip);

	d3.csv("giniDummy.csv", function(error, data) {
	if (error) throw error;

	var subset = data.filter(function(el){return el.Metric === 'Cost'});

	subset.forEach(function(d) {
	d.ProductConcentration = +d.ProductConcentration;
	d.CustomerConcentration = +d.CustomerConcentration;
	d.TotalValue = +d.TotalValue;
	});

	x.domain([0, 1]);
	y.domain([0, 1]);
	r.domain(d3.extent (subset, function (d) {return d.TotalValue;}));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Product Concentration");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Customer Concentration")

	svg.selectAll(".dot")
	.data(subset)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", function(d) {return r(d.TotalValue)})
	.attr("cx", function(d) { return x(d.ProductConcentration); })
	.attr("cy", function(d) { return y(d.CustomerConcentration); })
	.style("fill", function(d) { return color(d.Category); })
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);

	});

	function resize() {

	var dim = Math.min(parseInt(d3.select("#chart").style("width")), parseInt(d3.select("#chart").style("height"))),
	width = dim - margin.left - margin.right,
	height = dim - margin.top - margin.bottom;

	console.log(dim);

	// Update the range of the scale with new width/height
	x.range([0, width]);
	y.range([height, 0]);

	// Update the axis and text with the new scale
	svg.select('.x.axis')
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.select('.x.axis').select('.label')
	.attr("x",width);

	svg.select('.y.axis')
	.call(yAxis);

	// Update the tick marks
	xAxis.ticks(dim / 75);
	yAxis.ticks(dim / 75);

	// Update the circles
	r.range([dim / 90, dim / 35])

	svg.selectAll('.dot')
	.attr("r", function(d) {return r(d.TotalValue)})
	.attr("cx", function(d) { return x(d.ProductConcentration); })
	.attr("cy", function(d) { return y(d.CustomerConcentration); })
	}

	d3.select(window).on('resize', resize);

	resize();

	</script>