Skip to content

Instantly share code, notes, and snippets.

@kutovova

kutovova/index.html

Last active May 8, 2016 09:05
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 kutovova/8631766 to your computer and use it in GitHub Desktop.
Save kutovova/8631766 to your computer and use it in GitHub Desktop.
Download ZIP
Удав
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
.axis{
stroke:black;
fill: none;
shapeRendering: crispEdges;
font-size: 10px;
width: 20px;
}
.axis text {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
svg{
padding: 00px;
}
div.tooltip {
position: absolute;
display: inline-block;
align:center;
padding: 4px 8px 4px 8px ;
font: 10pt Helvetica;
background: #FCD036;
color: #555;
border-radius: 4px 4px 4px 0px;
pointer-events: none;
}
</style>
<body>
<script src='http://d3js.org/d3.v3.js'></script>
<script src='http://d3js.org/colorbrewer.v1.js'></script>
<script src='http://momentjs.com/downloads/moment-with-locales.js'></script>
<script>
var x, y, z, yAxis;
var dates={};
var canvasParams = {width: 950, height: 300, axisShift: 50, rightPadding: 30};
var tooltipParams = {width: 60, height: 40};
moment.locale('ru');
function loadData(filename) {
d3.csv(filename, function (rows) {
render(rows);
});
}
function render(source) {
var canvas = prepareCanvas();
var layers = prepareData(source);
specifyScales(source);
drawChart(canvas, layers);
drawAxis(canvas, source);
}
function prepareData(data) {
data.forEach(function (d) {
d.date = d3.time.format('%m/%d/%y').parse(d.date);
d.value = +d.value;
dates[d.date]=true;
});
var nest = d3.nest().key(function (d) {
return d.key
});
var stack = d3.layout.stack()
.values(function (d) {
return d.values
})
.x(function (d) {
return d.date
})
.y(function (d) {
return d.value
});
return stack(nest.entries(data));
}
function prepareCanvas() {
var canvas = d3.select('body')
.append('svg')
.attr('width', canvasParams.width + canvasParams.axisShift + canvasParams.rightPadding)
.attr('height', canvasParams.height + canvasParams.axisShift);
return canvas;
}
function specifyScales(data) {
x = d3.time.scale()
.domain(d3.extent(data, function (d) {
return d.date
}))
.range([0, canvasParams.width]);
y = d3.scale.linear()
.domain([0, d3.max(data, function (d) {
return d.y0 + d.y
})])
.range([canvasParams.height, 0]);
z = d3.scale.ordinal().range(colorbrewer['RdYlGn'][6]);
}
function drawChart(canvas, layers) {
var area = buildArea();
canvas.selectAll('.layer')
.data(layers)
.enter().append('path')
.on('mouseover', function (d,i) {
d3.selectAll('path').style('opacity', 0.3);
d3.select(this).style('opacity', 1);
drawTooltip(d);
})
.on('mousemove', function (d,i) {
drawTooltip(d);
})
.on('mouseout', function (d,i) {
d3.selectAll('path').style('opacity', 1);
drawTooltip(d,'out');
})
.attr('class', 'layer')
.attr('d', function (d) {
return area(d.values);
})
.style('fill', function (d, i) {
return z(i)
})
.attr('transform', 'translate(' + canvasParams.axisShift + ',0)');
}
function buildArea() {
var area = d3.svg.area()
.interpolate('cardinal')
.x(function (d) {
return x(d.date)
})
.y0(function (d) {
return y(d.y0)
})
.y1(function (d) {
return y(d.y0 + d.y)
});
return area;
}
function drawAxis(canvas,data) {
var maxNum = d3.round(d3.max(data, function (d) {
return d.y0 + d.y}));
var ranks = countDigits(maxNum);
var yTicks = maxNum/countTicks(ranks);
function countDigits(num) {
for(var i = 0; num > 1; i++) {
num /= 10;
}
return i;
}
function countTicks(ranks){
var num=1;
for (i=1; i<ranks;i++){
num *= 10;
}
return num;
}
console.log(data);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(Object.keys(dates).length)
.tickSize(3);
//.tickValues();
//moment(x.domain).format('D MMM')
canvas.append('g')
.attr('class', 'axis')
.attr('id','xAxis')
.attr('transform', 'translate(' + canvasParams.axisShift + ',' + canvasParams.height + ')')
.call(xAxis);
yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(yTicks)
.tickSize(3);
canvas.append('g')
.attr('class', 'axis')
.attr('id','yAxis')
.attr('transform', 'translate(' + canvasParams.axisShift + ',0)')
.call(yAxis);
}
function drawTooltip(d, event) {
//console.log(d);
d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0)
.style('width', tooltipParams.width)
.style('height', tooltipParams.height);
var div = d3.selectAll('div.tooltip');
div.transition().duration(300).style('opacity', 1);
var currentDate = moment(x.invert(d3.event.pageX - canvasParams.axisShift)).format('D MMM YYYY');
var valueAtDate;
for (i=0; i<d.values.length; i++){
if (currentDate == moment(d.values[i].date).format('D MMM YYYY')){
valueAtDate = d.values[i].value;
}
}
div.html(d.key + ', ' + currentDate+' — '+valueAtDate)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY - tooltipParams.height + 8) + 'px');
if (event == 'out') {
//div.transition().duration(300).style("opacity", 0);
div.remove();
}
}
loadData('http://nemetz.devg.ru/d3/stream.csv');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment