Skip to content

Instantly share code, notes, and snippets.

@laxmikanta415

laxmikanta415/.block

Last active January 22, 2018 08:10
Show Gist options
  • Save laxmikanta415/9eba43d592acd7b369b635c462b52a58 to your computer and use it in GitHub Desktop.
Save laxmikanta415/9eba43d592acd7b369b635c462b52a58 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
data.json
[
{
"date": "1974-11-30",
"value": "9.20000000000000000000"
},
{
"date": "1975-11-30",
"value": "4.40000000000000000000"
},
{
"date": "1976-11-30",
"value": "7.60000000000000000000"
},
{
"date": "1977-11-30",
"value": "10.80000000000000000000"
},
{
"date": "1978-11-30",
"value": "12.10000000000000000000"
},
{
"date": "1979-11-30",
"value": "10.40000000000000000000"
},
{
"date": "1980-11-30",
"value": "7.10000000000000000000"
},
{
"date": "1981-11-30",
"value": "7.20000000000000000000"
},
{
"date": "1982-11-30",
"value": "7.70000000000000000000"
},
{
"date": "1983-11-30",
"value": "10.60000000000000000000"
},
{
"date": "1984-11-30",
"value": "11.50000000000000000000"
},
{
"date": "1985-11-30",
"value": "4.20000000000000000000"
},
{
"date": "1986-11-30",
"value": "8.70000000000000000000"
},
{
"date": "1987-11-30",
"value": "6.60000000000000000000"
},
{
"date": "1988-11-30",
"value": "6.70000000000000000000"
},
{
"date": "1989-11-30",
"value": "7.20000000000000000000"
},
{
"date": "1990-11-30",
"value": "4.30000000000000000000"
},
{
"date": "1991-11-30",
"value": "2.50000000000000000000"
},
{
"date": "1992-11-30",
"value": "4.60000000000000000000"
},
{
"date": "1993-11-30",
"value": "6.00000000000000000000"
},
{
"date": "1994-11-30",
"value": "6.90000000000000000000"
},
{
"date": "1995-11-30",
"value": "6.60000000000000000000"
},
{
"date": "1996-11-30",
"value": "1.90000000000000000000"
},
{
"date": "1997-11-30",
"value": "10.00000000000000000000"
},
{
"date": "1998-11-30",
"value": "10.90000000000000000000"
},
{
"date": "1999-11-30",
"value": "7.00000000000000000000"
},
{
"date": "2000-11-30",
"value": "8.30000000000000000000"
},
{
"date": "2001-11-30",
"value": "4.70000000000000000000"
},
{
"date": "2002-11-30",
"value": "8.30000000000000000000"
},
{
"date": "2003-11-30",
"value": "7.10000000000000000000"
},
{
"date": "2004-11-30",
"value": "8.40000000000000000000"
},
{
"date": "2005-11-30",
"value": "9.70000000000000000000"
},
{
"date": "2006-11-30",
"value": "8.20000000000000000000"
},
{
"date": "2007-11-30",
"value": "7.50000000000000000000"
},
{
"date": "2008-11-30",
"value": "3.40000000000000000000"
},
{
"date": "2009-11-30",
"value": "-5.40000000000000000000"
},
{
"date": "2010-11-30",
"value": "-2.70000000000000000000"
},
{
"date": "2011-11-30",
"value": "1.50000000000000000000"
},
{
"date": "2012-11-30",
"value": "3.90000000000000000000"
},
{
"date": "2013-11-30",
"value": "1.10000000000000000000"
},
{
"date": "2014-11-30",
"value": "6.50000000000000000000"
},
{
"date": "2015-11-30",
"value": "7.00000000000000000000"
},
{
"date": "2016-11-30",
"value": "6.50000000000000000000"
}
]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width="700" height="550"></svg>
<script>
var parseDate = d3.timeParse("%Y-%m-%d");
var parseDateWithThisFormat = d3.timeParse("%b %Y");
var formatDate = d3.timeFormat('%b %Y');
var parseDateForTable = d3.timeFormat('%B %d, %Y');
var svg = d3.select("svg");
var margin = {top: 20, right: 20, bottom: 110, left: 40};
var margin2 = {top: 460, right: 20, bottom: 30, left: 40};
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;
var height2 = +svg.attr("height") - margin2.top - margin2.bottom;
var data = [];
d3.json('data.json',(err,dataResult)=>{
for(var i=0;i<dataResult.length;i++){
var item ={};
item['value'] = dataResult[i].value;
item['date'] = parseDateWithThisFormat(formatDate(parseDate(dataResult[i].date)));
data.push(item);
}
var x = d3.scaleTime().range([0, width]);
var x2 = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height-margin.top, margin.bottom]);
var y2 = d3.scaleLinear().range([height2-20, 20]);
x.domain(d3.extent(data, (d) => d['date']));
y.domain(d3.extent(data, (d) => d['value']));
x2.domain(x.domain());
y2.domain(y.domain());
console.log(d3.min(data, (d) => {
//console.log(d.value);
return d['value'];
}));
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var area = d3.line()
.x(function(d) { return x(d['date']); })
.y(function(d) { return y(d['value']); });
var area2 = d3.line()
.x(function(d) { return x2(d['date']); })
.y(function(d) { return y2(d['value']); });
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area)
.attr('fill','none')
.attr('clip-path','url(#clip)')
.attr('stroke', '#2299f1')
.attr('stroke-width','2px')
;
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis).attr('stroke-width','2');;
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis).attr('stroke-width','2');
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2)
.attr('fill','none')
.attr('clip-path','url(#clip)')
.attr('stroke','#2299f1')
.attr('stroke-width','2px');
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
var test = svg.append('g').attr("transform", "translate(" + margin.left + "," + margin.top + ")");;
test.append("circle")
.attr("class", "y")
.style("fill", "none")
.style("stroke", "blue")
.attr("r", 5);
test.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mousemove", mousemove);
test.append("text")
.attr("x", 9)
.attr("dy", ".35em");
var bisectDate = d3.bisector(function(d) { return d['date']; }).left;
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
test.select("circle.y")
.attr("transform",
"translate(" + x(d.date) + "," +
y(d.value) + ")");
test.select("text")
.text(parseFloat(d.value).toFixed(2))
.attr("transform","translate(" + x(d.date) + "," + y(d.value) + ")");
}
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;
var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
focus.select(".area").attr("d", area);
focus.select(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return;
var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
focus.select(".area").attr("d", area);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
var type= (d)=>{
d.date = this.parseDate(d.date);
d.value = +d.value;
return d;
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment