JSFiddle - React, Tailwind, and code Playground

by Atsushi Hondoh

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>

CSS

body {
	margin : 0px;
}

/** 軸 */
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 8px;
}

/** 目盛線 */
.axis .major line {
    fill: none;
    stroke: cyan;
    stroke-dasharray: 5,5;
    shape-rendering: crispEdges;
}

/** tick **/
.axis .major text {
    font-family: sans-serif;
    font-size: 12px;
    stroke: yellowgreen;
}

/** 補助目盛線 */
.axis .minor {
    fill: none;
    stroke: cyan;
    stroke-dasharray: 5,10;
    shape-rendering: crispEdges;
}

JavaScript

var stockValues = [
{ market : "Nikkei 225", color : 'cyan', dataset : [
    {"date":new Date('Sep 14,2015').getTime(),"value":18070},
    {"date":new Date('Sep  7,2015').getTime(),"value":18264},
    {"date":new Date('Aug 31,2015').getTime(),"value":17792},
    {"date":new Date('Aug 24,2015').getTime(),"value":19136},
    {"date":new Date('Aug 17,2015').getTime(),"value":19435},
    {"date":new Date('Aug 10,2015').getTime(),"value":20519},
    {"date":new Date('Aug  3,2015').getTime(),"value":20724},
    {"date":new Date('Jul 27,2015').getTime(),"value":20585},
    {"date":new Date('Jul 20,2015').getTime(),"value":20544},
    {"date":new Date('Jul 13,2015').getTime(),"value":20650},
    {"date":new Date('Jul  6,2015').getTime(),"value":19779},
    {"date":new Date('Jun 29,2015').getTime(),"value":20539},
    {"date":new Date('Jun 23,2015').getTime(),"value":20706},
    {"date":new Date('Jun 15,2015').getTime(),"value":20174},
    {"date":new Date('Jun  8,2015').getTime(),"value":20407},
    {"date":new Date('Jun  1,2015').getTime(),"value":20460},
]},
{ market : "N.Y. DOW", color : 'yellow', dataset : [
    {"date":new Date('Sep 14,2015').getTime(),"value":16384},
    {"date":new Date('Sep  7,2015').getTime(),"value":16433},
    {"date":new Date('Aug 31,2015').getTime(),"value":16102},
    {"date":new Date('Aug 24,2015').getTime(),"value":16643},
    {"date":new Date('Aug 17,2015').getTime(),"value":16459},
    {"date":new Date('Aug 10,2015').getTime(),"value":17477},
    {"date":new Date('Aug  3,2015').getTime(),"value":17373},
    {"date":new Date('Jul 27,2015').getTime(),"value":17689},
    {"date":new Date('Jul 20,2015').getTime(),"value":17568},
    {"date":new Date('Jul 13,2015').getTime(),"value":18086},
    {"date":new Date('Jul  6,2015').getTime(),"value":17760},
    {"date":new Date('Jun 29,2015').getTime(),"value":17730},
    {"date":new Date('Jun 23,2015').getTime(),"value":17946},
    {"date":new Date('Jun 15,2015').getTime(),"value":18015},
   ...