componentDidMount: function() {
// Apple stock data from Mike Bostock's chart at
// http://bl.ocks.org/mbostock/3883195
var parseDate = d3.time.format("%d-%b-%y").parse;
d3.tsv("data/applestock.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
this.setState({areaData: data});
}.bind(this))
},
const Barchart = D3blackbox(function () {
var svg = d3.select(this.anchor.current),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +this.props.width - margin.left - margin.right,
height = +this.props.height - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("https://swizec.github.io/dl/barchart.tsv", function(d) {
d.frequency = +d.frequency;
return d;
}).then(
function(data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("y", function(d) { return y(d.frequency); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.frequency); });
});
})
d3.tsv("data/MSFT.tsv", (err, MSFT) => {
d3.tsv("data/MSFT_full.tsv", (err2, MSFTFull) => {
renderPage(MSFT, MSFTFull);
// renderPartialPage(MSFT, MSFTFull);
});
})
const createLineChart = data => {
const node = document.createElement('div');
const margin = data.margins,
width = data.width - margin.left - margin.right,
height = data.height - margin.top - margin.bottom;
const formatDate = d3.time.format("%d-%b-%y");
const x = d3.time.scale()
.range([0, width]);
const y = d3.scale.linear()
.range([height, 0]);
const xAxis = d3.svg.axis()
.scale(x)
.orient(data.orientXTicks);
const yAxis = d3.svg.axis()
.scale(y)
.orient(data.orientYTicks);
const line = d3.svg.line()
.x(d => x(d.time))
.y(d => y(d.value));
const svg = d3.select(node).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 + ")");
data.dataset.map(el => {
if (typeof el.time === 'string') {
el.time = formatDate.parse(el.time);
el.value = +el.value;
}
});
const lineChartParse = data => {
data.time = formatDate.parse(data.time);
data.value = +data.value;
return data;
}
const setLineChartData = (error, dataset) => {
if (error) throw error;
x.domain(d3.extent(dataset, d => d.time));
y.domain(d3.extent(dataset, d => d.value));
svg.append("g")
.attr("class", data.XAxisClasses)
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", data.YAxisClasses)
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(data.YAxisLabel);
svg.append("path")
.datum(dataset)
.attr("class", data.lineClass)
.attr("d", line);
return node;
}
return data.tsvFileName !== ''
? d3.tsv(data.tsvFileName, lineChartParse, setLineChartData)
: data.csvFileName !== ''
? d3.csv(data.csvFileName, lineChartParse, setLineChartData)
: setLineChartData(false, data.dataset, data);
}
'use strict';
/**/
var React = require('react');
var d3 = require('d3');
require('styles/react-stockcharts');
require('stylesheets/re-stock');
var ReadME = require('md/MAIN.md');
document.getElementById("content").innerHTML = ReadME;
var parseDate = d3.time.format("%Y-%m-%d").parse
d3.tsv("data/MSFT.tsv", function(err, data) {
data.forEach((d, i) => {
d.date = new Date(parseDate(d.date).getTime());
d.open = +d.open;
d.high = +d.high;
d.low = +d.low;
d.close = +d.close;
d.volume = +d.volume;
// console.log(d);
});
var CandleStickChartWithEdge = require('lib/charts/CandleStickChartWithEdge');
React.render(<CandleStickChartWithEdge data={data} />, document.getElementById("chart"));
});
//require('./examples/freezer-example');
return create(
/* jshint ignore:start */
<svg width={width + margin.left + margin.right} height={height + margin.top + margin.bottom}>
<g transform={'translate(' + margin.left + ',' + margin.top + ')'}>
<g class="x axis" transform={'translate(0,' + height + ')'}>
{axis(x, {orient: 'bottom'})}
</g>
<g class="y axis">
{axis(y, {orient: 'left'})}
<text transform="rotate(-90)" y="6" dy=".71em" text-anchor="end">
Temperature (ºF)
</text>
</g>
<path class="area" d={area(data)}></path>
</g>
</svg>
/* jshint ignore:end */
);
}
d3.tsv('data.tsv', function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.low = +d.low;
d.high = +d.high;
});
document.body.appendChild(chart(data));
});
d3.tsv(map_count, type, function(error, data) {
// Only pick those maps which are of a certain popularity
data = data.filter(function(d) { return (d.Count > 15000) });
x.domain(data.map(function(d) { return d.Map; }));
y.domain([0, d3.max(data, function(d) { return (d.Count / 1000); })]);
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-.8em')
.attr('dy', '.15em')
.attr('transform', function(d) {
return 'rotate(-65)';
});
chart.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Kilomatches');
chart.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', function(d) { return x(d.Map); })
.attr('y', function(d) { return y(d.Count / 1000); })
.attr('height', function(d) { return height - y(d.Count / 1000); })
.attr('width', x.rangeBand());
});
d3.tsv("data/data.tsv", function(err, data) {
data.forEach((d, i) => {
d.date = new Date(parseDate(d.date).getTime());
d.open = +d.open;
d.high = +d.high;
d.low = +d.low;
d.close = +d.close;
d.volume = +d.volume;
// console.log(d);
});
/**/
var AreaChart = require('./lib/examples/areachart').init(data);
var AreaChartWithCrossHairMousePointer = require('./lib/examples/areachart-with-crosshair-mousepointer').init(data);
var AreaChartWithVerticalMousePointer = require('./lib/examples/areachart-with-mousepointer').init(data);
var AreaChartWithToolTip = require('./lib/examples/areachart-with-tooltip').init(data);
var AreaChartWithMA = require('./lib/examples/areachart-with-ma').init(data);
var AreaChartWithEdgeCoordinates = require('./lib/examples/areachart-with-edge-coordinates').init(data);
var LineChart = require('./lib/examples/linechart').init(data);
var CandleStickChart = require('./lib/examples/candlestickchart').init(data);
var SyncMouseMove = require('./lib/examples/synchronized-mouse-move').init(data);
var AreaChartWithZoom = require('./lib/examples/areachart-with-zoom').init(data);
var AreaChartWithZoomPan = require('./lib/examples/areachart-with-zoom-and-pan').init(data);
/**/
/**/
React.render(<AreaChart />, document.getElementById("area"));
React.render(<AreaChartWithCrossHairMousePointer />, document.getElementById("area2"));
React.render(<AreaChartWithVerticalMousePointer />, document.getElementById("area3"));
React.render(<AreaChartWithToolTip />, document.getElementById("area4"));
React.render(<AreaChartWithMA />, document.getElementById("area5"));
React.render(<AreaChartWithEdgeCoordinates />, document.getElementById("area6"));
React.render(<LineChart />, document.getElementById("line"));
React.render(<CandleStickChart />, document.getElementById("candlestick"));
React.render(<SyncMouseMove />, document.getElementById("sync"));
React.render(<AreaChartWithZoom />, document.getElementById("areazoom"));
React.render(<AreaChartWithZoomPan />, document.getElementById("areazoompan"));
/**/
/**/
});
d3.tsv('data.tsv', type, (e, data) => {
x.domain(data.map(d => d.name))
y.domain([0, d3.max(data, d => d.value)])
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
chart.append('g')
.attr('class', 'y axis')
.call(yAxis)
chart.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', d => x(d.name))
.attr('y', d => y(d.value))
.attr('height', d => height - y(d.value))
.attr('width', x.rangeBand())
chart.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Frequency')
})