seemantk/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: fresh block

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
   <style id="chartStyle" scoped>
        #chart{
            border:1px solid grey;
            padding:25px;
            color:#000;

        }
        svg {
            padding:50px 0px 50px 0px;


        }

        svg text {
            font: 12px sans-serif;
        }
        #chart rect{
            background: #4f1d38;
            fill: #4f1d38;
            -moz-transition: all .2s ease-in;
            -o-transition: all .2s ease-in;
            -webkit-transition: all .2s ease-in;
            transition: all .2s ease-in;

        }
        #chart rect:hover{
            background:#883161;
            fill: #883161;

        }

        #chart text{
			fill: black;
            //fill: white;
            font: 12px sans-serif;
            text-anchor: end;
        }

        .axis text{
            font: 12px sans-serif;
            color:#000;
        }

        .axis path, .axis line{
            fill: none;
            /*stroke : #fff;*/
			stroke: #000;
            shape-rendering: crispEdges;
        }
        .grid .tick {
            stroke: rgba(79,29,56,.1);
            /*opacity: 0.1;*/


        }
        .grid path {
            stroke-width: 0;
        }


    </style>
</head>

<body>

  <div id="chart">

    </div>
  <script>


     var margin ={top:40, right:0, bottom:40, left:40},
                        width=800,
                        height=600-margin.top-margin.bottom;

var jdata = [{"Fruit":"Apple","COUNT( Fruit )":"12"},
             {"Fruit":"Orange","COUNT( Fruit )":"6"},
             {"Fruit":"Pear","COUNT( Fruit )":"1"},
             {"Fruit":"Blank","COUNT( Fruit )":"1"},
             {"Fruit":"Pineapple","COUNT( Fruit )":"1"},
             {"Fruit":"Kiwi","COUNT( Fruit )":"1"}];

 jdata.forEach(function(d) { d["COUNT( Fruit )"] = +d["COUNT( Fruit )"]; });

/*
                    var jsplit =  jdata.split('"');
                    var keyX = jsplit[1];
                    var keyY = "";
                    var data = JSON.parse(jdata);
                    for (k in data[0]) {
                        if (k!=keyX) keyY=k;
                    }
*/

                    // scale to ordinal because x axis is not numerical
                    var x = d3.scale.ordinal()
						.domain(jdata.map(function(d) { return d.Fruit; })) // calculated from the data.
						.rangeRoundBands([0, width], 0.25,0.25);

                    //scale to numerical value by height
                   // var y = d3.scale.linear().range([height, 0]);

                    var y = d3.scale.linear()

                        .range([height, 0]);


                    console.log(jdata);
					x.domain(jdata.map(function(d){ return d.Fruit; }));


          y.domain([0, d3.max(jdata, function(d){return d["COUNT( Fruit )"]})]);


                    var chart = d3.select("#chart")
                        .append("svg")  //append svg element inside #chart
						.attr("width", width+ margin.left+margin.right)    //set width
                       // .attr("width", width+(2*margin.left)+margin.right)    //set width
                        .attr("height", height+margin.top+margin.bottom); //set height

                       // .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");


					var xAxis = d3.svg.axis()
                        .scale(x)
                        .orient("bottom");  //orient bottom because x-axis will appear below the bars

                    var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient("left")
                        .ticks(10).tickFormat(function(d) {
                            if (d % 1 == 0) {
                                return d3.format('.f')(d)
                            } else {
                                return ""
                            }
                        });

                    var bar = chart.selectAll("g")
                            .data(jdata)
                            .enter()
                            .append("g");

							//you're moving the group and then moving the rect below as well
							//one or the other not both need to be moved.
							//.attr("transform", function(d, i){
                            //    return "translate("+x(d[keyX])+", 0)";
                            //});

                        bar.append("rect")
							.attr("id", function(d) {
                                return d.Fruit;
                            })
                            .attr("y", function(d) {
                                return y(d["COUNT( Fruit )"]) + "px";
                            })
                            .attr("x", function(d,i){
                               //AB - Adjusted this so it correcly places the bar along the X
							   //x.range is an array of x values for each bar
							   //calculated in the var x = line above , with the .rangeRoundBands([0, width], 0.25,0.25);
							   //setting the width of the bars (an equal division of width) with margins of 0.25 at the start
							   //and end of the graph and 0.25 between each bar.
							   return x.range()[i] + margin.left + "px";
                            })


                            .attr("height", function(d) {
                                return height - y(d["COUNT( Fruit )"]) +"px";

                            })


                            .attr("width", x.rangeBand());  //set width base on range on ordinal data

                        bar.append("text")
                            .attr("x",function(d,i){
								//similar to above but adding half the width of the bar to the x position
								//to roughly center it on the bar. only rough as doesnt take account of length of text.
								return x.range()[i] + margin.left + (x.rangeBand()/2)+ "px";
							})
                            .attr("y", function(d) { return y(d["COUNT( Fruit )"]) +20; })
                            .attr("dy", ".75em")
							.style("fill","white")
							.style("font-weight", "bold")
                            .text(function(d) { return d["COUNT( Fruit )"]; });

                        chart.append("g")
                            .attr("class", "x axis")
                            .attr("transform", "translate("+margin.left+","+ height+")")
                            .call(xAxis);


                        chart.append("g")
                            .attr("class", "y axis")
                            .attr("transform", "translate("+margin.left+",0)")
                            .call(yAxis)
                            .append("text")
                            .attr("transform", "rotate(-90)")
                            .attr("y", 6)
                            .attr("dy", ".71em")
                            .style("text-anchor", "end")

                    y.domain([0, d3.max(jdata, function(d){return d["COUNT( Fruit )"]})]);
                    chart.select(".y.axis")
                        .call(yAxis.scale(y));
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style id="chartStyle" scoped>
	#chart{
	border:1px solid grey;
	padding:25px;
	color:#000;

	}
	svg {
	padding:50px 0px 50px 0px;


	}

	svg text {
	font: 12px sans-serif;
	}
	#chart rect{
	background: #4f1d38;
	fill: #4f1d38;
	-moz-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;

	}
	#chart rect:hover{
	background:#883161;
	fill: #883161;

	}

	#chart text{
	fill: black;
	//fill: white;
	font: 12px sans-serif;
	text-anchor: end;
	}

	.axis text{
	font: 12px sans-serif;
	color:#000;
	}

	.axis path, .axis line{
	fill: none;
	/stroke : #fff;/
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.grid .tick {
	stroke: rgba(79,29,56,.1);
	/opacity: 0.1;/


	}
	.grid path {
	stroke-width: 0;
	}


	</style>
	</head>

	<body>

	<div id="chart">

	</div>
	<script>


	var margin ={top:40, right:0, bottom:40, left:40},
	width=800,
	height=600-margin.top-margin.bottom;

	var jdata = [{"Fruit":"Apple","COUNT( Fruit )":"12"},
	{"Fruit":"Orange","COUNT( Fruit )":"6"},
	{"Fruit":"Pear","COUNT( Fruit )":"1"},
	{"Fruit":"Blank","COUNT( Fruit )":"1"},
	{"Fruit":"Pineapple","COUNT( Fruit )":"1"},
	{"Fruit":"Kiwi","COUNT( Fruit )":"1"}];

	jdata.forEach(function(d) { d["COUNT( Fruit )"] = +d["COUNT( Fruit )"]; });

	/*
	var jsplit = jdata.split('"');
	var keyX = jsplit[1];
	var keyY = "";
	var data = JSON.parse(jdata);
	for (k in data[0]) {
	if (k!=keyX) keyY=k;
	}
	*/

	// scale to ordinal because x axis is not numerical
	var x = d3.scale.ordinal()
	.domain(jdata.map(function(d) { return d.Fruit; })) // calculated from the data.
	.rangeRoundBands([0, width], 0.25,0.25);

	//scale to numerical value by height
	// var y = d3.scale.linear().range([height, 0]);

	var y = d3.scale.linear()

	.range([height, 0]);


	console.log(jdata);
	x.domain(jdata.map(function(d){ return d.Fruit; }));


	y.domain([0, d3.max(jdata, function(d){return d["COUNT( Fruit )"]})]);



	var chart = d3.select("#chart")
	.append("svg") //append svg element inside #chart
	.attr("width", width+ margin.left+margin.right) //set width
	// .attr("width", width+(2*margin.left)+margin.right) //set width
	.attr("height", height+margin.top+margin.bottom); //set height

	// .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");


	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom"); //orient bottom because x-axis will appear below the bars

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10).tickFormat(function(d) {
	if (d % 1 == 0) {
	return d3.format('.f')(d)
	} else {
	return ""
	}
	});

	var bar = chart.selectAll("g")
	.data(jdata)
	.enter()
	.append("g");

	//you're moving the group and then moving the rect below as well
	//one or the other not both need to be moved.
	//.attr("transform", function(d, i){
	// return "translate("+x(d[keyX])+", 0)";
	//});

	bar.append("rect")
	.attr("id", function(d) {
	return d.Fruit;
	})
	.attr("y", function(d) {
	return y(d["COUNT( Fruit )"]) + "px";
	})
	.attr("x", function(d,i){
	//AB - Adjusted this so it correcly places the bar along the X
	//x.range is an array of x values for each bar
	//calculated in the var x = line above , with the .rangeRoundBands([0, width], 0.25,0.25);
	//setting the width of the bars (an equal division of width) with margins of 0.25 at the start
	//and end of the graph and 0.25 between each bar.
	return x.range()[i] + margin.left + "px";
	})


	.attr("height", function(d) {
	return height - y(d["COUNT( Fruit )"]) +"px";

	})


	.attr("width", x.rangeBand()); //set width base on range on ordinal data

	bar.append("text")
	.attr("x",function(d,i){
	//similar to above but adding half the width of the bar to the x position
	//to roughly center it on the bar. only rough as doesnt take account of length of text.
	return x.range()[i] + margin.left + (x.rangeBand()/2)+ "px";
	})
	.attr("y", function(d) { return y(d["COUNT( Fruit )"]) +20; })
	.attr("dy", ".75em")
	.style("fill","white")
	.style("font-weight", "bold")
	.text(function(d) { return d["COUNT( Fruit )"]; });

	chart.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate("+margin.left+","+ height+")")
	.call(xAxis);


	chart.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate("+margin.left+",0)")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")

	y.domain([0, d3.max(jdata, function(d){return d["COUNT( Fruit )"]})]);
	chart.select(".y.axis")
	.call(yAxis.scale(y));
	</script>
	</body>