Menu

Techniques
how to use DOACC data in your own application / web site.

Charting

Squaretree and Raphael

An in-browser illustration of a populating a squaretree chart from the DOACC dataset augmented with price, volume and market capitalisation facts scraped from the Intenet Archive’s copies of coinmarketcap web pages

Reading from graph

the code (as in view source)

// For quick access to those namespaces: var FOAF = $rdf.Namespace("http://xmlns.com/foaf/0.1/"); var RDF = $rdf.Namespace("http://www.w3.org/1999/02/22-rdf-syntax-ns#"); var RDFS = $rdf.Namespace("http://www.w3.org/2000/01/rdf-schema#"); var OWL = $rdf.Namespace("http://www.w3.org/2002/07/owl#"); var DC = $rdf.Namespace("http://purl.org/dc/elements/1.1/"); var XSD = $rdf.Namespace("http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/#dt-"); var SKOS = $rdf.Namespace("http://www.w3.org/2004/02/skos/core#"); var DOACC = $rdf.Namespace("http://purl.org/net/bel-epa/doacc#"); var CCS = $rdf.Namespace('http://purl.org/net/bel-epa/2015-04/ccs#'); var data = []; var labels = []; var maxd = 0; var dt; var listout = function() { cmpno = 'cmp-'+'2'; // arbitrary example dt = g.any(CCS(cmpno), DC('date'), null); // date, for title cmpds = g.each(null, CCS('cmp'), CCS(cmpno)); // the datapoints for the post var res = $.map(cmpds.slice(2,22), function(cmp) { var cn = g.any(g.any(cmp, CCS('cryptocurrency'), null), DOACC('symbol'), null); var val = g.any(cmp, CCS('marketcap'), null); return {"label": cn.value, "value": parseFloat(val.value).toFixed(0)} }); data = $.map(res, function(p) {return p['value'] * 10}); labels = $.map(res, function(p) {return p['label']}); maxd = ((Math.max.apply(null, data)/50000)|0)*50000; // sop to squaretree var boxFormatter = function (coordinates, index) { var datapoint,i, color; datapoint = data; for (i=0; i<index.length; i++){ datapoint = datapoint[index[i]]; } var saturation = ((datapoint / maxd)*0.6) + 0.4; var brightness = ((datapoint / maxd)*0.3) + 0.2; color = "hsb(0." + (Math.random()*(9-1)+1) + "," + saturation + "," + brightness + ")"; return{ "fill" : color, "fill-opacity": "0.6" }; }; $('#results').html(''); // prep Treemap.draw( "results", 850, 450, data, labels, { 'label' : {'fill' : 'white'}, 'background' : {'fill': 'url("images/assets/marble.jpg")'}, 'box' : boxFormatter, } ); $('#title').html('coinmarketcap.com, <em>marketcap [2:22] #'+cmpno+' ('+dt+')</em>'); // guff }; var g = $rdf.graph(); var docURI = "http://localhost.localdomain/altcoin.n3"; var fetch = $rdf.fetcher(g); fetch.nowOrWhenFetched(docURI,undefined,function(ok, body, xhr){ // @@ check ok listout() });

market capitalisation and price data

Charting

This is an illustration of the N3 content of the file “altcoin.n3”, referenced in the above example:

@prefix ccs: <http://purl.org/net/bel-epa/2015-04/ccs#> . @prefix dc: <http://purl.org/dc/elements/1.1/> . @prefix doacc: <http://purl.org/net/bel-epa/doacc#> . @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> . @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> . @prefix xml: <http://www.w3.org/XML/1998/namespace> . @prefix xsd: <http://www.w3.org/2001/XMLSchema#> . ccs:cmp-2 a ccs:CMPost ; dc:date "2014-02-25T09:00:00"^^xsd:date ; ccs:btc "470.95"^^xsd:float . ccs:cmpd-100 a css:CMPostDatum ; ccs:cmp ccs:cmp-2 ; ccs:cryptocurrency doacc:Db39a66a4-5d86-4653-a9ad-ef91f6a970f8 ; ccs:daily "0.0"^^xsd:float ; ccs:marketcap "6470.0"^^xsd:float ; ccs:price "0.005888"^^xsd:float ; ccs:qual 2 ; ccs:stale false ; ccs:volume "0.0"^^xsd:float .

(Apologies for the improperly escaped angle brackets in the above listing, I need to have a word with the syntax highlighting lexer.)