Providing developers with a simple way to create live updating visualizations for their streaming data.
See our demo at streamlined3.io!
- Customize colors, fonts, heights, widths, and more.
- A diffing algorithm renders only the data that changes for blazing fast performance.
- Load balancing through Node clusters lets your app scale to multiple streams and visualizations.
- Pre-built, ready to use visualizations including: Bar, Line, Scatter, Pie, Bubble, Word-Cloud, and World Map.
npm install --save streamlined3
- create an index.js file
- create an index.html file
NOTE: This version of our library does not have Node Clusters implemented in case you want to use another approach. If you would like to use the version that uses load balancing through Node clusters on the back end to support scaling and optimal performance, you can find it here.
- In your index.js file require our library:
const streamline = require('streamlined3');
- Create a new instance, passing a callback and a port#:
let myStream = new streamline(sendFiles, port#);
-
Create an array
let myData = []
to hold your data. Call your API to get streaming data and push the results into your myData array. FYI, it is a good idea to buffer this data to not overload your system. -
Look at your API data key/value pairs and find the data values that you want to visualize in your graph. Put them inside a config object. (see Specific Configuration Settings for... below for what type of key/value pairs you'll need for each visualization):
let config = {
width: 500,
height: 500,
xdomain: 10,
ydomain: 10,
xticks: 10,
yticks: 10,
xScale: post
yScale: number-of-likes
xLabel: 'the name of the post',
yLabel: 'how many likes someone got'
};
- Invoke the StreamlineD3
connect
method on the new instance you created in step 2. For names of methods you can call, see Specific Configuration Settings for... below for each type of visualization.
myStream.connect((socket) => {
myStream.line(socket, myData, config);
});
- Choose a graph from the graph folder in this repo and add it to a script tag.
<script src="line.js"></script>
OR...you can use the CDN for any graph other than the world map and/or world-cloud
<script src="http://cdn.jsdelivr.net/gh/StreamlineD3/SD3-Demo@1.4/client/graphs/bundle.min.js"></script>
- Add the necessary dependency libraries (you must use version 4+ of d3 otherwise you will encounter errors):
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<script src="graphs/d3-scale-chromatic.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
- Add a
<div>
node with an id of(see Specific Configuration Settings for... below for what each visualization is called)
where you want your visualization to appear:<div id="Name-Of-Visualization"></div>
And voilĂ ! You now have a working, live-updating visualization.
- Method
myStream.connect((socket) => {
myStream.bar(socket, barData, barConfig);
});
- Config File
let barConfig = {
setWidth: 800,
setHeight: 400,
shiftYAxis: true,
xDomainUpper: 20,
xDomainLower: 0,
yDomainUpper: 50,
yDomainLower: 0,
xTicks: 10,
yTicks: 50,
xScale: 'Borough',
volume: 'Speed',
yLabel_text: 'Miles Per Hour',
label_text_size: 20,
transition_speed: 1000,
color: ['#DAF7A6', '#FFC300', '#FF5733', '#C70039', '#900C3F', '#581845'],
};
- Html
<div id="bar-graph"></div>
- Method
myStream.connect((socket) => {
myStream.line(socket, lineData, lineConfig);
});
- Config File
let lineConfig = {
setWidth: 600,
setHeight: 400,
shiftXAxis: true,
xDomainUpper: 50,
xDomainLower: 0,
yDomainUpper: 40,
yDomainLower: 0,
xTicks: 10,
yTicks: 10,
xScale: 'counter',
yScale: 'num_bikes_available',
xLabel_text: 'at the currently reporting station',
yLabel_text: 'number of available bikes'
};
- Html
<div id="line-chart"></div>
- Method
myStream.connect((socket) => {
myStream.bubbleGraph(socket, bubbleData, bubbleConfig);
});
- Config File
let bubbleConfig = {
setWidth: 600,
setHeight: 400,
text: 'station_id',
volume: 'num_bikes_available',
};
- Html
<div id="bubble-graph"></div>
- Method
myStream.connect((socket) => {
myStream.pie(socket, pieData, pieConfig);
});
- Config File
let pieConfig = {
setWidth: 400,
setHeight: 400,
category: 'genre',//category to be show in pie slices
count: 'count'
};
- Html
<div id="pie-chart"></div>
- Method
myStream.connect((socket) => {
myStream.scatter(socket, scatterData, scatterConfig);
});
- Config File
let scatterConfig = {
setWidth: 600,
setHeight: 400,
//axis
xDomainUpper: 1500,
xDomainLower: 0,
yDomainUpper: 20000,
yDomainLower: 0,
xTicks: 10,
yTicks: 10,
xLabel_text: 'Number of Followers',
yLabel_text: 'Number of Tweets',
label_font_size: 20,
xScale: 'followers_count',
yScale: 'statuses_count',
volume: 'favourites_count',
circle_text: '',
transition_speed: 5000,
};
- Html
<div id="scatter-plot"></div>
- Method
myStream.connect((socket) => {
myStream.map(socket, scatterData, scatterConfig);
});
- Config File
let mapConfig = {
setWidth: 1300,
setHeight: 800,
latitude: 'latitude',
longitude: 'longitude',
mapItem: 'satellite', //the thing being mapped
propTwo: '',
color:'#B0C4DE'
};
- Html
<div id="map"></div>
- Either download map-source.js from this repo and link to it in your html file OR add this script tag:
<script src="https://unpkg.com/topojson-client@3"></script>
- For color, add this script tag:
<script src="graphs/d3-scale-chromatic.min.js"></script>