Skip to content

Instantly share code, notes, and snippets.

@diggetybo

diggetybo/index.html

Last active November 3, 2016 03:26
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 diggetybo/f46ebec18dda16bf39f41b9282b5b593 to your computer and use it in GitHub Desktop.
Save diggetybo/f46ebec18dda16bf39f41b9282b5b593 to your computer and use it in GitHub Desktop.
Download ZIP
The Zoom is Back! but what about the data reduction library?
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Focus + Context</title>
<style type="text/css">
p {
color:white
}
body {
background-color:#282c34
}
</style>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<body style="overflow: hidden">
<p>Programming underway, please stand by.</p>
<script>
var width = 600,
height = 400;
var margins = {
top: 10,
left: 50,
right: 50,
bottom: 10,
between: 50
};
var bottomGraphHeight = 50;
var topGraphHeight = height - (margins.top + margins.bottom + margins.between + bottomGraphHeight);
var graphWidths = width - margins.left - margins.right;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
.style('font', '10px sans-serif');
svg.append('defs')
.append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', width)
.attr('height', height);
var focus = svg
.append('g')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');
var context = svg.append('g')
.attr('class', 'context')
.attr('transform', 'translate(' + margins.left + ',' +
(margins.top + topGraphHeight + margins.between) + ')');
var xScaleTop = d3.scale.linear().range([0, graphWidths]),
xScaleBottom = d3.scale.linear().range([0, graphWidths]),
yScaleTop = d3.scale.linear().range([topGraphHeight, 0]),
yScaleBottom = d3.scale.linear().range([bottomGraphHeight, 0]);
var xAxisTop = d3.svg.axis().scale(xScaleTop).orient('bottom'),
xAxisBottom = d3.svg.axis().scale(xScaleBottom).orient('bottom');
var yAxisTop = d3.svg.axis().scale(yScaleTop).orient('left');
var lineTop = d3.svg.line()
.x(function(d, i) {
return xScaleTop(i);
})
.y(function(d) {
return yScaleTop(d.y2);
});
var lineBottom = d3.svg.line()
.x(function(d, i) {
return xScaleBottom(i);
})
.y(function(d) {
return yScaleBottom(d.y2);
});
var brush = d3.svg.brush()
.x(xScaleBottom)
.on('brush', function brushed() {
xScaleTop.domain(brush.empty() ? xScaleBottom.domain() : brush.extent());
focus.select('.line').attr('d', lineTop);
focus.select('.x.axis').call(xAxisTop);
});
var url = "https://gist.githubusercontent.com/diggetybo/f46ebec18dda16bf39f41b9282b5b593/raw/70c279b9aef16f5348bc3185909c4b001414a611/wav_2.tsv";
d3.tsv(url, function(error, rawData) {
var data = rawData.map(function(d) {
return {
y2: +d.wav1
}
});
//var sampler = fc_sample.largestTriangleThreeBucket();
//sampler.x(function (d,i) { return i; })
//.y(function (d) { return y2; });
//sampler.bucketSize(10);
//var sampledData = sampler(data);
xScaleTop.domain(d3.extent(data, function(d, i) {
return i;
}));
yScaleTop.domain([-.02, .02]);
xScaleBottom.domain(d3.extent(data, function(d, i) {
return i;
}));
yScaleBottom.domain([-.02, .02]);
var topXAxisNodes = focus.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(' + 0 + ',' + (margins.top + topGraphHeight) + ')')
.call(xAxisTop);
styleAxisNodes(topXAxisNodes, 0);
focus.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', lineTop);
var topYAxisNodes = focus.append('g')
.call(yAxisTop);
styleAxisNodes(topYAxisNodes);
context.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', lineBottom);
var bottomXAxisNodes = context.append('g')
.attr('transform', 'translate(0,' + bottomGraphHeight + ')')
.call(xAxisBottom);
styleAxisNodes(bottomXAxisNodes, 0);
context.append('g')
.attr('class', 'x brush')
.call(brush)
.selectAll('rect')
.attr('y', -6)
.attr('height', bottomGraphHeight + 7);
context.selectAll('.extent')
.attr({
stroke: '#000',
'fill-opacity': 0.125,
'shape-rendering': 'crispEdges'
});
styleLines(svg);
});
function styleLines(svg) {
svg.selectAll('path.line')
.attr({
fill: 'none',
'stroke-width': 1.5,
stroke: 'steelblue',
'clip-path': 'url(#clip)'
});
}
function styleAxisNodes(axisNodes, strokeWidth) {
axisNodes.selectAll('.domain')
.attr({
fill: 'none',
'stroke-width': strokeWidth,
stroke: 'black'
});
axisNodes.selectAll('.tick line')
.attr({
fill: 'none',
'stroke-width': 1,
stroke: 'black'
});
}
</script>
</body>
</html>
Raw
wav_2.tsv
We can make this file beautiful and searchable if this error is corrected: No tabs found in this TSV file in line 0.
wav1
-2.669712167802108880e-03
-4.990349325845266394e-03
-3.444525524830862294e-03
1.262023319824127877e-04
1.800561182978078871e-03
2.376465231300890248e-03
2.751200839835996406e-03
3.829688744559967863e-04
-4.505658444450449593e-03
-6.616740549992609910e-03
-2.112616263312174034e-03
5.370146241984289498e-03
7.248313897140850476e-03
9.275811897542322057e-04
-5.165946328605085236e-03
-3.443682516393631841e-03
1.635392267567957643e-03
2.013558050722783106e-03
-1.095270813361610453e-03
-1.341946777715722662e-03
1.345236485095880870e-03
1.885152277596895088e-03
-3.017721419563785742e-04
-5.910944369925933859e-04
1.851459181937284426e-03
1.902736734671839998e-03
-2.277097692505044690e-03
-4.818863406737663134e-03
-8.655104420301700614e-04
5.392339931775968348e-03
5.942589499356533411e-03
7.560565253624892769e-06
-4.946404193320817419e-03
-3.611873689628162555e-03
8.868921738972312691e-04
2.782317548619334720e-03
9.867373837100278447e-04
-1.171780494091718581e-03
-8.493773695366978009e-04
1.135708891254753406e-03
1.968182098935211330e-03
7.580342644724561828e-04
-7.419609241170746971e-04
-8.990232409646468784e-04
-2.634173380796788378e-04
-6.726884889950515440e-04
-2.098014027489830333e-03
-1.467755732845752240e-03
2.788576071736239420e-03
6.383989017419049346e-03
3.937772192027295080e-03
-2.586389252237157946e-03
-5.384171825345991300e-03
-1.413242632496186819e-03
3.056636736001128261e-03
1.501083270366302541e-03
-2.658251508778713534e-03
-1.409293474651487649e-03
4.193456532922493381e-03
5.189871216561165249e-03
-5.142119543491543770e-04
-4.640678219176196800e-03
-1.822085509027242863e-03
2.185356089942731492e-03
5.271352953873737141e-04
-3.007647617646448755e-03
-8.025851371642193010e-04
4.488681011597740571e-03
4.093794476564977143e-03
-1.199606295861221352e-03
-2.256016450288154430e-03
1.884390832208295442e-03
1.679169832691686324e-03
-5.650616713635820375e-03
-8.848217255489907243e-03
-1.487565981237775811e-04
1.003477157480798555e-02
7.419146093832752059e-03
-3.724664620703710145e-03
-6.646882215180739337e-03
1.788620352893481461e-03
6.799795368123593212e-03
-1.086108517031391459e-04
-7.913420930706205683e-03
-4.363680826709629562e-03
4.605056682914767004e-03
5.222512519889839847e-03
-1.686753711110493010e-03
-2.998047792765727842e-03
4.024089981055641030e-03
6.927065643873198293e-03
-9.183755392906267244e-04
-8.818129583708011685e-03
-5.349634695343297511e-03
4.224669485004159571e-03
6.603419886726091120e-03
6.457147842983279476e-05
-4.964594692236476599e-03
-2.678420986145575722e-03
1.350790541501331989e-03
1.300392343354523457e-03
-6.714447537673309862e-04
-7.684156403475338355e-04
-1.726667201651468670e-04
-1.096217732552896623e-03
-2.054850506284839565e-03
-1.134341611688990557e-03
2.548269415181883264e-04
5.399659522166193543e-04
1.302959008071453246e-03
3.202285278794118895e-03
2.335720823000025231e-03
-3.458988794572390169e-03
-8.060482581522757789e-03
-4.212024731855305501e-03
4.746208962936023477e-03
8.068241865103494351e-03
2.248810002788924865e-03
-4.656950755156726192e-03
-4.684569656770483891e-03
2.960747952010166456e-04
3.304605984857975076e-03
1.927617287919208833e-03
-6.951551870394437555e-04
-1.792999781240920678e-03
-1.639868132037146462e-03
-1.216877599664304213e-03
-4.927716105501141848e-04
8.251713644238865527e-04
2.471922681216354254e-03
3.207644884280387576e-03
1.085733305695339452e-03
-3.713625340919053316e-03
-6.504225237692372492e-03
-2.719823510304105081e-03
4.412119405660191139e-03
6.257932938387369450e-03
7.073343624866045357e-04
-4.470548797690854746e-03
-3.352542963986256293e-03
-7.680293362082046566e-05
-6.895436886882517797e-05
-1.000103386131071307e-04
4.302298418097821528e-03
7.298117426577170955e-03
5.286067018599067144e-04
-1.015454975394947806e-02
-9.605855511414787204e-03
3.545459708682585209e-03
1.241202245049451668e-02
5.694707354773546719e-03
-6.227601139975145333e-03
-7.692905073381855162e-03
-4.220120636433464904e-05
4.145975443554788045e-03
1.620140932494197475e-03
-4.184645194512961151e-04
4.607191832811379385e-04
-3.918157040733162523e-04
-2.774625243707334443e-03
-6.666538044382536556e-04
5.051987883036871893e-03
5.180811928412819289e-03
-2.390155851281787827e-03
-7.176829565024575759e-03
-2.270153846791663713e-03
4.530365712833256571e-03
3.857598871142928904e-03
-5.938255942507168587e-04
-4.443377090523786582e-04
2.293876219352040686e-03
1.572345855544018609e-04
-4.666379852131908451e-03
-2.971633350571039212e-03
4.772661073275623507e-03
7.301427841018440744e-03
6.496375587246757928e-04
-5.000578479121949027e-03
-1.846110256293224039e-03
3.489061887488987147e-03
1.950523693765249689e-03
-3.161158079790034239e-03
-2.703424327196129844e-03
2.998847047358272917e-03
5.285740423897921682e-03
1.211541635480877562e-03
-2.864603217464372319e-03
-2.022362137135262118e-03
9.788125945754354556e-04
1.893480073310138028e-03
6.675887903478919423e-04
-1.135575874403788521e-03
-2.944765980512713786e-03
-3.266085477523066830e-03
-2.525910456045967400e-04
3.874115059495356148e-03
3.851999431217112413e-03
-7.583224344579186102e-04
-3.672421278465872255e-03
-1.107905336187355472e-03
2.171982640673008388e-03
5.654120913656780984e-04
-3.322731768996661696e-03
-3.172805482129228798e-03
8.860826231019453166e-04
3.004650898020174484e-03
1.060092504366824890e-03
-9.279345031651147673e-04
-1.893449010576715187e-04
8.104334608386227394e-04
-3.468236925358135904e-04
-1.863812800634904142e-03
-1.535667814936824728e-03
-4.375752783524499193e-04
-4.067797259285419853e-05
5.693376235885767725e-04
1.936025097752095119e-03
2.017432636437176824e-03
-4.276002637048979642e-04
-2.785970706228129389e-03
-1.912920827945721342e-03
1.000065821625684657e-03
1.871616528069199471e-03
-6.399049274145224070e-04
-3.633840952803255725e-03
-3.875557574038799528e-03
-1.084717031259781021e-03
2.397302950415010174e-03
3.715188801713589957e-03
1.859366755443098151e-03
-1.149779998432891347e-03
-2.524561126876734198e-03
-2.309661960601218540e-03
-2.503072948733091069e-03
-2.445775047880288135e-03
8.973775223265141642e-04
6.216155613965233806e-03
6.412507436075109632e-03
-1.470528809083527198e-03
-9.110511933306419952e-03
-6.609791973836155222e-03
3.146776365911782645e-03
7.999565312248570897e-03
3.647794044279182961e-03
-1.742318637410750779e-03
-1.554983175325884035e-03
1.914090357316449885e-04
-1.739983526638900525e-03
-3.869622009527515574e-03
-7.402779447178232984e-04
4.473790463621414755e-03
4.491928713470338431e-03
-3.924845246587597611e-04
-3.279322556583876523e-03
-1.600443612769673982e-03
5.302657643803142858e-04
4.279933625699683993e-04
1.650659802381254917e-05
3.076227720418628028e-04
-4.069624225968160184e-04
-1.418804799629278012e-03
5.336223596723566574e-04
4.244626810101743974e-03
3.804732168910961079e-03
-1.636737258521282811e-03
-4.795159232467166403e-03
-1.115877028687702532e-03
3.719338514335281381e-03
2.757826061503276544e-03
-1.370973569420987298e-03
-1.661382440044828143e-03
1.305896083104525398e-03
1.152829405908894133e-03
-2.316760701465811392e-03
-2.127384145049275501e-03
3.713633689452508144e-03
7.467256641120854563e-03
2.890422592539199260e-03
-5.126714788177484314e-03
-7.353284297467356165e-03
-2.492863563321015379e-03
2.876899448596137270e-03
4.226360798752586828e-03
3.170914982602687088e-03
2.166090268195019000e-03
5.725589371481404777e-04
-2.295579735025391529e-03
-4.029391156386003328e-03
-2.006062374562207935e-03
2.149741286804527762e-03
3.790690618211767140e-03
9.449669469253828237e-04
-3.047648414020455963e-03
-3.395985339704474856e-03
5.545610181032519350e-04
4.557235990461236223e-03
4.246281587630168670e-03
-1.304244899043129958e-04
-4.336797728327289846e-03
-4.898693692250497347e-03
-2.126572976463674859e-03
1.455946851800424529e-03
4.054609942704063066e-03
4.935176694687105035e-03
3.204987393132471742e-03
-1.388878494502064154e-03
-6.209890592166456523e-03
-6.691002820369407536e-03
-1.394110570017118196e-03
5.109014278437201510e-03
6.654980695093170966e-03
2.537019047299213757e-03
-2.033822889515154910e-03
-2.738601395804434162e-03
-8.789679835034426699e-04
-2.604275560080285235e-06
-3.674706088685219564e-04
2.765716191116721176e-04
1.751612921066283404e-03
1.178791383175490899e-03
-1.766984535849122325e-03
-3.028051667710245955e-03
6.782524032181059691e-05
3.871809222960501985e-03
2.781678208533820088e-03
-2.554607742840875589e-03
-5.444303800280585019e-03
-2.127554432187571138e-03
3.144076260007768343e-03
4.195734465349827691e-03
1.108713222778605345e-03
-1.222896213290045140e-03
-1.019515929413642103e-03
-1.276737803438488276e-03
-3.096575522626734706e-03
-2.568959815571643206e-03
2.459012778474404300e-03
6.540591117764785883e-03
2.995611195406071986e-03
-5.411972403473830004e-03
-8.365657303056986058e-03
-1.622462432630536727e-03
6.869363715680801806e-03
7.504776564351349835e-03
1.080644119735927732e-03
-4.115437035189846264e-03
-4.006700463414358294e-03
-1.769410343810504495e-03
-5.093424984983383960e-04
8.488779809591143373e-04
3.090163073041840309e-03
3.417380618221639924e-03
-2.023690213819316392e-04
-4.597355356433130424e-03
-4.773829285386146405e-03
-4.049127153336412274e-04
3.763219073365743541e-03
3.571837904389797442e-03
-2.932118815359239920e-04
-3.547118783569687579e-03
-2.825171827100185669e-03
8.723539606178984602e-04
3.094385340348526983e-03
1.057041470695333288e-03
-2.565644716523429302e-03
-2.938146451167088051e-03
9.442323495039782846e-05
1.738615251459713941e-03
-1.754228441188211219e-04
-1.562337783528260733e-03
9.740137211119787508e-04
3.559153663911316778e-03
7.851996590032317468e-04
-4.413385193571208245e-03
-3.878014934887977737e-03
2.595477620422853397e-03
5.300618074042819615e-03
-6.592637744746443484e-04
-6.344877662511365715e-03
-1.876086977317937632e-03
7.183737514280315317e-03
6.808757228115918866e-03
-3.674039381847560987e-03
-8.961503010330553257e-03
-6.713927019985878797e-04
8.836974291769281523e-03
4.641609335118430067e-03
-7.463547336788336865e-03
-9.285110211092363272e-03
1.836105257553417381e-03
9.053863917120289970e-03
2.425815273409882844e-03
-6.066327308250518691e-03
-2.458574027611538319e-03
6.763878364821875912e-03
5.652037589165916087e-03
-5.192225048054305292e-03
-9.607882338268295200e-03
-1.370906380585904232e-03
6.991564824021242325e-03
4.576129714936347931e-03
-2.313945822216092064e-03
-2.436576192171458627e-03
2.833115548491092588e-03
4.037724747289906518e-03
-6.363365535379798170e-04
-4.259343394108478995e-03
-2.909354432643875433e-03
3.217322913083166909e-04
2.096637239838291741e-03
2.366244290326644222e-03
1.405741840462419127e-03
-6.620900236214364567e-04
-1.660643488835777688e-03
3.867412694398255697e-05
1.528005872038811202e-03
-4.990328316025346121e-04
-3.000103009162373609e-03
-6.721940291537190255e-04
4.141388718558774301e-03
3.757637799707708778e-03
-2.103538963289811915e-03
-4.839394769882152288e-03
-7.283941120390424783e-04
3.024037392558557094e-03
6.331269322907739005e-04
-2.735225204055463481e-03
-7.375864445411206387e-04
2.625392263342015559e-03
4.695333065482816103e-04
-3.852327419433169194e-03
-2.022464891749661386e-03
4.131704767305064904e-03
4.638903229460505928e-03
-1.981749589301991417e-03
-5.924405190407752708e-03
-2.072391742743946458e-03
2.538453602623556501e-03
1.700512092686876347e-03
-5.774807842439603611e-05
2.497869917635253591e-03
4.495628317847683714e-03
-3.921971469624089841e-04
-7.005029537319621379e-03
-5.385317058696290592e-03
2.950603031619303089e-03
6.576107531458743639e-03
1.452499239289103397e-03
-3.942730915406580591e-03
-2.628171296926321964e-03
1.315950088071220865e-03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment