KristinHenry/convoSummary.csv

## convoSummary.csv

          
            age_group
            ...over text?
            ...over a messenger app like WhatsApp, Facebook Messenger, etc.?
            ...by posting on their social media accounts?
            ...over email?
            ...over phone?
            ...in person, face to face?
            total
            num_replies

            
              <= 18
              18.75
              81.1
              0.6
              0.0
              5.5
              5.1
              111.05
              20

            
              19-25
              23.217391304347824
              20.82608695652174
              0.717391304347826
              0.6956521739130435
              4.358695652173913
              12.108695652173912
              61.92391304347826
              92

            
              26-35
              15.192878338278932
              8.195845697329377
              1.029673590504451
              3.083086053412463
              4.937685459940653
              55.02967359050445
              87.46884272997033
              337

            
              36-55
              14.058823529411764
              5.673202614379085
              1.1459694989106755
              2.740740740740741
              5.004357298474946
              32.42701525054466
              61.050108932461875
              459

            
              55+
              6.3354037267080745
              2.3850931677018634
              1.565217391304348
              3.267080745341615
              3.9316770186335406
              42.77018633540373
              60.254658385093165
              161

## 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;
}

.x.axis path {
  display: none;
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}
 </style>

<body>
<!-- this document generated by py2d3 -->
<div id="myChart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
/* can add a line of comments for viz code here */
var w = 850; //'100%';//850;
var h = 420;
var pad = 10;
var colors = ["#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"];


var groupedBarChart = function(data, targSVG, chart_w, chart_h, chart_pad, chart_colors){
    // console.log(data);

    var margin = {top: chart_pad*2, right: chart_pad*2, bottom: chart_pad*3 + 30, left: chart_pad*4},//{top: 20, right: 20, bottom: 30, left: 40},
    width = chart_w - margin.left - margin.right,
    height = chart_h - margin.top - margin.bottom;


    var x0 = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();

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

    var color = d3.scale.ordinal()
        .range(chart_colors);

    var xAxis = d3.svg.axis()
        .scale(x0)
        .tickSize(3,0)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickSize(3,0)
        .tickFormat(d3.format(".2s"));

    var svg = d3.select(targSVG).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 + ")");


      var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "age_group" && key !== 'total' && key !== 'num_replies'; });


      var ageCounts = [];
      data.forEach(function(d){
        ageCounts.push({'agegroup': d.age_group, 'num': d.num_replies});
      });


      data.forEach(function(d) {
        d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
        // console.log(d.ages);
      });

      x0.domain(data.map(function(d) { return d.age_group; }));
      x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
      y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .append("text")
          .attr("y", 30)
          .attr("x", width/2)
          .style("text-anchor", "middle")
          .text("Age Groups");

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Average Number of Communications");

      var xgroup = svg.selectAll(".xgroup")
          .data(data)
        .enter().append("g")
          .attr("class", "g")
          .attr("transform", function(d) { return "translate(" + x0(d.age_group) + ",0)"; });

      xgroup.selectAll("rect")
          .data(function(d) { return d.ages; })
        .enter().append("rect")
          .attr("width", x1.rangeBand())
          .attr("x", function(d) { return x1(d.name); })
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); })
          .style("fill", function(d) { return color(d.name); });

      var legend = svg.selectAll(".legend")
          .data(ageNames.slice().reverse())
        .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });

      legend.append("rect")
          .attr("x", width - 18)
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

      legend.append("text")
          .attr("x", width - 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(function(d) { return d; });

      // for N values
      var legend2group = svg.append("g")
        .attr('transform', function(){return 'translate(' + (-600) +','+ (height+30) + ')'})
      var legend2 = legend2group.selectAll(".legend2")
          .data(ageCounts)
        .enter().append("g")
          .attr("class", "legend2")
          .attr("transform", function(d, i) { return "translate(" + (i*100)  +"," + 10 + ")"; });

      legend2.append("text")
          .attr("x", width - 24)
          .attr("y", 2)
          .attr("dy", ".35em")
          .style("text-anchor", "end")
          .text(function(d) { return d.agegroup + ": "; });

      legend2.append("text")
          .attr("x", width - 16)
          .attr("y", 2)
          .attr("dy", ".35em")
          .style("text-anchor", "start")
          .text(function(d) { return ' N = ' + d.num;});

}

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

      var targSVG = "#chart";
      groupedBarChart(data, targSVG, w, h, pad, colors);
});


var init = function()
{
    var mychart = d3.select("#myChart")
        .append("div")
        .classed("svg-container", true) //container class to make it responsive
        .append("svg")
       // responsive SVG needs these 2 attributes and no width and height attr
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 850 450")
        //class to make it responsive
        .classed("svg-content-responsive", true)
        .attr("id", "chart");

}


init();

</script>
</body>
age_group	...over text?	...over a messenger app like WhatsApp, Facebook Messenger, etc.?	...by posting on their social media accounts?	...over email?	...over phone?	...in person, face to face?	total	num_replies
<= 18	18.75	81.1	0.6	0.0	5.5	5.1	111.05	20
19-25	23.217391304347824	20.82608695652174	0.717391304347826	0.6956521739130435	4.358695652173913	12.108695652173912	61.92391304347826	92
26-35	15.192878338278932	8.195845697329377	1.029673590504451	3.083086053412463	4.937685459940653	55.02967359050445	87.46884272997033	337
36-55	14.058823529411764	5.673202614379085	1.1459694989106755	2.740740740740741	5.004357298474946	32.42701525054466	61.050108932461875	459
55+	6.3354037267080745	2.3850931677018634	1.565217391304348	3.267080745341615	3.9316770186335406	42.77018633540373	60.254658385093165	161
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

	.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; /* aspect ratio */
	vertical-align: top;
	overflow: hidden;
	}
	.svg-content-responsive {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 0;
	}
	</style>

	<body>
	<!-- this document generated by py2d3 -->
	<div id="myChart"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	/* can add a line of comments for viz code here */
	var w = 850; //'100%';//850;
	var h = 420;
	var pad = 10;
	var colors = ["#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"];


	var groupedBarChart = function(data, targSVG, chart_w, chart_h, chart_pad, chart_colors){
	// console.log(data);

	var margin = {top: chart_pad2, right: chart_pad2, bottom: chart_pad3 + 30, left: chart_pad4},//{top: 20, right: 20, bottom: 30, left: 40},
	width = chart_w - margin.left - margin.right,
	height = chart_h - margin.top - margin.bottom;


	var x0 = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var x1 = d3.scale.ordinal();

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

	var color = d3.scale.ordinal()
	.range(chart_colors);

	var xAxis = d3.svg.axis()
	.scale(x0)
	.tickSize(3,0)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickSize(3,0)
	.tickFormat(d3.format(".2s"));

	var svg = d3.select(targSVG).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 + ")");


	var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "age_group" && key !== 'total' && key !== 'num_replies'; });


	var ageCounts = [];
	data.forEach(function(d){
	ageCounts.push({'agegroup': d.age_group, 'num': d.num_replies});
	});



	data.forEach(function(d) {
	d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
	// console.log(d.ages);
	});

	x0.domain(data.map(function(d) { return d.age_group; }));
	x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
	y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("y", 30)
	.attr("x", width/2)
	.style("text-anchor", "middle")
	.text("Age Groups");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Average Number of Communications");

	var xgroup = svg.selectAll(".xgroup")
	.data(data)
	.enter().append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x0(d.age_group) + ",0)"; });

	xgroup.selectAll("rect")
	.data(function(d) { return d.ages; })
	.enter().append("rect")
	.attr("width", x1.rangeBand())
	.attr("x", function(d) { return x1(d.name); })
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); })
	.style("fill", function(d) { return color(d.name); });

	var legend = svg.selectAll(".legend")
	.data(ageNames.slice().reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	// for N values
	var legend2group = svg.append("g")
	.attr('transform', function(){return 'translate(' + (-600) +','+ (height+30) + ')'})
	var legend2 = legend2group.selectAll(".legend2")
	.data(ageCounts)
	.enter().append("g")
	.attr("class", "legend2")
	.attr("transform", function(d, i) { return "translate(" + (i*100) +"," + 10 + ")"; });

	legend2.append("text")
	.attr("x", width - 24)
	.attr("y", 2)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d.agegroup + ": "; });

	legend2.append("text")
	.attr("x", width - 16)
	.attr("y", 2)
	.attr("dy", ".35em")
	.style("text-anchor", "start")
	.text(function(d) { return ' N = ' + d.num;});

	}

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

	var targSVG = "#chart";
	groupedBarChart(data, targSVG, w, h, pad, colors);
	});


	var init = function()
	{
	var mychart = d3.select("#myChart")
	.append("div")
	.classed("svg-container", true) //container class to make it responsive
	.append("svg")
	// responsive SVG needs these 2 attributes and no width and height attr
	.attr("preserveAspectRatio", "xMinYMin meet")
	.attr("viewBox", "0 0 850 450")
	//class to make it responsive
	.classed("svg-content-responsive", true)
	.attr("id", "chart");

	}


	init();

	</script>
	</body>