Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/index.html

Created September 10, 2011 15:18
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 biovisualize/1208422 to your computer and use it in GitHub Desktop.
Save biovisualize/1208422 to your computer and use it in GitHub Desktop.
Download ZIP
Radial 24H scale (from ff)
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>
<style type="text/css">
svg path{
stroke: none;
fill: lightskyblue;
stroke-width: 1px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
// Modified from https://groups.google.com/d/msg/d3-js/AWuRpoXxDFk/sOflKd-kzmcJ
var json = [
{
"value": 0,
"timetag": new Date(2011, 0, 1,0, 0),
"unit": ""
},
{
"value": 1,
"timetag": new Date(2011, 0, 1, 3, 00)
},
{
"value": 0.5,
"timetag": new Date(2011, 0, 1, 6, 00)
},
{
"value": 0,
"timetag": new Date(2011, 0, 1, 12, 00),
"unit": ""
},
{
"value": 1,
"timetag": new Date(2011, 0, 1, 18, 00) //"2011-08-14T09:00:24+00:00",
},
{
"value": 0,
"timetag": new Date(2011, 0, 1, 23, 59) //"2011-08-14T09:00:24+00:00",
}
];
var graphsize = 350;
//the axis is a time scale that runs from 00:00 - 23:59
var y = d3.time.scale().domain([new Date(2011, 0, 1,0,0), new Date(2011, 0, 1, 23, 59)]).range([0, 2* Math.PI]);
function buildData(i) {
if ( typeof this.currentData == 'undefined' ) this.currentData = 0;
if ( i > y(json[this.currentData+1].timetag)*180/Math.PI) {
/* Step forward */
this.currentData++;
}
return {
"value": json[this.currentData].value,
"timetag": y.invert(i*Math.PI/180)
}
}
function getValue(d) { return d.value;}
var r = graphsize / 2,
data = d3.range(361).map(buildData),
maxValue = d3.max(data, getValue),
minValue = d3.min(data, getValue),
delta = Math.abs(maxValue - minValue);
function yValue(d) { return (d.value/delta + 1)* r/2};
var svg = d3.select("#chart").append("svg:svg")
.data([data])
.attr("width", r * 2)
.attr("height", r * 2)
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")");
svg.append("svg:path")
.attr("class", "area")
.attr("d", d3.svg.area.radial()
.innerRadius(r / 2)
.outerRadius(yValue)
.angle(function(d, i) { return y(d.timetag); })
);
svg.append("svg:path")
.attr("class", "line")
.attr("d", d3.svg.line.radial()
.radius(yValue)
.angle(function(d, i) { return y(d.timetag); }));
svg.append("svg:circle")
.attr("r", r)
.attr("stroke", "steelblue")
.attr("fill", "none");
svg.selectAll("rect.tick")
.data(d3.range(24))
.enter().append("svg:rect")
.attr("class", "tick")
.attr("x", -2)
.attr("y", -r)
.attr("width", 4)
.attr("height", function(d, i){return (i%2) ? 5 : 15;})
.attr("transform", function(d, i){return "rotate("+(i*15)+")";})
.attr("fill", "steelblue");
svg.selectAll("text.label")
.data(d3.range(24))
.enter().append("svg:text")
.attr("class", "label")
.attr("x", function(d, i){return (r-30)*Math.cos(i*0.26-1.57)})
.attr("y", function(d, i){return (r-30)*Math.sin(i*0.26-1.57)})
.attr("fill", "steelblue")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.text(function(d, i){return d});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment