Dynamic3 is a library built on top of d3.js that makes it simple and easy to build powerful, dynamic, animated graphs that feature real-time data.
Dynamic3 provides all the customization of d3.js without all the complexity.
Make your dynamic graph featuring real-time data in 60 seconds and go back to working on what matters to you instead of spending weeks wading through the nuances of d3.js.
The ever-changing bar graph is a bar graph where the values of categories change over time reflected in the ever-changing lengths of the bars in the graphs.
It's useful for data where values change but the categories of those values always stay the same such as real-time basketball stats for different players in a specific game or the amount of votes for certain political candidates in an election.
This specific graph shows the value of the latest global Bitcoin transaction in various currencies.
The circle graph focuses on a single value that determines the diameter of the circle. For this specific graph, the value is the size of the latest global Bitcoin transaction.
<div id="circle"></div>
<script>
window.onload = function() {
var graph = dynamic3.createGraph('Circle')
.setBackgroundColor('')
.setBorderColor('')
.setBorderWidth()
.setWidth('500px')
.setHeight('500px')
.setDomain([, ])
.setTransitionTime()
.setText(getLabel) //getLabel is a function
.setTextColor();
graph.insertIntoHTMLElement(document.getElementById('circle'));
function loop() {
var newValue = getNextBitcoinTransaction();
graph.update(newValue);
setTimeout(loop, 1000);
}
loop();
}
</script>
The sliding bar graph is a bar graph where the categories of the graph change over time, while the values do not. This specific graph shows the latest global Bitcoin transactions.
<div id="expand-bar"></div>
<script>window.onload = function() {
var slidingBar = dynamic3.createGraph('SlidingBarGraph')
.setWidth('496px')
.setHeight('496px')
.setDomain([0, 1])
.setTransitionTime()
.setBackgroundColor('')
.setNumberOfBars()
graph.insertIntoHTMLElement(document.getElementById("expand-bar"));
function loop() {
var newValue = getNextBitcoinTransaction();
listOfAllBitcoinTransactions.push(
{val: newValue, uid: Date.now()}
);
graph.update(listOfAllBitcoinTransactions);
setTimeout(loop, 1000);
}
loop();
}</script>