BartekDu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from bae25's block: Trying out cubism

  
## cubismstyle.css
html {min-width: 1040px;}
body {font-family: "Helvetica Neue", Helvetica, sans-serif; margin: auto; margin-top: 40px; margin-bottom: 4em; width: 960px;}

footer {font-size: small;margin-top: 8em;}

aside {font-size: small; left: 780px; position: absolute; width: 180px}

.html .value, .javascript .string, .javascript .regexp {color: #756bb1}
.html .tag, .css .tag, .javascript .keyword {color: #3182bd}
.comment {color: #636363}
.html .doctype, .javascript .number {color: #31a354}
.html .attribute, .css .attribute, .javascript .class,.javascript .special {color: #e6550d}

svg {font: 10px sans-serif}

sup, sub {line-height: 0}

q:before, blockquote:before {content: "Ã¢â‚¬Å“"}
q:after, blockquote:after {content: "Ã¢â‚¬Â"}
blockquote:before {position: absolute;left: 2em}
blockquote:after {position: absolute}

h1 {font-size: 96px; margin-top: .3em; margin-bottom: 0}
h1 + h2 {margin-top: 0}
h2 {font-weight: 400; font-size: 28px}
h1, h2 {font-family: "Yanone Kaffeesatz"; text-rendering: optimizeLegibility}

#logo {width: 122px; height: 31px}
#fork {position: absolute; top: 0; right: 0}

.axis path, .axis line {fill: none; stroke: #000; shape-rendering: crispEdges;}
 .axis {font: 10px sans-serif}
.axis text {-webkit-transition: fill-opacity 250ms linear}
.axis path {display: none}
.axis line {stroke: #000;shape-rendering: crispEdges}

.horizon {border-bottom: solid 1px #000; overflow: hidden;position: relative}
.horizon {border-top: solid 1px #000; border-bottom: solid 1px #000}
.horizon + .horizon {border-top: none}
.horizon canvas {display: block}
.horizon .title,
.horizon .value {bottom: 0; line-height: 30px; margin: 0 6px; position: absolute; text-shadow: 0 1px 0 rgba(255,255,255,.5); white-space: nowrap}
.horizon .title {left: 0}
.horizon .value {right: 0}

.line {background: #000; opacity: .2; z-index: 2;}

## index.html
<!DOCTYPE html>
     <head>
          <meta charset=utf-8>
          <link rel = stylesheet href = cubismstyle.css>
          <script src=http://d3js.org/d3.v3.min.js></script>
          <script src=http://square.github.io/cubism/cubism.v1.js></script>
     </head>
     <body>
          <div id = content>
               <h3>Understanding <a href = http://square.github.io/cubism/>cubism</a></h3>
               <div id = demo>
                    <div id = update-time></div>
                    <div id = desc></div>
               </div>

<script>
var context = cubism
    .context()
    .step(1e4)
    .size(+d3.select("#demo")
    .style("width")
    .slice(0,-2));

context
    .on("change", function(start, stop) {
        d3.select("#update-time")
        .text("Last updated at " + stop + ".");
    });

d3.select("#demo")
    .selectAll(".axis")
    .data(["top","bottom"])
    .enter()
  .append("div")
     .attr("class",function(d){return d+" axis"})
     .each(function(d) {
         d3.select(this)
           .call(context.axis().ticks(12).orient(d))});

d3.select("#demo")
  .append("div")
    .attr("class","rule")
  .call(context.rule());

//this is where the metrics are created
var Data = d3.range(1,6).map(random);
var primary = Data[4];
var secondary = primary.shift(-30*60*1000); //why is this metric identical to the primary metric?
Data[5] = secondary;

d3.select("#demo")
    .selectAll(".horizon")
    .data(Data)
    .enter()
  .insert("div",".bottom")
    .attr("class","horizon")
    .call(context.horizon()
    .extent([-10, 10]))

context.on("focus",function(i) {
        d3.selectAll(".value")
           .style("right",i == null?null:context.size()-i+"px")});

function random(x) {
var value = 0, values = [],i = 0, last;
  return context.metric(function(start,stop,step,callback) {
    start = +start, stop = +stop; last = isNaN(last)?start:last;
    while (last < stop) {last += step;
      value = Math.max(-10,Math.min(10,value+.8*Math.random()-.4+.2*Math.cos(i+=x*.02)))
      values.push(value); values = values.slice((start-stop)/stop)}
    callback(null,values)
},x)}
</script>
</div>
</body>
	html {min-width: 1040px;}
	body {font-family: "Helvetica Neue", Helvetica, sans-serif; margin: auto; margin-top: 40px; margin-bottom: 4em; width: 960px;}

	footer {font-size: small;margin-top: 8em;}

	aside {font-size: small; left: 780px; position: absolute; width: 180px}

	.html .value, .javascript .string, .javascript .regexp {color: #756bb1}
	.html .tag, .css .tag, .javascript .keyword {color: #3182bd}
	.comment {color: #636363}
	.html .doctype, .javascript .number {color: #31a354}
	.html .attribute, .css .attribute, .javascript .class,.javascript .special {color: #e6550d}

	svg {font: 10px sans-serif}

	sup, sub {line-height: 0}

	q:before, blockquote:before {content: "Ã¢â‚¬Å“"}
	q:after, blockquote:after {content: "Ã¢â‚¬Â"}
	blockquote:before {position: absolute;left: 2em}
	blockquote:after {position: absolute}

	h1 {font-size: 96px; margin-top: .3em; margin-bottom: 0}
	h1 + h2 {margin-top: 0}
	h2 {font-weight: 400; font-size: 28px}
	h1, h2 {font-family: "Yanone Kaffeesatz"; text-rendering: optimizeLegibility}

	#logo {width: 122px; height: 31px}
	#fork {position: absolute; top: 0; right: 0}

	.axis path, .axis line {fill: none; stroke: #000; shape-rendering: crispEdges;}
	.axis {font: 10px sans-serif}
	.axis text {-webkit-transition: fill-opacity 250ms linear}
	.axis path {display: none}
	.axis line {stroke: #000;shape-rendering: crispEdges}

	.horizon {border-bottom: solid 1px #000; overflow: hidden;position: relative}
	.horizon {border-top: solid 1px #000; border-bottom: solid 1px #000}
	.horizon + .horizon {border-top: none}
	.horizon canvas {display: block}
	.horizon .title,
	.horizon .value {bottom: 0; line-height: 30px; margin: 0 6px; position: absolute; text-shadow: 0 1px 0 rgba(255,255,255,.5); white-space: nowrap}
	.horizon .title {left: 0}
	.horizon .value {right: 0}

	.line {background: #000; opacity: .2; z-index: 2;}
	<!DOCTYPE html>
	<head>
	<meta charset=utf-8>
	<link rel = stylesheet href = cubismstyle.css>
	<script src=http://d3js.org/d3.v3.min.js></script>
	<script src=http://square.github.io/cubism/cubism.v1.js></script>
	</head>
	<body>
	<div id = content>
	<h3>Understanding <a href = http://square.github.io/cubism/>cubism</a></h3>
	<div id = demo>
	<div id = update-time></div>
	<div id = desc></div>
	</div>

	<script>
	var context = cubism
	.context()
	.step(1e4)
	.size(+d3.select("#demo")
	.style("width")
	.slice(0,-2));

	context
	.on("change", function(start, stop) {
	d3.select("#update-time")
	.text("Last updated at " + stop + ".");
	});

	d3.select("#demo")
	.selectAll(".axis")
	.data(["top","bottom"])
	.enter()
	.append("div")
	.attr("class",function(d){return d+" axis"})
	.each(function(d) {
	d3.select(this)
	.call(context.axis().ticks(12).orient(d))});

	d3.select("#demo")
	.append("div")
	.attr("class","rule")
	.call(context.rule());

	//this is where the metrics are created
	var Data = d3.range(1,6).map(random);
	var primary = Data[4];
	var secondary = primary.shift(-30601000); //why is this metric identical to the primary metric?
	Data[5] = secondary;

	d3.select("#demo")
	.selectAll(".horizon")
	.data(Data)
	.enter()
	.insert("div",".bottom")
	.attr("class","horizon")
	.call(context.horizon()
	.extent([-10, 10]))

	context.on("focus",function(i) {
	d3.selectAll(".value")
	.style("right",i == null?null:context.size()-i+"px")});

	function random(x) {
	var value = 0, values = [],i = 0, last;
	return context.metric(function(start,stop,step,callback) {
	start = +start, stop = +stop; last = isNaN(last)?start:last;
	while (last < stop) {last += step;
	value = Math.max(-10,Math.min(10,value+.8Math.random()-.4+.2Math.cos(i+=x*.02)))
	values.push(value); values = values.slice((start-stop)/stop)}
	callback(null,values)
	},x)}
	</script>
	</div>
	</body>