[[tq:work:charts]]
 
Trace: • charts
Table of Contents

Charts

TQshow

First version

Piran, 30. October, 2016

For visualization of temporal quantities I decided to adapt some bar-chart solution based on D3.js. A current version is available on the file barChart.html: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- https://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/ -->
<head>
<meta charset="utf-8">
<title>TQchart</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width=1000;
var height=500;
var title='test';
var TQmax=20;
</script>
<script src="./barData.js"></script>
<svg id="visualisation"  width="1000" height="500" xmlns="http://www.w3.org/2000/svg"></svg>
<script>
function MakeChart() {
 
  var vis = d3.select('#visualisation'),
    WIDTH = width,
    HEIGHT = height,
    MARGINS = { top: 20, right: 20, bottom: 20, left: 50 },
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right], 0.1)
      .domain([Tmin,Tmax]),
 
//    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])
//      .domain([0,d3.max(barData, function (d) { return d[2]; })
//    ]),
 
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])
      .domain([0,TQmax]),
 
    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(5)
      .tickSubdivide(true),
 
    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(5)
      .orient("left")
      .tickSubdivide(true);
 
  vis.append("svg:text")      
     .style("fill", "black")  
     .attr("x", 70)          
     .attr("y", 40)        
     .text(title);     
 
  vis.append("svg:style")
     .attr('type', 'text/css')
     .text(" .axis path, .axis line { fill: none; stroke: #777; 
       shape-rendering: crispEdges; } .axis text { font-family: 'Arial'; 
       font-size: 13px; } .tick { stroke-dasharray: 1, 2; } 
       .bar { fill: FireBrick; } ")  
 
  vis.append('svg:g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
    .call(xAxis);
 
  vis.append('svg:g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
    .call(yAxis);
 
  vis.selectAll('rect')
    .data(barData)
    .enter()
    .append('rect')
    .attr('x', function (d) {return xRange(d[0]); })
    .attr('y', function (d) {return yRange(d[2]); })
    .attr('width', function (d) {return (xRange(d[1])-xRange(d[0])); })
    .attr('height', function (d) {return ((HEIGHT - MARGINS.bottom) - yRange(d[2])); })
    .attr('fill', 'steelblue');
};
MakeChart();
</script>
</body>
</html>

It expects on the file barData.js data about a selected temporal quantity: 

var barData = [[1970, 1984, 0], [1984, 1985, 0.5], [1985, 1989, 1.0], [1989, 1990, 1.5],
  [1990, 1992, 2.4444], [1992, 1994, 3.8333], [1994, 1995, 5.2778], [1995, 1996, 5.7222],
  [1996, 2000, 7.0972], [2000, 2001, 7.5417], [2001, 2003, 8.0417], [2003, 2004, 8.5417],
  [2004, 2007, 9.4306], [2007, 2009, 9.4714]];
var TQmax = 17;
var Tmin = 1970;
var Tmax = 2009;
var width = 600;
var height = 250;
var title = "DOREIAN_P";

For a visualization of a given temporal quantity in Python the function TQshow (included in GraphNew.py) can be used: 

def TQshow(tq,TQmax,Tmin,Tmax,w,h,tit):
   TQ = [ list(q) for q in tq ]
   js = open('barData.js','w')
   js.write('var barData = '+str(TQ)+';\n')
   js.write('var TQmax = '+str(TQmax)+';\n')
   js.write('var Tmin = '+str(Tmin)+';\n')
   js.write('var Tmax = '+str(Tmax)+';\n')
   js.write('var width = '+str(w)+';\n')
   js.write('var height = '+str(h)+';\n')
   js.write('var title = "'+tit+'";\n')
   js.close()  
# https://pymotw.com/3/webbrowser/
# import webbrowser
# b = webbrowser.get('google-chrome')
# b = webbrowser.get('mozilla')
   b = webbrowser.get('windows-default')
   b.open('c:/users/batagelj/work/python/graph/chart/barChart.html')

It writes the data about a selected temporal quentity on the file barData.js and applies a web browser on the file barChart.html: 

>>> TQmax = 17; Tmin = 1970; Tmax = 2009; width = 600; height = 250;
>>> tit = "BORGATTI_S"
>>> tq = [(1970, 1988, 0), (1988, 1989, 0.5), (1989, 1990, 1.4444), (1990, 1991, 3.3333),
  (1991, 1992, 4.2778), (1992, 1993, 5.2778), (1993, 1994, 6.2778), (1994, 1996, 7.7778), 
  (1996, 1997, 8.2778), (1997, 1998, 9.2222), (1998, 1999, 9.5972), (1999, 2001, 11.0972),
  (2001, 2002, 11.9167), (2002, 2003, 12.3611), (2003, 2005, 14.1111), 
  (2005, 2006, 15.1111), (2006, 2007, 16.0556), (2007, 2009, 16.9204)]
>>> TQshow(tq,TQmax,Tmin,Tmax,width,height,tit)

In the browser's window we get the bar-chart of a given temporal quantity. To obtain a picture we can either capture the screen and crop it (Irfanview), or use the Chrome browser and entering More Tools / Developer tools select the SVG element, copy it into a text file, and saving it as a SVG picture.

Borgatti.svg

To do

  1. correct dimensions in the SVG tag
  2. add color of bars into barData.js
  3. labels on x axis
  4. add position of the title into barData.js

Second version

An improved version of the temporal quentities charts is given in TQchart.html 

<!DOCTYPE html>
<html><head>
<title>TQ chart</title>
<meta charset="utf-8">
</head>
<body>
<!-- script src="http://d3js.org/d3.v3.min.js"></script -->
<script src="./d3.v3.min.js"></script>
<script src="./barData.js"></script>
<script>
  var margin = {top: 10, right: 20, bottom: 20, left: 60},
    width = Width - margin.left - margin.right,
    height = Height - margin.top - margin.bottom;
 
  var svg = d3.select("body").append("svg")
    .attr("width", Width)
    .attr("height", Height)
    .attr("xmlns", "http://www.w3.org/2000/svg")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
  var x = d3.scale.linear().range([0, width]).domain([Tmin, Tmax]);
  var y = d3.scale.linear().range([height, 0]).domain([0, TQmax]);
 
  svg.append("style")
     .attr('type', 'text/css')
     .text(" .axis path, .axis line { fill: none; stroke: #777; 
       shape-rendering: crispEdges; } .axis text { font-family: 'Arial'; 
       font-size: 13px; } .tick { stroke-dasharray: 1, 2; }")  
 
  svg.selectAll('rect')
    .data(barData)
    .enter()
    .append('rect')
    .attr("class", "bar")
    .attr('x', function (d) {return x(d[0]); })
    .attr('y', function (d) {return y(d[2]); })
    .attr('width', function (d) {return (x(d[1]) - x(d[0])); })
    .attr('height', function (d) {return (height - y(d[2])); })
    .attr('fill', Rfill);
 
  svg.append("text")      
    .style("fill", "black")  
    .style("font", "14px sans-serif")
    .attr("x", xLab)          
    .attr("y", yLab)        
    .text(Title);     
 
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis()
    .scale(x)
    .orient("bottom"));
 
  svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis()
    .scale(y)
    .orient("left"));
</script>
</body>
</html>

The content of the file barData.js is extended with some additional parameters 

var barData = [[1, 2, 27], [10, 11, 11], [14, 15, 27], [16, 17, 11], [17, 18, 17], 
  [18, 19, 12], [22, 23, 17], [25, 26, 11], [27, 28, 18], [28, 29, 16], [29, 30, 53],
  [30, 31, 56], [31, 32, 51], [32, 33, 30], [33, 34, 17], [34, 35, 71], [35, 36, 76],
  [36, 37, 53], [37, 38, 11], [38, 39, 23], [39, 40, 54], [40, 41, 13], [41, 42, 174],
  [42, 43, 25], [43, 44, 20], [45, 46, 15], [46, 47, 25]]
var Tmin = 1;
var Tmax = 47;
var Width = 900;
var Height = 250;
var TQmax = 180;
var Title = 'Workers';
var Rfill = 'orange';
var xLab = 70;
var yLab = 40;

Here is an SVG picture produced by TQchart.html

Co-authorship in SN5

multiply.py: introduction of options edge and double in procedures TQtwo2oneCols and TQtwo2oneRows. 

gdir = 'c:/users/batagelj/work/python/graph/graph'
# wdir = 'c:/users/batagelj/work/python/graph/JSON/test'
wdir = 'c:/users/batagelj/work/python/graph/JSON/SN5'
cdir = 'c:/users/batagelj/work/python/graph/chart'
import sys, os, datetime, json
sys.path = [gdir]+sys.path; os.chdir(wdir)
import TQ
from GraphNew import Graph
# file = 'C:/Users/batagelj/work/Python/graph/JSON/test/WAtestInst.json'
file = 'C:/Users/batagelj/work/Python/graph/JSON/SN5/WAcInst.json'
# file = 'C:/Users/batagelj/work/Python/graph/JSON/SN5/WAcCum.json'
# file = 'C:/Users/batagelj/work/Python/graph/JSON/Gisela/papInst.json'
t1 = datetime.datetime.now()
print("started: ",t1.ctime(),"\n")
G = Graph.loadNetJSON(file)
t2 = datetime.datetime.now()
print("\nloaded: ",t2.ctime(),"\ntime used: ", t2-t1)
# T = G.transpose()
# Co = Graph.TQmultiply(T,G,True)
# CR = G.TQtwo2oneRows()
CC = G.TQtwo2oneCols()
t3 = datetime.datetime.now()
print("\ncomputed: ",t3.ctime(),"\ntime used: ", t3-t2)
ia = { v[3]['lab']: k for k,v in CC._nodes.items() }
# iw = { v[3]['lab']: k for k,v in CR._nodes.items() }
# CC._links[(ia['BORGATTI_S'],ia['EVERETT_M'])][4]['tq']
# CC._links[(ia['IDI/B'],ia['HCL/B'])][4]['tq']
# len(CC)
# CC._links[(ia['BORGATTI_S'],ia['EVERETT_M'])][4]['tq']
# CC._links[(ia['BORGATTI_S'],ia['BORGATTI_S'])][4]['tq']
# TQmax = 17; Tmin = 1970; Tmax = 2009; w = 600; h = 250; tit = 'BORGATTI_S'
# TQshow(BB,cdir,TQmax,Tmin,Tmax,w,h,tit,fill='orange')
======= RESTART: C:\Users\batagelj\work\Python\graph\graph\multiply.py =======
started:  Sun Nov 20 00:26:51 2016 
loaded:  Sun Nov 20 00:26:51 2016 
time used:  0:00:00.425024
computed:  Sun Nov 20 00:26:52 2016 
time used:  0:00:01.165066
>>> BB = CC._links[(ia['BORGATTI_S'],ia['BORGATTI_S'])][4]['tq']
>>> BE = CC._links[(ia['BORGATTI_S'],ia['EVERETT_M'])][4]['tq']
>>> BB
[(1988, 1990, 2), (1990, 1991, 4), (1991, 1992, 2), (1992, 1993, 4), (1993, 1994, 2),
 (1994, 1995, 3), (1996, 1997, 1), (1997, 1998, 2), (1998, 1999, 1), (1999, 2000, 3), 
 (2001, 2002, 2), (2002, 2003, 1), (2003, 2004, 4), (2005, 2006, 3), (2006, 2007, 2), 
 (2007, 2008, 3)]
>>> BE
[(1988, 1989, 1), (1989, 1990, 2), (1990, 1991, 4), (1991, 1992, 1), (1992, 1995, 2), 
 (1996, 1998, 1), (1999, 2000, 3), (2003, 2004, 1), (2005, 2007, 1)]
>>> TQmax = 8; Tmin = 1970; Tmax = 2009; w = 600; h = 120; tit = 'BORGATTI_S'
>>> Graph.TQshow(BB,cdir,TQmax,Tmin,Tmax,w,h,tit,fill='orange')
>>> tit = 'BORGATTI_S - EVERETT_M'
>>> Graph.TQshow(BE,cdir,TQmax,Tmin,Tmax,w,h,tit,fill='orange')
>>> NN = CC._links[(ia['NEWMAN_M'],ia['NEWMAN_M'])][4]['tq']
>>> NN
[(1999, 2000, 2), (2000, 2001, 4), (2001, 2002, 7), (2002, 2003, 8), (2003, 2004, 7), 
 (2004, 2005, 11), (2005, 2006, 7), (2006, 2007, 11), (2007, 2008, 3)]
>>> tit = 'NEWMAN_M'; TQmax = 12; h = 150
>>> Graph.TQshow(NN,cdir,TQmax,Tmin,Tmax,w,h,tit,fill='orange')

tq/work/charts.txt · Last modified: 2016/11/21 13:37 by vlado
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki