Skip to content

Instantly share code, notes, and snippets.

@khare-ashwini

khare-ashwini/index.html

Last active December 11, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khare-ashwini/4611158 to your computer and use it in GitHub Desktop.
Save khare-ashwini/4611158 to your computer and use it in GitHub Desktop.
Download ZIP
A sample histogram using d3
Raw
index.html
<!doctype html>
<head>
<link rel="stylesheet" href="vis.css"></link>
</head>
<body>
<div class = "chart">
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="vis.js"></script>
<script>
histogram({
parent : '.chart',
data : [10,5,6,2,2,4,14,1,14,1,1,1,1,13,13,13],
height: 390,
binSize : 80
})
</script>
</body>
Raw
vis.css
svg {
font-size: 13px;
font-family:sans-serif;
}
.bars rect {
fill: #1f77b4;
stroke: #1f77b4;
shape-rendering: crispEdges;
}
.bars text {
fill: #fff;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
circle.node{
cursor:pointer;
}
rect{
fill-opacity:0.7;
}
rect.meanBar{
fill:#ff7f0e;
stroke:#ff7f0e;
fill-opacity:0.8;
}
rect.hover{
fill-opacity:1;
}
/*
******************
TOOLTIP CSS
*/
.viswraptooltip {
position: absolute;
background-color: rgba(255,255,255,1);
padding: 10px;
border: 1px solid #ddd;
z-index: 10000;
font-family: Arial;
font-size: 13px;
transition: opacity 500ms linear;
-moz-transition: opacity 500ms linear;
-webkit-transition: opacity 500ms linear;
transition-delay: 500ms;
-moz-transition-delay: 500ms;
-webkit-transition-delay: 500ms;
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
box-shadow: 4px 4px 8px rgba(0,0,0,.5);
-moz-border-radius: 10px;
border-radius: 10px;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.viswraptooltip h3 {
margin: 0;
padding: 0;
text-align: center;
}
.viswraptooltip p {
margin: 0;
padding: 0;
text-align: center;
}
.viswraptooltip span {
display: inline-block;
margin: 2px 0;
}
Raw
vis.js
var histogram = function(config){
var rangeDefault = d3.extent( config.data );
rangeDefault[0] = 0; //All histograms start from 0
/**
* Making all the histograms start from the origin, not sure if it's the right way
**/
var defaults = {
'range' : rangeDefault,
'height' : $(config.parent).height(),
'width' : $(config.parent).innerWidth(),
'bins' : 20,
'binSize' : 10
};
/**
* Initalized with an empty object, so that the contents of default are not replaced
**/
var settings = $.extend({}, defaults, config);
/**
* Removing any unnecessary padding from the parent
**/
$(config.parent).css('padding','0px');
var margin = {top: 50, right: 30, bottom: 30, left: 50};
var width = settings.width,
height = settings.height;
/* This does all the good work of the construction of bins, most likely to break the execution of code */
var data = d3.layout.histogram()
.bins(settings.range[1])
(settings.data);
var x = d3.scale.ordinal()
.domain(data.map(function(d) { return d.x; }))
.rangeRoundBands([0, width - margin.left - margin.right], .1);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height - margin.top - margin.bottom, 0]);;
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.format(",.0f"))
.tickSize([5]).tickSubdivide(true);
yAxis = d3.svg.axis().scale(y).orient("left").tickSubdivide(true).tickSize(6, 2, 8).tickPadding(5).ticks(10);
// Select the svg element, if it exists.
var svg = d3.select(settings.parent).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "bars");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class","y axis");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the bars.
var bar = svg.select(".bars").selectAll(".bar").data(data);
bar.enter().append("rect");
bar.exit().remove();
bar .attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.x); })
.attr("y", height - margin.top - margin.bottom)
.order()
.transition()
.delay( function(d,i){ return i*50; } )
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return y.range()[0] - y(d.y); });
g.select(".x.axis")
.attr("transform", "translate(0," + y.range()[0] + ")")
.call(xAxis);
//Update the y-axis
g.select(".y.axis")
.call(yAxis);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment