This is a sample to show how Elegans.Wireframe works. This shows a graph of the equetion below:
Click here to learn more about Elegans.
This is a sample to show how Elegans.Wireframe works. This shows a graph of the equetion below:
Click here to learn more about Elegans.
This is a sample to show how to generate a single plot with Elegans.
Click here to learn more about Elegans.
This is a sample to show how to generate a multiple plot with Elegans.
Click here to learn more about Elegans.
The goal of my project is to build interactive visualization, and still allows fast prototyping, customizability, and integration to other SciRuby components. I think we can complete this goal with the client-server model shown below: server provides JSON data throgh REST API, and client get it with Ajax and generate plots based on it. Server-side gem will be build with SciRuby components like NMatrix, and client-side will use D3.js for plotting. This model is inspired by Prof. Karl Broman's work. (http://www.biostat.wisc.edu/~kbroman/D3/)
We have come up with an approach for the SciRuby D3 GSoC. Basically we decided that for interactive visualisations generating Javascript from Ruby is not the way forward. The clue is already in the D3 name, i.e., data driven documents ;)
What we are proposing is to create the visualisations as pure Javascript components. Components are driven by data in the form of JSON. Components are
require 'sciruby' | |
df = SciRuby::Dataframe.new(address.json) | |
# change data | |
db = SciRuby::DataBase.connect(address_to_server) | |
db.push('table_name', df) | |
heatmap = BioPlot::HeatMap.new(table:db.table_name, x:'index', y:'Y') | |
scatter = SciPlot::Scatter.new(table:db.table_name, x:'X', y:'Y') |
#include <stdio.h> | |
#include <string.h> | |
int main(){ | |
char buffer[100]; | |
int i, num, pow2 = 1, result=0; | |
scanf("%99s", buffer); | |
num = strlen(buffer); |
<html lang='en'> | |
<head> | |
<title>Nyaplotjs example -- Multiple Panes</title> | |
<script src='http://d3js.org/d3.v3.min.js'></script> | |
<script src='https://rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js'></script> | |
</head> | |
<body> | |
<div id='vis1' style='float:left'></div> | |
<div id='vis2' style='float:left'></div> | |
<script> |
<html lang='en'> | |
<head> | |
<title>Nyaplotjs example -- Scatter</title> | |
<script src='http://d3js.org/d3.v3.min.js'></script> | |
<script src='https://rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js'></script> | |
</head> | |
<body> | |
<div id='vis'></div> | |
<script> | |
var data1 = [], MAX=50, MIN=0; |
<html lang='en'> | |
<head> | |
<title>Nyaplotjs example -- Bar chart</title> | |
<script src='http://d3js.org/d3.v3.min.js'></script> | |
<script src='https://rawgit.com/domitry/Nyaplotjs/master/release/nyaplot.js'></script> | |
</head> | |
<body> | |
<div id='vis'></div> | |
<script> | |
models = {data:{data1: [{name:'type1',val1:48,val2:13}, {name:'type2',val1:20,val2:25}, {name:'type3',val1:4,val2:11}, {name:'type4',val1:12,val2:34}, {name:'type5',val1:22,val2:34}]},panes: [{type:'rectangular', diagrams:[{type: 'bar', data: 'data1', options: {x:'name', y:'val1'}}],options:{width:500, height:500, xrange: ['type1','type2','type3','type4','type5'], yrange: [0,50]}}]}; |