vswetha01/data1.csv

## data1.csv

          
            State
            tablet
            smartphone
            desktop
            unknown

            
              Religion
              0
              0
              0
              0

            
              Real Estate
              4.4
              5.2
              0
              0

            
              Science
              5.6
              9
              100.5
              0

            
              Travel
              10.1
              97.7
              35.9
              0

            
              Pets
              21
              74.4
              0.5
              0

            
              Shopping
              29.2
              52.2
              41.6
              0

            
              Fashion
              44.3
              76.8
              19.6
              0

            
              Careers
              52.4
              101.6
              12.1
              0

            
              Technology
              58.9
              103.3
              53.8
              0

            
              Education
              78.3
              73.4
              103.9
              0

            
              Home
              81.4
              189.1
              60.3
              0

            
              Family
              91.5
              199
              61.5
              0

            
              Automotive
              97.1
              60.8
              4.6
              0

            
              Food & Drink
              98.4
              164.9
              56.3
              0

            
              Social Media
              99.8
              89.7
              45
              0

            
              Society
              102
              83.1
              70.3
              0

            
              Personal Finance
              169.1
              214.2
              61.9
              0

            
              Business
              173.1
              219.2
              84.1
              0

            
              Law& Politics
              261.7
              239.1
              47.7
              0

            
              Health & Fitness
              344.2
              472.3
              186
              0

            
              Hobbies & Interests
              497.7
              372.9
              97.5
              0

            
              News
              549.4
              541.6
              232.4
              0

            
              Sports
              709.5
              749
              150.8
              0

            
              Entertainment
              948.1
              985.2
              345.5
              0

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

body {
  font: 10px sans-serif;
}
h2.title {
      color: black;
      text-align: center;
    }
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
text.label {
    font-size: 1.2em;
  }
.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 100, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
// set height and width of chart
var width = innerWidth - margin.left - margin.right,
    height = innerHeight - margin.top - margin.bottom;

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

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

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#d0743c", "#ff8c00"]);//"#6b486b", "#a05d56", "#d0743c", "#ff8c00"

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    //.tickFormat(d3.format(".2s"));

    // column we want to plot
    var radius = 3,
        field = 'Doubleclick',
        x_field = "Sum of CTR",
        y_field = "availability_365";
    var padding = 30;
    // Append the title for the graph
d3.select("body")
    .append("h2")
    .text(field + " total click through rate (CTR) by category.")
    .attr('class', 'title');


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

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

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

  data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.ages[d.ages.length - 1].y1;
  });

  data.sort(function(a, b) { return b.total - a.total; });

  x.domain(data.map(function(d) { return d.State; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
      .attr("transform", "rotate(-90)")
      .attr("x", -5)
      .attr('y', 0)
      .attr("dy", ".25em")
      .style("text-anchor", "end");

  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("CTR");

// add label to y-axis
      var y_label = d3.select(".y.axis")
          .append("text")
          .attr('class', 'label')
          .text("Total CTR")
          .attr("transform", "rotate(-90)");

      // center y axis label
      y_label.attr("x", -(height / 2)).attr('y', -60)
            .style("text-anchor", "middle");

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

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

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + 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; });
      // make the bar chart responsive
        var resize = function resize() {
            // recalculate width and height
            var width = innerWidth - margin.left - margin.right,
                height = innerHeight - margin.top - margin.bottom;

            // recalculate scales
            x_scale.rangeRoundBands([0, width], .1)
            y_scale.range([height, 0]);

            // resize x axis
            svg.select('.x.axis')
                 .attr("transform", "translate(0," + height + ")")
                 .call(x_axis)
                 .selectAll("text")
                 .attr("transform", "rotate(-90)")
                 .attr("x", -5)
                 .attr('y', 0)
                 .attr("dy", ".25em")
                 .style("text-anchor", "end");

            // reposition x axis label
            svg.select('.x.axis .label').attr("x", width / 2 )

            // resize y axis
            svg.select('.y.axis')
                 .call(y_axis);

            // hide x-axis lines
            svg.select('.x.axis').select('path').remove();
            svg.select('.x.axis').selectAll('line').remove();

            // reposition y axis label
            y_label.attr("x", -(height / 2));

            // reposition bars
            neigh.attr("transform", function(d) { return "translate(" + x_scale(d.key) + ",0)"; });

            // resize bands within each bar
            neigh.selectAll('rect')
              .attr("width", x_scale.rangeBand())
              .attr("y", function(d) { debugger; return y_scale(d.y1); })
              .attr("height", function(d) { debugger; return y_scale(d.y0) - y_scale(d.y1); })

            // reposition legend
            legend.select('rect').attr("x", width - 18);
            legend.select('text').attr("x", width - 24);
        };

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

});

</script>
State	tablet	smartphone	desktop	unknown
Religion	0	0	0	0
Real Estate	4.4	5.2	0	0
Science	5.6	9	100.5	0
Travel	10.1	97.7	35.9	0
Pets	21	74.4	0.5	0
Shopping	29.2	52.2	41.6	0
Fashion	44.3	76.8	19.6	0
Careers	52.4	101.6	12.1	0
Technology	58.9	103.3	53.8	0
Education	78.3	73.4	103.9	0
Home	81.4	189.1	60.3	0
Family	91.5	199	61.5	0
Automotive	97.1	60.8	4.6	0
Food & Drink	98.4	164.9	56.3	0
Social Media	99.8	89.7	45	0
Society	102	83.1	70.3	0
Personal Finance	169.1	214.2	61.9	0
Business	173.1	219.2	84.1	0
Law& Politics	261.7	239.1	47.7	0
Health & Fitness	344.2	472.3	186	0
Hobbies & Interests	497.7	372.9	97.5	0
News	549.4	541.6	232.4	0
Sports	709.5	749	150.8	0
Entertainment	948.1	985.2	345.5	0
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}
	h2.title {
	color: black;
	text-align: center;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	text.label {
	font-size: 1.2em;
	}
	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 100, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	// set height and width of chart
	var width = innerWidth - margin.left - margin.right,
	height = innerHeight - margin.top - margin.bottom;

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

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

	var color = d3.scale.ordinal()
	.range(["#98abc5", "#8a89a6", "#d0743c", "#ff8c00"]);//"#6b486b", "#a05d56", "#d0743c", "#ff8c00"

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

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	//.tickFormat(d3.format(".2s"));

	// column we want to plot
	var radius = 3,
	field = 'Doubleclick',
	x_field = "Sum of CTR",
	y_field = "availability_365";
	var padding = 30;
	// Append the title for the graph
	d3.select("body")
	.append("h2")
	.text(field + " total click through rate (CTR) by category.")
	.attr('class', 'title');



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

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

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

	data.forEach(function(d) {
	var y0 = 0;
	d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
	d.total = d.ages[d.ages.length - 1].y1;
	});

	data.sort(function(a, b) { return b.total - a.total; });

	x.domain(data.map(function(d) { return d.State; }));
	y.domain([0, d3.max(data, function(d) { return d.total; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.attr("transform", "rotate(-90)")
	.attr("x", -5)
	.attr('y', 0)
	.attr("dy", ".25em")
	.style("text-anchor", "end");

	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("CTR");

	// add label to y-axis
	var y_label = d3.select(".y.axis")
	.append("text")
	.attr('class', 'label')
	.text("Total CTR")
	.attr("transform", "rotate(-90)");

	// center y axis label
	y_label.attr("x", -(height / 2)).attr('y', -60)
	.style("text-anchor", "middle");

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

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

	var legend = svg.selectAll(".legend")
	.data(color.domain().slice().reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + 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; });
	// make the bar chart responsive
	var resize = function resize() {
	// recalculate width and height
	var width = innerWidth - margin.left - margin.right,
	height = innerHeight - margin.top - margin.bottom;

	// recalculate scales
	x_scale.rangeRoundBands([0, width], .1)
	y_scale.range([height, 0]);

	// resize x axis
	svg.select('.x.axis')
	.attr("transform", "translate(0," + height + ")")
	.call(x_axis)
	.selectAll("text")
	.attr("transform", "rotate(-90)")
	.attr("x", -5)
	.attr('y', 0)
	.attr("dy", ".25em")
	.style("text-anchor", "end");

	// reposition x axis label
	svg.select('.x.axis .label').attr("x", width / 2 )

	// resize y axis
	svg.select('.y.axis')
	.call(y_axis);

	// hide x-axis lines
	svg.select('.x.axis').select('path').remove();
	svg.select('.x.axis').selectAll('line').remove();

	// reposition y axis label
	y_label.attr("x", -(height / 2));

	// reposition bars
	neigh.attr("transform", function(d) { return "translate(" + x_scale(d.key) + ",0)"; });

	// resize bands within each bar
	neigh.selectAll('rect')
	.attr("width", x_scale.rangeBand())
	.attr("y", function(d) { debugger; return y_scale(d.y1); })
	.attr("height", function(d) { debugger; return y_scale(d.y0) - y_scale(d.y1); })

	// reposition legend
	legend.select('rect').attr("x", width - 18);
	legend.select('text').attr("x", width - 24);
	};

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

	});

	</script>