Skip to content

Instantly share code, notes, and snippets.

@danielristic

danielristic/data.json

Last active December 18, 2015 02:59
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 danielristic/5715490 to your computer and use it in GitHub Desktop.
Save danielristic/5715490 to your computer and use it in GitHub Desktop.
Download ZIP
A simple line chart using d3.js with some mouse interactions
Raw
data.json
[{"outcome_id":22,"history":[{"time":"2013-05-06T16:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-07T00:38:55+03:00","balance_of_power":0.2222222222222222},{"time":"2013-05-07T08:38:55+03:00","balance_of_power":0.36363636363636365},{"time":"2013-05-07T16:38:55+03:00","balance_of_power":0.2857142857142857},{"time":"2013-05-08T00:38:55+03:00","balance_of_power":0.4117647058823529},{"time":"2013-05-08T08:38:55+03:00","balance_of_power":0.47368421052631576},{"time":"2013-05-08T16:38:55+03:00","balance_of_power":0.45},{"time":"2013-05-09T00:38:55+03:00","balance_of_power":0.42857142857142855},{"time":"2013-05-09T08:38:55+03:00","balance_of_power":0.391304347826087},{"time":"2013-05-09T16:38:55+03:00","balance_of_power":0.44},{"time":"2013-05-10T00:38:55+03:00","balance_of_power":0.39285714285714285},{"time":"2013-05-10T08:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-10T16:38:55+03:00","balance_of_power":0.3235294117647059},{"time":"2013-05-11T00:38:55+03:00","balance_of_power":0.3142857142857143},{"time":"2013-05-11T08:38:55+03:00","balance_of_power":0.2972972972972973},{"time":"2013-05-11T16:38:55+03:00","balance_of_power":0.35},{"time":"2013-05-12T00:38:55+03:00","balance_of_power":0.38095238095238093},{"time":"2013-05-12T08:38:55+03:00","balance_of_power":0.35555555555555557},{"time":"2013-05-12T16:38:55+03:00","balance_of_power":0.3404255319148936},{"time":"2013-05-13T00:38:55+03:00","balance_of_power":0.38},{"time":"2013-05-13T08:38:55+03:00","balance_of_power":0.36538461538461536},{"time":"2013-05-13T16:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-14T00:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-14T08:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-14T16:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-15T00:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-15T08:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-15T16:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-16T00:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-16T08:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-16T16:38:55+03:00","balance_of_power":0.3584905660377358},{"time":"2013-05-17T00:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-17T08:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-17T16:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-18T00:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-18T08:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-18T16:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-19T00:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-19T08:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-19T16:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-20T00:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-20T08:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-20T16:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-21T00:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-21T08:38:55+03:00","balance_of_power":0.3064516129032258},{"time":"2013-05-21T16:38:55+03:00","balance_of_power":0.40425531914893614},{"time":"2013-05-22T00:38:55+03:00","balance_of_power":0.40425531914893614},{"time":"2013-05-22T08:38:55+03:00","balance_of_power":0.40425531914893614},{"time":"2013-05-22T16:38:55+03:00","balance_of_power":0.40425531914893614},{"time":"2013-05-23T00:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-23T08:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-23T16:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-24T00:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-24T08:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-24T16:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-25T00:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-25T08:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-25T16:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-26T00:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-26T08:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-26T16:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-27T00:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-27T08:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-27T16:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-28T00:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-28T08:38:55+03:00","balance_of_power":0.3958333333333333},{"time":"2013-05-28T16:38:55+03:00","balance_of_power":0.3958333333333333}],"winner":true,"name":"Pauline"},{"outcome_id":23,"history":[{"time":"2013-05-06T16:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-07T00:38:55+03:00","balance_of_power":0.1111111111111111},{"time":"2013-05-07T08:38:55+03:00","balance_of_power":0.09090909090909091},{"time":"2013-05-07T16:38:55+03:00","balance_of_power":0.2857142857142857},{"time":"2013-05-08T00:38:55+03:00","balance_of_power":0.23529411764705882},{"time":"2013-05-08T08:38:55+03:00","balance_of_power":0.21052631578947367},{"time":"2013-05-08T16:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-09T00:38:55+03:00","balance_of_power":0.19047619047619047},{"time":"2013-05-09T08:38:55+03:00","balance_of_power":0.17391304347826086},{"time":"2013-05-09T16:38:55+03:00","balance_of_power":0.16},{"time":"2013-05-10T00:38:55+03:00","balance_of_power":0.14285714285714285},{"time":"2013-05-10T08:38:55+03:00","balance_of_power":0.12903225806451613},{"time":"2013-05-10T16:38:55+03:00","balance_of_power":0.11764705882352941},{"time":"2013-05-11T00:38:55+03:00","balance_of_power":0.11428571428571428},{"time":"2013-05-11T08:38:55+03:00","balance_of_power":0.10810810810810811},{"time":"2013-05-11T16:38:55+03:00","balance_of_power":0.1},{"time":"2013-05-12T00:38:55+03:00","balance_of_power":0.09523809523809523},{"time":"2013-05-12T08:38:55+03:00","balance_of_power":0.08888888888888889},{"time":"2013-05-12T16:38:55+03:00","balance_of_power":0.0851063829787234},{"time":"2013-05-13T00:38:55+03:00","balance_of_power":0.08},{"time":"2013-05-13T08:38:55+03:00","balance_of_power":0.07692307692307693},{"time":"2013-05-13T16:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-14T00:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-14T08:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-14T16:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-15T00:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-15T08:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-15T16:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-16T00:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-16T08:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-16T16:38:55+03:00","balance_of_power":0.07547169811320754},{"time":"2013-05-17T00:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-17T08:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-17T16:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-18T00:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-18T08:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-18T16:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-19T00:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-19T08:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-19T16:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-20T00:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-20T08:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-20T16:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-21T00:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-21T08:38:55+03:00","balance_of_power":0.06451612903225806},{"time":"2013-05-21T16:38:55+03:00","balance_of_power":0.0851063829787234},{"time":"2013-05-22T00:38:55+03:00","balance_of_power":0.0851063829787234},{"time":"2013-05-22T08:38:55+03:00","balance_of_power":0.0851063829787234},{"time":"2013-05-22T16:38:55+03:00","balance_of_power":0.0851063829787234},{"time":"2013-05-23T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-23T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-23T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-24T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-24T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-24T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-25T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-25T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-25T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-26T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-26T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-26T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-27T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-27T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-27T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-28T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-28T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-28T16:38:55+03:00","balance_of_power":0.10416666666666667}],"winner":false,"name":"Romain"},{"outcome_id":24,"history":[{"time":"2013-05-06T16:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-07T00:38:55+03:00","balance_of_power":0.1111111111111111},{"time":"2013-05-07T08:38:55+03:00","balance_of_power":0.09090909090909091},{"time":"2013-05-07T16:38:55+03:00","balance_of_power":0.07142857142857142},{"time":"2013-05-08T00:38:55+03:00","balance_of_power":0.058823529411764705},{"time":"2013-05-08T08:38:55+03:00","balance_of_power":0.05263157894736842},{"time":"2013-05-08T16:38:55+03:00","balance_of_power":0.05},{"time":"2013-05-09T00:38:55+03:00","balance_of_power":0.047619047619047616},{"time":"2013-05-09T08:38:55+03:00","balance_of_power":0.043478260869565216},{"time":"2013-05-09T16:38:55+03:00","balance_of_power":0.04},{"time":"2013-05-10T00:38:55+03:00","balance_of_power":0.14285714285714285},{"time":"2013-05-10T08:38:55+03:00","balance_of_power":0.22580645161290322},{"time":"2013-05-10T16:38:55+03:00","balance_of_power":0.20588235294117646},{"time":"2013-05-11T00:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-11T08:38:55+03:00","balance_of_power":0.1891891891891892},{"time":"2013-05-11T16:38:55+03:00","balance_of_power":0.175},{"time":"2013-05-12T00:38:55+03:00","balance_of_power":0.16666666666666666},{"time":"2013-05-12T08:38:55+03:00","balance_of_power":0.15555555555555556},{"time":"2013-05-12T16:38:55+03:00","balance_of_power":0.19148936170212766},{"time":"2013-05-13T00:38:55+03:00","balance_of_power":0.18},{"time":"2013-05-13T08:38:55+03:00","balance_of_power":0.21153846153846154},{"time":"2013-05-13T16:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-14T00:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-14T08:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-14T16:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-15T00:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-15T08:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-15T16:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-16T00:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-16T08:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-16T16:38:55+03:00","balance_of_power":0.22641509433962265},{"time":"2013-05-17T00:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-17T08:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-17T16:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-18T00:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-18T08:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-18T16:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-19T00:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-19T08:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-19T16:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-20T00:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-20T08:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-20T16:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-21T00:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-21T08:38:55+03:00","balance_of_power":0.1935483870967742},{"time":"2013-05-21T16:38:55+03:00","balance_of_power":0.2553191489361702},{"time":"2013-05-22T00:38:55+03:00","balance_of_power":0.2553191489361702},{"time":"2013-05-22T08:38:55+03:00","balance_of_power":0.2553191489361702},{"time":"2013-05-22T16:38:55+03:00","balance_of_power":0.2553191489361702},{"time":"2013-05-23T00:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-23T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-23T16:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-24T00:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-24T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-24T16:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-25T00:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-25T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-25T16:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-26T00:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-26T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-26T16:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-27T00:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-27T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-27T16:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-28T00:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-28T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-28T16:38:55+03:00","balance_of_power":0.25}],"winner":false,"name":"Tad"},{"outcome_id":25,"history":[{"time":"2013-05-06T16:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-07T00:38:55+03:00","balance_of_power":0.1111111111111111},{"time":"2013-05-07T08:38:55+03:00","balance_of_power":0.09090909090909091},{"time":"2013-05-07T16:38:55+03:00","balance_of_power":0.07142857142857142},{"time":"2013-05-08T00:38:55+03:00","balance_of_power":0.058823529411764705},{"time":"2013-05-08T08:38:55+03:00","balance_of_power":0.05263157894736842},{"time":"2013-05-08T16:38:55+03:00","balance_of_power":0.05},{"time":"2013-05-09T00:38:55+03:00","balance_of_power":0.047619047619047616},{"time":"2013-05-09T08:38:55+03:00","balance_of_power":0.043478260869565216},{"time":"2013-05-09T16:38:55+03:00","balance_of_power":0.04},{"time":"2013-05-10T00:38:55+03:00","balance_of_power":0.03571428571428571},{"time":"2013-05-10T08:38:55+03:00","balance_of_power":0.03225806451612903},{"time":"2013-05-10T16:38:55+03:00","balance_of_power":0.029411764705882353},{"time":"2013-05-11T00:38:55+03:00","balance_of_power":0.05714285714285714},{"time":"2013-05-11T08:38:55+03:00","balance_of_power":0.05405405405405406},{"time":"2013-05-11T16:38:55+03:00","balance_of_power":0.05},{"time":"2013-05-12T00:38:55+03:00","balance_of_power":0.047619047619047616},{"time":"2013-05-12T08:38:55+03:00","balance_of_power":0.1111111111111111},{"time":"2013-05-12T16:38:55+03:00","balance_of_power":0.10638297872340426},{"time":"2013-05-13T00:38:55+03:00","balance_of_power":0.1},{"time":"2013-05-13T08:38:55+03:00","balance_of_power":0.09615384615384616},{"time":"2013-05-13T16:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-14T00:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-14T08:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-14T16:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-15T00:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-15T08:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-15T16:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-16T00:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-16T08:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-16T16:38:55+03:00","balance_of_power":0.09433962264150944},{"time":"2013-05-17T00:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-17T08:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-17T16:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-18T00:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-18T08:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-18T16:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-19T00:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-19T08:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-19T16:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-20T00:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-20T08:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-20T16:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-21T00:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-21T08:38:55+03:00","balance_of_power":0.08064516129032258},{"time":"2013-05-21T16:38:55+03:00","balance_of_power":0.10638297872340426},{"time":"2013-05-22T00:38:55+03:00","balance_of_power":0.10638297872340426},{"time":"2013-05-22T08:38:55+03:00","balance_of_power":0.10638297872340426},{"time":"2013-05-22T16:38:55+03:00","balance_of_power":0.10638297872340426},{"time":"2013-05-23T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-23T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-23T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-24T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-24T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-24T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-25T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-25T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-25T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-26T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-26T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-26T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-27T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-27T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-27T16:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-28T00:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-28T08:38:55+03:00","balance_of_power":0.10416666666666667},{"time":"2013-05-28T16:38:55+03:00","balance_of_power":0.10416666666666667}],"winner":false,"name":"Zayra"},{"outcome_id":26,"history":[{"time":"2013-05-06T16:38:55+03:00","balance_of_power":0.2},{"time":"2013-05-07T00:38:55+03:00","balance_of_power":0.4444444444444444},{"time":"2013-05-07T08:38:55+03:00","balance_of_power":0.36363636363636365},{"time":"2013-05-07T16:38:55+03:00","balance_of_power":0.2857142857142857},{"time":"2013-05-08T00:38:55+03:00","balance_of_power":0.23529411764705882},{"time":"2013-05-08T08:38:55+03:00","balance_of_power":0.21052631578947367},{"time":"2013-05-08T16:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-09T00:38:55+03:00","balance_of_power":0.2857142857142857},{"time":"2013-05-09T08:38:55+03:00","balance_of_power":0.34782608695652173},{"time":"2013-05-09T16:38:55+03:00","balance_of_power":0.32},{"time":"2013-05-10T00:38:55+03:00","balance_of_power":0.2857142857142857},{"time":"2013-05-10T08:38:55+03:00","balance_of_power":0.25806451612903225},{"time":"2013-05-10T16:38:55+03:00","balance_of_power":0.3235294117647059},{"time":"2013-05-11T00:38:55+03:00","balance_of_power":0.3142857142857143},{"time":"2013-05-11T08:38:55+03:00","balance_of_power":0.35135135135135137},{"time":"2013-05-11T16:38:55+03:00","balance_of_power":0.325},{"time":"2013-05-12T00:38:55+03:00","balance_of_power":0.30952380952380953},{"time":"2013-05-12T08:38:55+03:00","balance_of_power":0.28888888888888886},{"time":"2013-05-12T16:38:55+03:00","balance_of_power":0.2765957446808511},{"time":"2013-05-13T00:38:55+03:00","balance_of_power":0.26},{"time":"2013-05-13T08:38:55+03:00","balance_of_power":0.25},{"time":"2013-05-13T16:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-14T00:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-14T08:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-14T16:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-15T00:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-15T08:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-15T16:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-16T00:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-16T08:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-16T16:38:55+03:00","balance_of_power":0.24528301886792453},{"time":"2013-05-17T00:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-17T08:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-17T16:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-18T00:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-18T08:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-18T16:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-19T00:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-19T08:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-19T16:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-20T00:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-20T08:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-20T16:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-21T00:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-21T08:38:55+03:00","balance_of_power":0.3548387096774194},{"time":"2013-05-21T16:38:55+03:00","balance_of_power":0.14893617021276595},{"time":"2013-05-22T00:38:55+03:00","balance_of_power":0.14893617021276595},{"time":"2013-05-22T08:38:55+03:00","balance_of_power":0.14893617021276595},{"time":"2013-05-22T16:38:55+03:00","balance_of_power":0.14893617021276595},{"time":"2013-05-23T00:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-23T08:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-23T16:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-24T00:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-24T08:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-24T16:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-25T00:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-25T08:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-25T16:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-26T00:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-26T08:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-26T16:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-27T00:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-27T08:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-27T16:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-28T00:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-28T08:38:55+03:00","balance_of_power":0.14583333333333334},{"time":"2013-05-28T16:38:55+03:00","balance_of_power":0.14583333333333334}],"winner":false,"name":"Manika"}]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#line-chart {
width: 700px;
height: 120px;
}
.line {
opacity: 0.3;
stroke-width: 3px;
fill: none;
stroke: steelblue;
}
.winner.line {
opacity: 1;
}
.current.line {
opacity: 1;
}
.dot {
pointer-events: all;
}
#donut-chart svg {
padding: 2px;
}
.arc {
opacity: 0.3;
}
.winner.arc {
opacity: 1;
}
.current.arc {
opacity: 1;
}
#line-chart, #donut-chart {
display: inline-block;
vertical-align: top;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="line-chart"></div>
<div id="donut-chart"></div>
<script>
//// Helper Methods
function last_array_elt(a) {
return a[a.length - 1];
}
function latest_balance(outcome) {
return last_array_elt(outcome.history).balance_of_power;
}
function valueInPercent(value) {
return d3.round(value*100)+"%";
}
function appendTooltip(selection, accessor) {
selection
.classed("has-tip tip-right", true)
.attr("title", accessor)
.attr("data-tooltip", "");
}
function onmouseoverline(d, i) {
d3.select(this)
.classed("current", true);
d3.selectAll(".arc[data-outcome-id='"+d.outcome_id+"']")
.classed("current", true);
}
function onmouseoverdonut(d, i) {
d3.select(this)
.classed("current", true);
d3.selectAll(".line[data-outcome-id='"+d.data.outcome_id+"']")
.classed("current", true);
}
function onmouseout(d, i) {
d3.selectAll(".line")
.classed("current", false);
d3.selectAll(".arc")
.classed("current", false);
}
var color = d3.scale.category20();
var margin = {top: 2, right: 0, bottom: 5, left: 0},
width = 700 - margin.left - margin.right,
height = 120 - margin.top - margin.bottom;
var formatDate = d3.time.format.iso;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.time); })
.y(function(d) { return y(+d.balance_of_power); });
var svg = d3.select("#line-chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(data) {
var outcomes_list = data.map(function(d) { return d.outcome_id; });
color.domain(outcomes_list);
// Parse times
data.forEach(function(d) {
d.history.forEach(function(h) {
h.time = formatDate.parse(h.time);
});
});
var all_times = data.map(function(d) {return d.history.map(function (h) {return h.time})}).reduce(function(a,b) {return a.concat(b)});
var all_balances = data.map(function(d) {return d.history.map(function (h) {return h.balance_of_power})}).reduce(function(a,b) {return a.concat(b)});
x.domain(d3.extent(all_times));
y.domain(d3.extent(all_balances));
var outcome_g = svg.selectAll(".outcome_g")
.data(data)
.enter().append("g")
.attr("class", "outcome_g");
var outcome_line = outcome_g.append("path")
.attr("class", "line")
.attr("data-outcome-id", function(d) { return d.outcome_id; })
.attr("d", function(d) { return line(d.history)})
.style("stroke", function(d) { return color(d.outcome_id) });
// Adding invisible dots
// var outcome_dots = outcome_g.selectAll(".dot")
// .data(function(d) { return d.history; })
// .enter().append("svg:circle")
// .attr("class", "dot")
// .attr("cx", function(d) { return x(d.time); })
// .attr("cy", function(d) { return y(+d.balance_of_power); })
// .attr("r", 5)
// .attr("opacity", 0)
// .append("svg:title").text(function(d) {return "Time: " + d.time + "\nValue: " + valueInPercent(d.balance_of_power);});
// Tooltips
appendTooltip(outcome_line, function(d) { return d.name; });
// Highlight the winner
outcome_line
.classed("winner", function(d) { return d.winner; });
// Mouseover stuff for line chart
outcome_line
.on("mouseover", onmouseoverline)
.on("mouseout", onmouseout);
// Draw the Donut chart
// Adding the last values of balance of power as a key
var final_balances = data.map(function(outcome_object) {
outcome_object["latest_balance"] = latest_balance(outcome_object)
return outcome_object;
});
(function() {
var width = 122,
height = 122,
radius = Math.min(width, height) / 2;
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.value(function(d) { return d.latest_balance; })
.sort(function(a,b) { return d3.descending(a.latest_balance, b.latest_balance) });
var svg = d3.select("#donut-chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(final_balances))
.enter().append("g")
.attr("class", "arc")
.attr("data-outcome-id", function(d) { return d.data.outcome_id; });
// Tooltips
appendTooltip(g, function(d) { return d.data.name+" / "+valueInPercent(d.data.latest_balance); });
g
.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.outcome_id); });
g
.classed("winner", function(d) { return d.data.winner; });
g
.filter(function(d) { return d.data.winner; })
.style("stroke", function(d) { return d3.rgb(color(d.data.outcome_id)).darker(); })
.style("stroke-width", 2);
g
.on("mouseover", onmouseoverdonut)
.on("mouseout", onmouseout);
}).call(this);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment