Built with blockbuilder.org
Created
December 3, 2015 19:55
-
-
Save anonymous/f071774f55de3179be72 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> | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
width:100%; | |
height:100%; | |
background: silver; | |
margin: 0 auto; | |
} | |
#chart--01 { | |
width :100%; | |
height :220px; | |
margin : 10px auto; | |
padding : 2% 0; | |
text-align: center; | |
} | |
svg.chart { | |
border: 1px solid blue; | |
background-color: azure; | |
} | |
.line { | |
stroke : steelblue; | |
stroke-width : 1; | |
fill : none; | |
} | |
.line2 { | |
stroke :red; | |
} | |
.line2-name { | |
fill: red; | |
font-size: 10px; | |
} | |
.area { | |
fill: lightblue; | |
stroke-width: 0; | |
} | |
.area2 { | |
fill: rgba(214,34,12,.6); | |
} | |
.scatter-dots { | |
fill: white; | |
stroke: steelblue; | |
stroke-width: 1; | |
} | |
.scatter-dots:hover, | |
.scatter-dots:active { | |
fill: steelblue; | |
} | |
.axis path, | |
.axis line { | |
fill : none; | |
stroke : grey; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.axis.y path { | |
stroke-width: 0; | |
} | |
.axis .tick text { | |
fill: black; | |
font-size: 11px; | |
} | |
.grid .tick { | |
stroke: grey; | |
stroke-opacity: 1; | |
shape-rendering: crispEdges; | |
stroke-dasharray: 3,3; | |
} | |
.grid path { | |
stroke-width: 0; | |
} | |
.axis-title { | |
font-size: 12px; | |
font-style: italic; | |
} | |
.tooltip { | |
position : absolute; | |
text-align: center; | |
width : auto; | |
min-width : 90px; | |
height : auto; | |
padding : 2px; | |
font : 12px sans-serif; | |
background: Turquoise; | |
border : 0px; | |
pointer-events: none; | |
-webkit-box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
-moz-box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
} | |
</style> | |
</head> | |
<body> | |
<div id="option"> | |
<input type="button" name="updateButton" value="Update" onclick="updateData()" /> | |
</div> | |
<section class="row-1"> | |
<article id="chart--01"></article> | |
</section> | |
<script> | |
var dataset = [ | |
{datetime: "2013-01-01T11:56:00+00:00", amount: 200, pageViews: 412, enabled: true}, | |
{datetime: "2013-03-10T12:34:00+00:00", amount: 50, pageViews: 412, enabled: true}, | |
{datetime: "2013-05-21T13:00:00+00:00", amount: 1250, pageViews: 412, enabled: true}, | |
{datetime: "2013-06-23T17:00:00+00:00", amount: 300, pageViews: 3500, enabled: true}, | |
{datetime: "2013-10-25T19:00:00+00:00", amount: 600.456, pageViews: 412, enabled: true}, | |
{datetime: "2013-12-29T21:15:00+00:00", amount: 550, pageViews: 412, enabled: true}, | |
{datetime: "2013-12-30T23:11:00+00:00", amount: 233, pageViews: 412, enabled: true}, | |
]; | |
var dataset2 = [ | |
{datetime: "2012-01-21T11:56:00+00:00", amount: 0, pageViews: 200, enabled: true}, | |
{datetime: "2013-03-17T12:34:00+00:00", amount: 150, pageViews: 200, enabled: true}, | |
{datetime: "2013-06-21T13:56:00+00:00", amount: 50, pageViews: 800, enabled: true}, | |
{datetime: "2015-10-01T17:00:00+00:00", amount: 1300, pageViews: 3500, enabled: true}, | |
{datetime: "2015-10-05T19:56:00+00:00", amount: 400.456, pageViews: 1500, enabled: true}, | |
{datetime: "2015-11-29T21:56:00+00:00", amount: 10, pageViews: 700, enabled: true}, | |
{datetime: "2015-12-30T23:11:00+00:00", amount: 233, pageViews: 4000, enabled: true}, | |
]; | |
var margin = {top: 35, right: 40, bottom: 50, left: 50}; | |
svgWidth = 320, | |
svgHeight = 200, | |
contentWidth = svgWidth - margin.left - margin.right, | |
contentHeight = svgHeight - margin.top - margin.bottom; | |
svg = d3.select("#chart--01") | |
.append("svg") | |
.attr("class", "chart sample-chart") | |
.attr("width", svgWidth) | |
.attr("height", svgHeight) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); // Centering | |
var parseDate = d3.time.format.utc("%Y-%m-%dT%H:%M:%S+00:00").parse; | |
dataset.forEach(function (d) { | |
d.datetime = parseDate(d.datetime); | |
d.amount = +d.amount; | |
d.pageViews = +d.pageViews; | |
}); | |
var xScale = d3.time.scale.utc().range([0, contentWidth]), | |
yScale = d3.scale.linear().range([contentHeight, 0]), | |
yScale1 = d3.scale.linear().range([contentHeight, 0]), | |
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5), | |
yAxisLeft = d3.svg.axis().scale(yScale).orient("left" ).ticks(5).tickFormat(d3.format("s")), | |
yAxisRight = d3.svg.axis().scale(yScale1).orient("right").ticks(5).tickFormat(d3.format("s")); | |
function xGrid() { return d3.svg.axis().scale(xScale).orient("bottom").ticks(5); } | |
function yGrid() { return d3.svg.axis().scale(yScale).orient("left" ).ticks(5); } | |
var valueline = d3.svg.line() | |
.interpolate("cardinal") | |
.x(function (d) { return xScale(d.datetime); }) | |
.y(function (d) { return yScale(d.amount); }); | |
var valueline2 =d3.svg.line() | |
.interpolate("cardinal") | |
.x(function (d) { return xScale(d.datetime); }) | |
.y(function (d) { return yScale1(d.pageViews);}); | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
var year = d3.time.format("%Y"), | |
dayOfMonth = d3.time.format("%d %b"), | |
time = d3.time.format("%H:%M"); | |
// AutoUpdate | |
var inter = setInterval(function() { updateData(); }, 4000); | |
xScale.domain(d3.extent(dataset, function (d) { return d.datetime; })); | |
yScale.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
yScale1.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
xScale.nice(d3.time.month); | |
svg.append("path") | |
.attr("class", "line") | |
.attr("d", valueline(dataset)); | |
svg.append("path") | |
.attr("class", "line line2") | |
.attr("id", "line2") | |
.attr("d", valueline2(dataset)); | |
svg.selectAll("dot") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr("class", "scatter-dots") | |
.attr("r", 3.5) | |
.attr("cx", function(d) { return xScale(d.datetime); }) | |
.attr("cy", function(d) { return yScale(d.amount); }) | |
.on("mouseover", function(d) { | |
div.transition() | |
.duration(100) | |
.style("opacity", 0.95); | |
div.html("<span>" + dayOfMonth(d.datetime) + "</span> - " + | |
"<span>" + time(d.datetime) + "</span><br/>" + | |
"<span>" + d.amount + "</span>") | |
.style("left", (d3.event.pageX + 5 ) + "px") | |
.style("top", (d3.event.pageY - 40) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
div.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
svg.append("g") | |
.attr("class", "axis x") | |
.attr("transform", "translate(0, " + contentHeight + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "axis y left") | |
.call(yAxisLeft); | |
svg.append("g") | |
.attr("class", "axis y right y1") | |
.attr("transform", "translate(" + contentWidth + " ,0)") | |
.call(yAxisRight); | |
svg.append("g") | |
.attr("class", "grid") | |
.attr("transform", "translate(0," + contentHeight + ")") | |
.call(xGrid() | |
.tickSize(-contentHeight, 0, 0) | |
.tickFormat("") | |
); | |
svg.append("g") | |
.attr("class", "grid") | |
.call(yGrid() | |
.tickSize(-contentWidth, 0, 0) | |
.tickFormat("") | |
); | |
// ******* UPDATING DATA ******* // | |
function updateData() { | |
dataset2.forEach(function (d) { | |
d.datetime = parseDate(d.datetime); | |
d.amount = +d.amount; | |
d.pageViews = +d.pageViews; | |
}); | |
xScale.domain (d3.extent(dataset2 , function (d) { return d.datetime; })); | |
yScale.domain ([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
yScale1.domain([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
var svg = d3.select("body").transition(); | |
svg.select(".line") | |
.duration(750) | |
.attr("d", valueline(dataset2)); | |
svg.select(".line2") | |
.duration(750) | |
.attr("d", valueline2(dataset2)); | |
svg.select(".axis.x") | |
.duration(750) | |
.call(xAxis); | |
svg.select(".axis.y.left") | |
.duration(750) | |
.call(yAxisLeft); | |
svg.select(".axis.y.right") | |
.duration(750) | |
.call(yAxisRight); | |
svg.select("dot") | |
.data(dataset2); | |
} | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment