Skip to content

Instantly share code, notes, and snippets.

@brapse

brapse/README.md

Last active December 10, 2015 11:58
Show Gist options
  • Save brapse/4430650 to your computer and use it in GitHub Desktop.
Save brapse/4430650 to your computer and use it in GitHub Desktop.
Download ZIP
gist
Raw
README.md

SomeGraph

Look at all the details and how they work

IT WORKS REALLY WEELL

  • It has an x axis
  • It has a y axis
Raw
data.csv
label sample value
sin 1 0.09983341664682815
cos 1 0.9950041652780258
sin 2 0.19866933079506122
cos 2 0.9800665778412416
sin 3 0.29552020666133955
cos 3 0.955336489125606
sin 4 0.3894183423086505
cos 4 0.9210609940028851
sin 5 0.479425538604203
cos 5 0.8775825618903728
sin 6 0.5646424733950354
cos 6 0.8253356149096783
sin 7 0.644217687237691
cos 7 0.7648421872844885
sin 8 0.7173560908995228
cos 8 0.6967067093471654
sin 9 0.7833269096274834
cos 9 0.6216099682706644
sin 10 0.8414709848078965
cos 10 0.5403023058681398
sin 11 0.8912073600614354
cos 11 0.4535961214255773
sin 12 0.9320390859672263
cos 12 0.3623577544766736
sin 13 0.963558185417193
cos 13 0.26749882862458735
sin 14 0.9854497299884601
cos 14 0.16996714290024104
sin 15 0.9974949866040544
cos 15 0.0707372016677029
sin 16 0.9995736030415051
cos 16 -0.029199522301288815
sin 17 0.9916648104524686
cos 17 -0.12884449429552464
sin 18 0.9738476308781951
cos 18 -0.2272020946930871
sin 19 0.9463000876874145
cos 19 -0.32328956686350335
sin 20 0.9092974268256817
cos 20 -0.4161468365471424
sin 21 0.8632093666488737
cos 21 -0.5048461045998576
sin 22 0.8084964038195901
cos 22 -0.5885011172553458
sin 23 0.7457052121767203
cos 23 -0.6662760212798241
sin 24 0.675463180551151
cos 24 -0.7373937155412454
sin 25 0.5984721441039565
cos 25 -0.8011436155469337
sin 26 0.5155013718214642
cos 26 -0.8568887533689473
sin 27 0.4273798802338298
cos 27 -0.9040721420170612
sin 28 0.3349881501559051
cos 28 -0.9422223406686581
sin 29 0.23924932921398243
cos 29 -0.9709581651495905
sin 30 0.1411200080598672
cos 30 -0.9899924966004454
sin 31 0.04158066243329049
cos 31 -0.9991351502732795
sin 32 -0.058374143427580086
cos 32 -0.9982947757947531
sin 33 -0.1577456941432482
cos 33 -0.9874797699088649
sin 34 -0.2555411020268312
cos 34 -0.9667981925794611
sin 35 -0.35078322768961984
cos 35 -0.9364566872907963
sin 36 -0.44252044329485246
cos 36 -0.896758416334147
sin 37 -0.5298361409084934
cos 37 -0.848100031710408
sin 38 -0.6118578909427189
cos 38 -0.7909677119144168
sin 39 -0.6877661591839738
cos 39 -0.7259323042001402
sin 40 -0.7568024953079282
cos 40 -0.6536436208636119
sin 41 -0.8182771110644103
cos 41 -0.5748239465332692
sin 42 -0.8715757724135882
cos 42 -0.4902608213406994
sin 43 -0.9161659367494549
cos 43 -0.40079917207997545
sin 44 -0.951602073889516
cos 44 -0.30733286997841935
sin 45 -0.977530117665097
cos 45 -0.2107957994307797
sin 46 -0.9936910036334644
cos 46 -0.11215252693505487
sin 47 -0.9999232575641008
cos 47 -0.01238866346289056
sin 48 -0.9961646088358407
cos 48 0.0874989834394464
sin 49 -0.9824526126243325
cos 49 0.18651236942257576
sin 50 -0.9589242746631385
cos 50 0.28366218546322625
sin 51 -0.9258146823277325
cos 51 0.37797774271298024
sin 52 -0.8834546557201531
cos 52 0.4685166713003771
sin 53 -0.8322674422239013
cos 53 0.5543743361791608
sin 54 -0.7727644875559871
cos 54 0.6346928759426347
sin 55 -0.7055403255703919
cos 55 0.70866977429126
sin 56 -0.6312666378723216
cos 56 0.7755658785102496
sin 57 -0.5506855425976376
cos 57 0.8347127848391598
sin 58 -0.46460217941375737
cos 58 0.8855195169413189
sin 59 -0.373876664830236
cos 59 0.9274784307440359
sin 60 -0.27941549819892586
cos 60 0.960170286650366
sin 61 -0.18216250427209588
cos 61 0.9832684384425845
sin 62 -0.0830894028174964
cos 62 0.9965420970232175
sin 63 0.016813900484349713
cos 63 0.9998586363834151
sin 64 0.11654920485049364
cos 64 0.9931849187581926
sin 65 0.21511998808781552
cos 65 0.9765876257280235
sin 66 0.31154136351337786
cos 66 0.9502325919585296
sin 67 0.4048499206165983
cos 67 0.9143831482353194
sin 68 0.49411335113860816
cos 68 0.8693974903498253
sin 69 0.5784397643882001
cos 69 0.8157251001253568
sin 70 0.6569865987187891
cos 70 0.7539022543433046
sin 71 0.7289690401258759
cos 71 0.6845466664428066
sin 72 0.7936678638491531
cos 72 0.6083513145322546
sin 73 0.8504366206285644
cos 73 0.5260775173811053
sin 74 0.8987080958116269
cos 74 0.43854732757439036
sin 75 0.9379999767747389
cos 75 0.3466353178350258
sin 76 0.9679196720314863
cos 76 0.2512598425822557
sin 77 0.9881682338770004
cos 77 0.15337386203786435
sin 78 0.998543345374605
cos 78 0.05395542056264975
sin 79 0.998941341839772
cos 79 -0.04600212563953695
sin 80 0.9893582466233818
cos 80 -0.14550003380861354
sin 81 0.9698898108450863
cos 81 -0.2435441537357911
sin 82 0.9407305566797731
cos 82 -0.3391548609838345
sin 83 0.9021718337562933
cos 83 -0.4313768449706208
sin 84 0.8545989080882804
cos 84 -0.5192886541166856
sin 85 0.7984871126234903
cos 85 -0.6020119026848236
sin 86 0.7343970978741133
cos 86 -0.6787200473200125
sin 87 0.6629692300821833
cos 87 -0.7486466455973987
sin 88 0.5849171928917617
cos 88 -0.811093014061656
sin 89 0.5010208564578846
cos 89 -0.8654352092411123
sin 90 0.4121184852417566
cos 90 -0.9111302618846769
sin 91 0.3190983623493521
cos 91 -0.9477216021311119
sin 92 0.22288991410024764
cos 92 -0.9748436214041636
sin 93 0.1244544235070617
cos 93 -0.9922253254526034
sin 94 0.024775425453357765
cos 94 -0.9996930420352065
sin 95 -0.0751511204618093
cos 95 -0.9971721561963784
sin 96 -0.17432678122297965
cos 96 -0.984687855794127
sin 97 -0.27176062641094245
cos 97 -0.9623648798313102
sin 98 -0.3664791292519284
cos 98 -0.9304262721047533
sin 99 -0.45753589377532133
cos 99 -0.8891911526253609
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<link href="http://nvd3.org/src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
</style>
</head>
<body>
<h2>Line Char</h2>
<svg id="line-chart"></svg>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<script>
// Helpers ##########
var cIndex = 0;
var getColor = function () {
return d3.scale.category10().range()[cIndex++%10];
};
// GENERAL ##########
var parseCSV = function (data) {
var lines = data.split("\n");
var columns = lines.shift().split(',');
return lines.map(function (line) {
var fields = line.split(',');
var result = {};
for (var i=0; i < fields.length; i++) {
result[columns[i]] = fields[i];
}
});
};
// SPECIFIC ########
var groupData = function (objects) {
var grouped = {};
for (var i=0; i < objects.length; i++) {
var item = objects[i];
if (!grouped[item.label]) {
grouped[item.label] = []
}
grouped[item.label].push({x: i, y:parseFloat(item.value)});
};
return Object.keys(grouped).map(function (label) {
return {
values: grouped[label],
key: label,
color: getColor()
};
});
};
// DATA ##########
var xLabel = 'Sample';
var yLabel = 'Value';
d3.csv("data.csv", function (error, data) {
var graphData = groupData(data);
nv.addGraph(function () {
var chart = nv.models.lineChart();
chart.xAxis
.axisLabel(xLabel)
.tickFormat(d3.format(',r'));
chart.yAxis
.axisLabel(yLabel)
.tickFormat(d3.format('.02f'));
d3.select('#line-chart')
.datum(graphData)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(function() { d3.select('#line-chart').call(chart) });
return chart;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment