Built with blockbuilder.org
Created
March 18, 2016 11:13
-
-
Save anonymous/5e0bf6568e248607be85 to your computer and use it in GitHub Desktop.
fresh block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"}]; | |
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(['Orange','Apple','Pear']) //Added this in temporarilly. this should be 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(data); | |
x.domain(data.map(function(d){ return d[keyX]})); | |
y.domain([0, d3.max(data, function(d){return d[keyY]})]); | |
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(data) | |
.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[keyX]; | |
}) | |
.attr("y", function(d) { | |
return y(d[keyY]) + "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[keyY]) +"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[keyY]) +20; }) | |
.attr("dy", ".75em") | |
.style("fill","white") | |
.style("font-weight", "bold") | |
.text(function(d) { return d[keyY]; }); | |
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") | |
.text(keyY); | |
y.domain([0, d3.max(data, function(d){return d[keyY]})]); | |
chart.select(".y.axis") | |
.call(yAxis.scale(y)); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment