d3rrc
Version:
Reusable D3 Charts for React.js
64 lines (60 loc) • 2.08 kB
HTML
<meta charset="utf-8">
<html>
<head>
<script type="text/javascript" src="../js/react-with-addons.js"></script>
<script type="text/javascript" src="../../dist/bundle.js"></script>
<script src="../js/JSXTransformer.js"></script>
</head>
<body>
<h1>Time Series 2 Chart</h1>
<div id="output"></div>
<script type="text/jsx">
var TimeSeries2Chart = D3RRC.TimeSeries2Chart;
var data = (function(size){
var data = [];
var i=0, l=size;
var month = 1;
for(; i<l; i++){
var day = Math.floor(Math.random() * (month===2?27:30))+1;
var date = new Date(month+'/'+day+'/2014');
data.push([
date,
(Math.random() * 90)+10
]);
month++;
}
return data;
})(12);
var style={
'.area': 'fill: steelblue; clip-path: url(#clip);',
'.axis path': 'fill: none; stroke: #000; shape-rendering: crispEdges;',
'.axis line': 'fill: none; stroke: #000; shape-rendering: crispEdges;',
'.brush .extent': 'stroke: #fff; fill-opacity: .125; shape-rendering: crispEdges;',
};
React.render(
<TimeSeries2Chart
chart-height="400"
chart-style={style}
data={data}
/>,
document.getElementById('output')
);
//SOURCE DUMP
var src = document.querySelector('[type="text/jsx"]').innerText
.split('//SOURCE DUMP').shift();
var pre = document.createElement('pre');
var ws = src.match(/[ \t]+/).shift();
var reWS = new RegExp('^'+ws, 'gm');
var header = document.createElement('h2');
header.innerText = 'Source';
pre.style.padding="10px 10px 10px 10px";
pre.style.margin="0px 0px 0px 0px";
pre.style.background='silver';
pre.style.border='1px solid black';
pre.appendChild(document.createTextNode(src.replace(reWS, '').trim()));
document.body.appendChild(header);
document.body.appendChild(pre);
</script>
</body>
</html>