Look at all the details and how they work
- It has an x axis
- It has a y axis
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 |
<!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 = 'Iteration'; | |
var yLabel = 'Function 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> |