notebook.community

Edit and run

Note: if you run this notebook yourself, make sure to mount the complete JFinM_Charts directory to IJulia / Jupyter, as the notebook will link to the d3 directory in the main project directory.

directory mount equals JFinM_Charts
the deviating name is due to the fact that I run this notebook in a virtual environment, where JFinM_Charts is mounted as directory mount



In [1]:

    
pwd()









    Out[1]:





"/home/jovyan/mount/notebooks"

In general, we need to define paths to the following components:

output file
d3 library
data
d3 chart code
localhost

Thereby only two components are defined relative to the current directory:

output file
localhost

All other components are relative to the output file:

d3 library
data,

except the d3 chart code, which always resides in the package directory and gets completely included into the output file.

Define chart type

The best way to create a chart instance is through the general function chart, which simultaneously allows further customizations through keyword arguments:



In [2]:

    
using JFinM_Charts

in order to allow offline charts, create link to local d3 library inside of current directory
symbolic link will be an absolute path to d3 folder in JFinM_Charts directory, so we will not use it in this demo, as the notebook charts should be viewable on github-pages and nbviewer also



In [3]:

    
d3lib = d3SymLink()









    



symlink: file already exists (EEXIST)





    Out[3]:





D3Lib("./d3",false)

the current directory now entails a link to d3:



In [4]:

    
readdir()









    Out[4]:





4-element Array{Union(ASCIIString,UTF8String),1}:
 "d3"                      
 ".ipynb_checkpoints"      
 "JFinM_Charts_usage.ipynb"
 "tmp"

this path now could be used to reference the local d3 library:



In [5]:

    
dump(d3lib)









    



D3Lib 
  path: ASCIIString "./d3"
  online: Bool false

we use the d3 library contained in the repositories main directory instead



In [6]:

    
d3lib = JFinM_Charts.D3Lib("../d3")









    Out[6]:





D3Lib("../d3",false)

Tree chart without data file

create data



In [7]:

    
treeData = [0  2  2  2  2  2;
            1  0  3  3  3  3;
            2  2  0  4  4  4;
            3  3  3  0  5  5;
            4  4  4  4  0  6;
            5  5  5  5  5  0]









    Out[7]:





6x6 Array{Int64,2}:
 0  2  2  2  2  2
 1  0  3  3  3  3
 2  2  0  4  4  4
 3  3  3  0  5  5
 4  4  4  4  0  6
 5  5  5  5  5  0

create customized chart



In [8]:

    
trChrt = chart(JFinM_Charts.VineTreeChart, vSpace = 50, width = 80)









    Out[8]:





VineTreeChart("VineTreeChart","vines/vineTreeChart.js",false,1,80,500,50,12)

to see whether a chart requires external data, look at field extData:



In [9]:

    
dump(trChrt)









    



VineTreeChart 
  chartType: ASCIIString "VineTreeChart"
  jsCodePath: ASCIIString "vines/vineTreeChart.js"
  extData: Bool false
  nData: Int64 1
  width: Int64 80
  height: Int64 500
  vSpace: Int64 50
  nodeRadius: Int64 12

hence this chart can be embedded without external data



In [10]:

    
embChart = JFinM_Charts.embed(treeData, trChrt, d3lib)









    Out[10]:

iframe settings can be modified



In [11]:

    
embChart = JFinM_Charts.embed(treeData, trChrt, d3lib, width = 550, height = 300)









    Out[11]:

to retrieve the underlying html file:



In [12]:

    
embChart.absHtmlPath









    Out[12]:





"/home/jovyan/mount/notebooks/tmp/juliaBTx3WS_VineTreeChart.html"

access all information of the embedded chart instance



In [13]:

    
dump(embChart)









    



D3Embedded 
  htmlChart: NB_Raw_HTML 
    s: ASCIIString "<iframe src=\"tmp/juliaBTx3WS_VineTreeChart.html\"  width=\"550\"height=\"300\"></iframe>"
  absHtmlPath: ASCIIString "/home/jovyan/mount/notebooks/tmp/juliaBTx3WS_VineTreeChart.html"
  relHtmlPath: ASCIIString "tmp/juliaBTx3WS_VineTreeChart.html"
  dataPaths: Array(ASCIIString,(1,)) ASCIIString["embedded data"]

for charts without external data field dataPaths will show the variable name of the data in Javascript



In [14]:

    
embChart.dataPaths









    Out[14]:





1-element Array{ASCIIString,1}:
 "embedded data"

permanently save chart with render



In [15]:

    
render(treeData, trChrt, "./tmp/treeChartTest.html", ["treeArrayDataName"], d3lib)









    Out[15]:





"/home/jovyan/mount/notebooks/tmp/treeChartTest.html"



In [16]:

    
readdir("./tmp")









    Out[16]:





3-element Array{Union(ASCIIString,UTF8String),1}:
 "juliaBTx3WS_VineTreeChart.html"
 "juliaoaNYAp_VineTreeChart.html"
 "treeChartTest.html"

with online d3 library



In [17]:

    
render(treeData, trChrt, "./tmp/treeChartTest.html", ["treeArrayDataName"])









    Out[17]:





"/home/jovyan/mount/notebooks/tmp/treeChartTest.html"

Multi-line chart with underlying data file



In [18]:

    
using TimeData

create customized chart



In [19]:

    
chrt = JFinM_Charts.chart(MLineChart)









    Out[19]:





MLineChart("MLineChart","lineCharts/mlineChartShowNAs.js",true,1,900,400,"lin","")

create data



In [20]:

    
dats = [Date(2001,1,1):Date(2001,1,30)]
data = Timematr(rand(30), dats)
data[1:3, :]









    Out[20]:




Timematr{Date}
Dimensions: (3, 1)
From: 2001-01-01, To: 2001-01-03
idx x1
1 2001-01-01 0.604
2 2001-01-02 0.27
3 2001-01-03 0.378

render chart with default output:



In [25]:

    
embed(data, chrt, width = 850, height = 600)









    



/home/jovyan/mount/notebooks/tmp/juliaW3prqg_MLineChart.html
/home/jovyan/mount/notebooks/tmp/juliaW3prqg_MLineChart_data.csv






    Out[25]:

render chart to disk with automatic data names:



In [27]:

    
render(data, chrt, "./tmp/linePlot.html")









    



/home/jovyan/mount/notebooks/tmp/linePlot.html
/home/jovyan/mount/notebooks/tmp/linePlot_data.csv






    Out[27]:





"/home/jovyan/mount/notebooks/tmp/linePlot.html"

render chart with given data



In [28]:

    
render([], chrt, "./tmp/linePlot2.html", ["./tmp/linePlot_data.csv"])









    Out[28]:





"/home/jovyan/mount/notebooks/tmp/linePlot2.html"