rrag/.block

## .block
license: MIT
height: 420

## README.md

      
    Raw
  

              README.md
            
          
    TEST

  
## BubbleChart.jsx
"use strict";


var { ChartCanvas, Chart, series, coordinates, axes, helper } = ReStock;

var { ScatterSeries, CircleMarker } = series;

var { CrossHairCursor, MouseCoordinateX, MouseCoordinateY } = coordinates;

var { XAxis, YAxis } = axes;
var { fitWidth, TypeChooser } = helper;

class BubbleChart extends React.Component {
	render() {
		var { data: unsortedData, type, width, ratio } = this.props;

		var data = unsortedData.slice().sort((a, b) => a.income - b.income);
		var r = d3.scaleLinear()
			.range([2, 20])
			.domain(d3.extent(data, d => d.population));

		var f = d3.scaleOrdinal(d3.schemeCategory10)
			.domain(d3.set(data.map(d => d.region)));

		var fill = d => f(d.region);
		var radius = d => r(d.population);
		return (
			<ChartCanvas ratio={ratio} width={width} height={400}
					margin={{ left: 70, right: 70, top: 20, bottom: 30 }} type={type}
					seriesName="Wealth & Health of Nations"
					data={data}
					xAccessor={d => d.income} xScale={d3.scaleLog()}
					padding={{ left: 20, right: 20 }}
					>
				<Chart id={1}
						yExtents={d => d.lifeExpectancy}
						yMousePointerRectWidth={45}
						padding={{ top: 20, bottom: 20 }}>
					<XAxis axisAt="bottom" orient="bottom" ticks={2} tickFormat={d3.format(",d")}/>
					<YAxis axisAt="left" orient="left" />
					<ScatterSeries yAccessor={d => d.lifeExpectancy} marker={CircleMarker}
						fill={fill}
						markerProps={{ r: radius, fill: fill }} />

					<MouseCoordinateX snapX={false}
						at="bottom"
						orient="bottom"
						rectWidth={50}
						displayFormat={d3.format(".0f")} />
					<MouseCoordinateY
						at="left"
						orient="left"
						displayFormat={d3.format(".2f")} />
				</Chart>
				<CrossHairCursor snapX={false} />
			</ChartCanvas>

		);
	}
}

BubbleChart.propTypes = {
	data: React.PropTypes.array.isRequired,
	width: React.PropTypes.number.isRequired,
	ratio: React.PropTypes.number.isRequired,
	type: React.PropTypes.oneOf(["svg", "hybrid"]).isRequired,
};

BubbleChart.defaultProps = {
	type: "svg",
};
BubbleChart = fitWidth(BubbleChart);


d3["json"]("//rrag.github.io/react-stockcharts/data/bubble.json", (err, data) => {
	ReactDOM.render(<TypeChooser type="hybrid">{type => <BubbleChart data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
});

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Stockcharts - BubbleChart Example</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

    <!-- <script type="text/javascript" src="//unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js"></script> -->
    <script type="text/javascript" src="//rrag.github.io/react-stockcharts/dist/react-stockcharts.min.js"></script>
  </head>
  <body>
    <span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
    <div id="chart">
    </div>
    <script>
      // Use babel transform so the examples work on the browser
      d3.request("./BubbleChart.jsx")
        .get(function(err, data) {
          var outputEl = document.getElementById('chart');
          try {
            var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
            eval(output);
          } catch (ex) {
            outputEl.innerHTML = 'ERROR: ' + ex.message;
          }
        })
    </script>
  </body>
</html>
	"use strict";



	var { ChartCanvas, Chart, series, coordinates, axes, helper } = ReStock;

	var { ScatterSeries, CircleMarker } = series;

	var { CrossHairCursor, MouseCoordinateX, MouseCoordinateY } = coordinates;

	var { XAxis, YAxis } = axes;
	var { fitWidth, TypeChooser } = helper;

	class BubbleChart extends React.Component {
	render() {
	var { data: unsortedData, type, width, ratio } = this.props;

	var data = unsortedData.slice().sort((a, b) => a.income - b.income);
	var r = d3.scaleLinear()
	.range([2, 20])
	.domain(d3.extent(data, d => d.population));

	var f = d3.scaleOrdinal(d3.schemeCategory10)
	.domain(d3.set(data.map(d => d.region)));

	var fill = d => f(d.region);
	var radius = d => r(d.population);
	return (
	<ChartCanvas ratio={ratio} width={width} height={400}
	margin={{ left: 70, right: 70, top: 20, bottom: 30 }} type={type}
	seriesName="Wealth & Health of Nations"
	data={data}
	xAccessor={d => d.income} xScale={d3.scaleLog()}
	padding={{ left: 20, right: 20 }}
	>
	<Chart id={1}
	yExtents={d => d.lifeExpectancy}
	yMousePointerRectWidth={45}
	padding={{ top: 20, bottom: 20 }}>
	<XAxis axisAt="bottom" orient="bottom" ticks={2} tickFormat={d3.format(",d")}/>
	<YAxis axisAt="left" orient="left" />
	<ScatterSeries yAccessor={d => d.lifeExpectancy} marker={CircleMarker}
	fill={fill}
	markerProps={{ r: radius, fill: fill }} />

	<MouseCoordinateX snapX={false}
	at="bottom"
	orient="bottom"
	rectWidth={50}
	displayFormat={d3.format(".0f")} />
	<MouseCoordinateY
	at="left"
	orient="left"
	displayFormat={d3.format(".2f")} />
	</Chart>
	<CrossHairCursor snapX={false} />
	</ChartCanvas>

	);
	}
	}

	BubbleChart.propTypes = {
	data: React.PropTypes.array.isRequired,
	width: React.PropTypes.number.isRequired,
	ratio: React.PropTypes.number.isRequired,
	type: React.PropTypes.oneOf(["svg", "hybrid"]).isRequired,
	};

	BubbleChart.defaultProps = {
	type: "svg",
	};
	BubbleChart = fitWidth(BubbleChart);


	d3["json"]("//rrag.github.io/react-stockcharts/data/bubble.json", (err, data) => {
	ReactDOM.render(<TypeChooser type="hybrid">{type => <BubbleChart data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React Stockcharts - BubbleChart Example</title>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

	<!-- <script type="text/javascript" src="//unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js"></script> -->
	<script type="text/javascript" src="//rrag.github.io/react-stockcharts/dist/react-stockcharts.min.js"></script>
	</head>
	<body>
	<span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
	<div id="chart">
	</div>
	<script>
	// Use babel transform so the examples work on the browser
	d3.request("./BubbleChart.jsx")
	.get(function(err, data) {
	var outputEl = document.getElementById('chart');
	try {
	var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
	eval(output);
	} catch (ex) {
	outputEl.innerHTML = 'ERROR: ' + ex.message;
	}
	})
	</script>
	</body>
	</html>