Open
Description
Hi folks I wanted to share how you can go through your getting started using JSPM. Benefits include no manual config file and es6 out of the box.
Use the same data source.
Installation of jspm & dependencies:
npm init -y
npm install -D jspm
jspm init -y
jspm install react@0.14.8 react-dom@0.14.8 npm:react-d3-core npm:react-d3-basic json
HTML file: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React D3 getting started</title>
<script src="jspm_packages/system.js" charset="utf-8"></script>
<script src="config.js" charset="utf-8"></script>
<script type="text/javascript">
System.import('./main.js');
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>Javascript file: main.js
import chartData from './user_sample.json!';
import React from 'react';
import ReactDOM from 'react-dom';
import { LineChart } from 'react-d3-basic';
// loading chart data from json file using json-plugin
import chartData from './user_sample.json!';
const width = 700;
const height = 300;
const margins = { left: 100, right: 100, top: 50, bottom: 50 };
const title = 'User sample';
// chart series,
// field: is what field your data want to be selected
// name: the name of the field that display in legend
// color: what color is the line
const chartSeries = [
{
field: 'BMI',
name: 'BMI',
color: '#ff7f0e'
}
];
// your x accessor
const x = (d) => d.index;
// Leaving out the Chart from the regular getting started because it didn't
// nest the LineChart inside it properly and it didn't seem to be necessary.
ReactDOM.render(
<LineChart
margins={margins}
title={title}
data={chartData}
width={width}
height={height}
chartSeries={chartSeries}
x={x}
/>
, document.getElementById('chart')
);Now you can serve the folder in a web server and visit this index.html in a browser.
You can also easily create a useful npm start with a webserver and hot reloading by:
npm install -D serve chokidar-socket-emitter
Alter index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React D3 getting started</title>
<script src="../../jspm_packages/system.js" charset="utf-8"></script>
<script src="../../config.js" charset="utf-8"></script>
<script type="text/javascript">
System.trace = true;
System.import('systemjs-hot-reloader/default-listener.js');
System.import('./index.js');
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Add npm script:
"scripts": {
"start": "serve & chokidar-socket-emitter"
},Now you can run npm start and visit localhost:3000
Metadata
Metadata
Assignees
Labels
No labels