Wednesday 30 April 2014

Splicing out of arrays...

Splicing out of arrays is quite a challenge because when you splice out, you change the numbering.

I think it might be better to generate the list of the rows that need to be spliced and then splice all at the same time.

This doesn't actually solve the problem.
Unless you do the splicing backwards!!!
Clever.

Need to sort the list from the largest to the smallest first.
fruits.reverse(); - Should also work.

This has worked well. Reversing is really a clever trick that makes life much easier.
It probably would remove the need to generate a list of rows that need to be spliced but that's OK for now.

Playing with splice to remove rows from the array

I am trying to learn more about the Javascript funciton "splice"
http://www.w3schools.com/jsref/jsref_splice.asp

Example 1:
simple one dimensional array:
var numbers = [1,2,3,4]

numbers.splice(2,1); // removes third item in the array.

New array is: 1,2,4

var numbers = [[1,2,3,4],[10,20,30,40]];

numbers.splice(1); // removes a whole row of the data from the two dimensional array

New array is 1,2,3,4

HOWEVER, this will also delete everything after 1 in a multidimensional array. Not sure why...

Documentation here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

It says:
"If no howMany parameter is specified (second syntax above, which is a SpiderMonkey extension), all elements after index are removed."

So here is what I have to do:
var numbers = [[1,2,3,4],[10,20,30,40], [100, 200, 300, 400]];
var splicedNumbers = [[1,2,3,4],[10,20,30,40], [100, 200, 300, 400]];
document.write("<br>");
document.write("<br>");
document.write(numbers);

splicedNumbers.splice(1,1); // this now removes just the second row in the array!

document.write("<br>");
document.write("<br>");
document.write(numbers);
document.write("<br>");
document.write("<br>");

document.write(splicedNumbers);

Output:
1,2,3,4,10,20,30,40,100,200,300,400

1,2,3,4,10,20,30,40,100,200,300,400

1,2,3,4,100,200,300,400

Monday 28 April 2014

Dragging a simple circle...

This is driving me a little crazy.

I can't get the logic to work.

This should work, I think:

create svg element
ppend circle with .call(drag)
define var drag with function dragmove
in function dragmove, move the circle.

However, I can't get this logic to work in any real way.

However, I can get this work:

define drag and include a function draw()
create svg element
create function draw()

inside this create a box and bind some data to it.
create this gEnter variable that binds the call(drag)
"transform" and "translate" the box
append a circle to the gEnter variable.

Then at the end run the draw() function again.

This works for a single object and for hard coded groups but I can't get it to work for array coded data.

Why???

Arghhh!!!!!

Very frustrating because I feel that I am VERY, VERY close to making all this work......

Secure Shells (ssh)

Ok so learning more new stuff about computers:
secure shells (ssh)

I need to set up one between my computer and github so that I can get the two computers to interact well.

A secure shell involves generating a secure key public and private. Only a computer that has both of these can then interact with the site.

The private key is on my computer.
The public key is on Github.

This has taken some time to learn but hopefully will make life easier.

This allows me to get Aptana to interact with Github.
Good bit of progress.

I followed the advice below which was invaluable.
https://help.github.com/articles/generating-ssh-keys

Friday 25 April 2014

Dragging two rectangles...

I have

<!DOCTYPE html>

<html>

<head>

<title> dragging </title>

</head>

<body>

<h2> Drag a rectangle</h2>

blocks = [{ x: 0, y: 0 }];

drag = d3.behavior.drag()

.origin(Object)

.on("drag", function(d) {

d.x = d3.event.x;

d.y = d3.event.y;

draw();

});

svg = d3.select("body")

.append("svg:svg")

.attr("width", 1000)

.attr("height", 600);

function draw() {

box = svg.selectAll("g")

.data(blocks);

gEnter = box.enter().append("g")

.call(drag);

box.attr("transform", function(d) { return "translate("+d.x+","+d.y+")"; });

gEnter.append("rect")

.attr("x", 10)

.attr("y", 10)

.attr("height", 100)

.attr("width", 20)

.style("fill", "red")

;

gEnter.append("rect")

.attr("x", 10)

.attr("y", 110)

.attr("height", 10)

.attr("width", 20)

.style("fill", "blue")

;

}

draw()

</script>

</body>

</html>

Some code that allows a square to move on Jsfiddle...

http://jsfiddle.net/EMNGq/14/

Talked to Christian Bannister

Told me about Shiny

http://www.rstudio.com/shiny/

Found this: BioVis Project: Identification of Mutations that Affect Protein Function

https://googledrive.com/host/0B7G1I9OfZ_ylbDUxa0JqLVMyRzg/

Hover, mouseover and mouseout...

Trying to learn how to drag molecules around my workspace.
I got confused when I just cut and pasted the code.
So now working through the free D3 book

http://chimera.labs.oreilly.com/books/1230000000345/ch10.html#_hover_to_highlight
Chapter 9 and Chapter 10

Nice examples.
All the code on github and explained!!!

It's nicely done and will really help with visualisations.

However, nothing on grabbing yet!!

Remember stacked bar charts. Could these be useful?

Frustrated.
I can't get CD40 to move!!!

Arghh!!!

Thursday 24 April 2014

Learning Javascript...

My chat with Ian and the need to put some of my scripts in the public domain makes my ignorance feel a bit exposed. So I am trying to collect resources to find out what I should know.

Here are some web addresses:

https://www.futurelearn.com/courses/creative-coding

http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb

http://ejohn.org/apps/learn/

http://alistapart.com/article/the-design-of-code-organizing-javascript

and I really should interact with BioJS a bit more:

http://www.ebi.ac.uk/Tools/biojs/registry/index.html

I should especially read the documentation.

I have also downloaded a library book and ordered one from the library too.

Wednesday 9 April 2014

Six arrays into one...

The code from here worked to combine the arrays.

http://stackoverflow.com/questions/5258086/combaining-two-array-into-single-multi-dimensional-array-in-javascript

I also understand how to refer to the arrays when bound in d3.

Excellent progress understanding and manipulating arrays today.

Happy days.

Objects and arrays...

Reading the d3 book from O'Reilly, I learned something important today.

This was the difference between objects and arrays.

Arrays have square brackets and are referred to with numbers.
For example
var number = [5,10,15,20,25];
numbers[0] // returns 5
numbers[4] // returns 25

In contrast

Objects
Well it seems that almost anything can be a JavaScript object but...
Described in curly brackets "{"

Example:
var fruit = { kind:"grape", color:"red", quantity:12, tasty=true};
to reference this use the dot notation
fruit.kind // returns "grape"
fruit.color // returns "red"

You can have arrays of objects or objects of arrays etc....

In my rendering of CD40 in JSON, I had an array of objects.
IN that case I ended up with
fruits[0].quantity
type of notation.

It's possible to render this in an array of arrays too.

Will work just as well :-)

To describe the positions, use numbers.

This should/might make life easier.

Things to do and options...

To do:
Work out how to get an input into webpage with Javascript.
Create an array from input.
Loop through the array to visit web pages and get feature info.

Use feature info to render the diagrams of the proteins.

Options
I might be able to create a JSON object instead of an array when getting data from XML

Some kind of append to JSON object should be possible.

JSON.stringify or some variation should work to make the JSON object.

OR
I could make the diagrams in d3 from just the arrays - again this should be possible!

Data from XML page into arrays...

So I can do it for CD40, which means that I can do it for any accession number really.

Here's what I can do:
I can go to the XML page.
I can find the features.
I can put them into three arrays
I can find the starts
I can put them into an array.
I can find the ends
I can put them into an array.

All good so far.

So what to do next?
Can I use these array to draw in d3 directly?
Do I need to turn these into a JSON array?
I don't think I should have to do that but I haven't worked out another way.

Below is a cut and paste of the code (for back up)
File name (on Dropbox) is CD40featuresinarray20140409.html

CODE:

<!DOCTYPE html>
<html>
<body>
<h1>Getting the CD40 data</h1>

<script>

// this works and makes five arrays.
// it also does output a list of features, a list of starts and a list of ends.
// I can remove some of the output later

xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET","http://www.uniprot.org/uniprot/P25942.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

// This works to get the accession number so I have uploaded the data - great.

x=xmlDoc.getElementsByTagName("accession")[0]
y=x.childNodes[0];
document.write(y.nodeValue);

document.write("<br>");
document.write("<br>");

// getting a list of features

// create variable names for the arrays
var type = []
var desc = []
var stat = []

x=xmlDoc.getElementsByTagName("feature")
for (i=0;i<x.length;i++)
{
document.write(x[i].getAttribute('type'));
type.push(x[i].getAttribute('type'));
document.write(" ");
document.write(x[i].getAttribute('description'));
desc.push(x[i].getAttribute('description'));
document.write(" ");
document.write(x[i].getAttribute('status'));
stat.push(x[i].getAttribute('status'));
document.write(" ");
document.write("<br>");
}
document.write("<br>");
document.write("<br>");

// output begin number

var start = []

x=xmlDoc.getElementsByTagName("begin")
for (i=0;i<x.length;i++)
{
document.write(x[i].getAttribute('position'));
start.push(x[i].getAttribute('position'));
document.write("<br>");
}
document.write("<br>");
document.write("<br>");

// output end number
var end = []
x=xmlDoc.getElementsByTagName("end")
for (i=0;i<x.length;i++)
{
document.write(x[i].getAttribute('position'));
end.push(x[i].getAttribute('position'));
document.write("<br>");
}
document.write("<br>");
document.write("<br>");

// so I have my data in 5 arrays, what next?

document.write("The End");

</script>

</body>
</html>

appending to an array...

I need to append to an array in order to convert the output from the XML exploration into an array that i can use.

from http://stackoverflow.com/questions/351409/appending-to-array

The commands are

// initialize array
var arr = [
    "Hi",
    "Hello",
    "Bonjour"
];

// append new value to the array
arr.push("Hola");

// display all values
for (var i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

Binding more than one array and turning it all into a JSON array

Searching.

Found:
http://stackoverflow.com/questions/14742953/d3-js-nested-selection-with-two-one-dimensional-arrays

http://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function/10284006#10284006

This looks very interesting:

> JSON.stringify( zip(['abcde',[1,2,3,4,5]]) )
[["a",1],["b",2],["c",3],["d",4],["e",5]]

With this kind of command, I should be able to turn the three arrays into a variable that corresponds to a JSON array!

By jove, I think I've got it!!

Tuesday 8 April 2014

Opacity....

Making the shapes a bit opac makes them look a little nicer.
add
.style("opacity", 0.5)
to the rectange attributes gives this instead:

Adding SVG text...

I think I put this link down before but here it is again.
Good advice about adding text in d3x:
https://www.dashingd3js.com/svg-text-element

CD40 hard coded in JSON format...

So it turns out I can do it using a hard coded JSON format....

Here is CD40

Code is below.

Stored in a file called RenderCD40json_2.html

Next task - turn xml into JSON.... maybe....

Or maybe work out a way to drag it around the page.

Also colors are garish.

Perhaps....

--- code ----

<!DOCTYPE html>

<html>

<head>

<title> CD40 Domains </title>

</head>

<body>

// This WORKS coded 20140408 - excellent....

// This is CD40 in JSON format

var CD40 = [

{"Name":"Topological domain", "start":21, "end": 193, "Info":"Extracellular Potential", "color":"blue"},

{"Name":"Transmembrane", "start":194, "end": 215, "Info":"Helical; Potential", "color":"green"},

{"Name":"Topological domain", "start":216, "end": 277, "Info":"Cytoplasmic Potential", "color":"red"},

{"Name":"Repeat", "start":25, "end": 60, "Info":"TNFR-Cys 1", "color":"black"},

{"Name":"Repeat", "start":61, "end": 103, "Info":"TNFR-Cys 2", "color":"black"},

{"Name":"Repeat", "start":104, "end": 144, "Info":"TNFR-Cys 3", "color":"black"},

{"Name":"Repeat", "start":145, "end": 187, "Info":"TNFR-Cys 4", "color":"black"}];

// It's good practice to generate an svg container that is as large as we need.

var svgContainer = d3.select("body").append("svg")

.attr("width", 500)

.attr("height", 500);

// This binds the data in jsonRectangles_CD40 to the rectangles.

var rectangles = svgContainer.selectAll("rect")

.data(CD40)

.enter()

.append("rect");

// This creates the rectangles using the bound data

var rectangleAttributes = rectangles

.attr("x", 10)

.attr("y", function (d) { return d.start; })

.attr("height", function (d) { return (d.end - d.start); })

.attr("width", 20)

.style("fill", function(d) { return d.color; });

// add some text

//Add the SVG Text Element to the svgContainer

var text = svgContainer.selectAll("text")

.data(CD40)

.enter()

.append("text");

//Add SVG Text Element Attributes

var textLabels = text

.attr("x", 35)

.attr("y", function (d) { return (d.start+(d.end-d.start)/2); })

.text( function (d) { return d.Name + ", " + d.Info ; })

.attr("font-family", "sans-serif")

.attr("font-size", "10px")

.attr("fill", "red");

</script>

</body>

</html>

Getting data from the web...

Ok so I have really made some progress.

I have created a simple cvs file and published it from Google Document as a cvs file.

I have taken this file into my d3 web page and I have generated a simple bar chart with it.

I have also introduced some Javascript alerts which tell me what is happening.

Next step: learn how to do this with a two dimensional array

Google side:

Create a simple spreadsheet.
File...
Publish to the web....
Get a link as a csv....

In your d3 file:

d3.text("yourURL",
function(unparsedData){
alert(unparsedData)

var data = d3.csv.parseRows(unparsedData);

alert(data)

N.B.

unparsed data will be in the form of a list
parsed data will be comma separated
the alert command brings these onto a Javascript and allows you a look.
it's d3.text rather than d3.csv because you don't have header.

Writing text in d3 and Alerts

There are, of course, a variety of ways to do this.

One way from http://thecodingtutorials.blogspot.co.uk/2012/07/introduction-to-d3.html:

is this

var test = d3.select("body").data([1, 2, 3]);

test.enter().append("p").append("test").text(function(d)
{
return "Hey there... #" + d;
});

Another way from http://chimera.labs.oreilly.com/books/1230000000345/ch05.html#_beyond_text

is this
script type="text/javascript">

var dataset = [5, 10, 15, 20, 25 ];

d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count to " +(d*10);
})
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});

I am trying to get this to write my array on the web page and it works.

Just learned this interesting thing:
alert(data)
will put the data in a javascript dialog box.
Great!!!

Monday 7 April 2014

Analysing some of Jack's data in R....

Put data into columns in Excel.

Save as in comma separated (CSV) format.

> jack = read.csv("JackELISAdata.csv", header=TRUE)
> jack
Sample_ID P50_NTL P50_40L p50_Fold_Increase P65_NTL
1 2 0.73 3.600 4.94 0.08
2 4 1.21 2.910 2.41 0.82
3 5 0.74 3.024 4.06 0.27
4 7 0.77 2.989 3.89 0.43
5 6 0.95 3.314 3.47 0.50
6 8 1.37 3.422 2.49 0.94
7 9 0.95 3.259 3.42 0.18
8 10 1.33 3.751 2.82 0.41
9 11 1.49 3.191 2.14 0.77
10 12 1.41 3.347 2.38 0.35
11 13 1.63 3.855 2.36 0.50
12 14 0.95 3.034 3.18 0.29
13 NA NA NA NA NA
14 NA NA NA NA NA
P65_40L p65_Fold_Increase
1 4.18 52.85
2 3.49 4.28
3 2.77 10.21
4 2.97 6.98
5 3.88 7.83
6 3.35 3.55
7 2.26 12.88
8 4.20 10.29
9 4.20 5.43
10 4.08 11.67
11 4.31 8.69
12 2.86 9.99
13 NA NA
14 NA NA
>
> summary(jack)
Sample_ID P50_NTL P50_40L
Min. : 2.000 Min. :0.730 Min. :2.910
1st Qu.: 5.750 1st Qu.:0.905 1st Qu.:3.031
Median : 8.500 Median :1.080 Median :3.287
Mean : 8.417 Mean :1.127 Mean :3.308
3rd Qu.:11.250 3rd Qu.:1.380 3rd Qu.:3.466
Max. :14.000 Max. :1.630 Max. :3.855
NA's :2 NA's :2 NA's :2
p50_Fold_Increase P65_NTL P65_40L
Min. :2.140 Min. :0.0800 Min. :2.260
1st Qu.:2.402 1st Qu.:0.2850 1st Qu.:2.942
Median :3.000 Median :0.4200 Median :3.685
Mean :3.130 Mean :0.4617 Mean :3.546
3rd Qu.:3.575 3rd Qu.:0.5675 3rd Qu.:4.185
Max. :4.940 Max. :0.9400 Max. :4.310
NA's :2 NA's :2 NA's :2
p65_Fold_Increase
Min. : 3.550
1st Qu.: 6.593
Median : 9.340
Mean :12.054
3rd Qu.:10.635
Max. :52.850
NA's :2

> plot(jack$P50_NTL)
> plot(jack$P50_NTL~jack$P65_NTL)
> hist(jack$P50_NTL)
> plot(jack$P50_NTL~jack$P65_NTL)
> plot(jack$P50_40L~jack$P65_40L)
> plot(jack$P50_NTL~jack$P50_40L)
> plot(jack)
> plot(jack$P50_NTL~jack$P50_40L)

Adding a line that is fitted properly.
> abline(lm(jack$P50_NTL~jack$P50_40L))

> results = lm(jack$P50_NTL~jack$P50_40L)
> summary(results)

Call:
lm(formula = jack$P50_NTL ~ jack$P50_40L)

Residuals:
Min 1Q Median 3Q Max
-0.53743 -0.18644 -0.02799 0.24623 0.41857

Coefficients:
Estimate Std. Error t value Pr(>|t|)
(Intercept) -0.4577 0.9636 -0.475 0.645
jack$P50_40L 0.4792 0.2902 1.652 0.130

Residual standard error: 0.2941 on 10 degrees of freedom
(2 observations deleted due to missingness)
Multiple R-squared: 0.2143, Adjusted R-squared: 0.1357
F-statistic: 2.728 on 1 and 10 DF, p-value: 0.1296

> plot(jack)
> plot(jack$P50_NTL~jack$P65_NTL)

> results = lm(jack$P50_NTL~jack$P65_NTL)
> summary(results)

Call:
lm(formula = jack$P50_NTL ~ jack$P65_NTL)

Residuals:
Min 1Q Median 3Q Max
-0.3348 -0.1816 -0.0772 0.1663 0.4751

Coefficients:
Estimate Std. Error t value Pr(>|t|)
(Intercept) 0.7972 0.1606 4.965 0.000566 ***
jack$P65_NTL 0.7154 0.3052 2.344 0.041079 *
---
Signif. codes: 0 ‘***’ 0.001 ‘**’ 0.01 ‘*’ 0.05 ‘.’ 0.1 ‘ ’ 1

Residual standard error: 0.2666 on 10 degrees of freedom
(2 observations deleted due to missingness)
Multiple R-squared: 0.3545, Adjusted R-squared: 0.29
F-statistic: 5.493 on 1 and 10 DF, p-value: 0.04108

> plot(jack$P50_40L~jack$P65_40L)
> results = lm(jack$P50_40L~jack$P65_40L)
> summary(results)

Call:
lm(formula = jack$P50_40L ~ jack$P65_40L)

Residuals:
Min 1Q Median 3Q Max
-0.38237 -0.12235 -0.07443 0.19158 0.33310

Coefficients:
Estimate Std. Error t value Pr(>|t|)
(Intercept) 2.3155 0.3854 6.008 0.000131 ***
jack$P65_40L 0.2799 0.1068 2.621 0.025574 *
---
Signif. codes: 0 ‘***’ 0.001 ‘**’ 0.01 ‘*’ 0.05 ‘.’ 0.1 ‘ ’ 1

Residual standard error: 0.2468 on 10 degrees of freedom
(2 observations deleted due to missingness)
Multiple R-squared: 0.4071, Adjusted R-squared: 0.3478
F-statistic: 6.867 on 1 and 10 DF, p-value: 0.02557

> plot(jack$P50_NTL~jack$P65_NTL)
> plot(jack$P50_40L~jack$P65_40L)
> jack
Sample_ID P50_NTL P50_40L p50_Fold_Increase P65_NTL P65_40L
1 2 0.73 3.600 4.94 0.08 4.18
2 4 1.21 2.910 2.41 0.82 3.49
3 5 0.74 3.024 4.06 0.27 2.77
4 7 0.77 2.989 3.89 0.43 2.97
5 6 0.95 3.314 3.47 0.50 3.88
6 8 1.37 3.422 2.49 0.94 3.35
7 9 0.95 3.259 3.42 0.18 2.26
8 10 1.33 3.751 2.82 0.41 4.20
9 11 1.49 3.191 2.14 0.77 4.20
10 12 1.41 3.347 2.38 0.35 4.08
11 13 1.63 3.855 2.36 0.50 4.31
12 14 0.95 3.034 3.18 0.29 2.86
13 NA NA NA NA NA NA
14 NA NA NA NA NA NA
p65_Fold_Increase
1 52.85
2 4.28
3 10.21
4 6.98
5 7.83
6 3.55
7 12.88
8 10.29
9 5.43
10 11.67
11 8.69
12 9.99
13 NA
14 NA

> plot(jack$p50_Fold_Increase~jack$p65_Fold_Increase)
> results = lm(jack$p50_Fold_Increase~jack$p65_Fold_Increase)
> summary(results)

Call:
lm(formula = jack$p50_Fold_Increase ~ jack$p65_Fold_Increase)

Residuals:
Min 1Q Median 3Q Max
-0.7323 -0.4247 -0.1503 0.3226 1.0151

Coefficients:
Estimate Std. Error t value Pr(>|t|)
(Intercept) 2.57393 0.25326 10.163 1.37e-06 ***
jack$p65_Fold_Increase 0.04613 0.01452 3.177 0.00987 **
---
Signif. codes: 0 ‘***’ 0.001 ‘**’ 0.01 ‘*’ 0.05 ‘.’ 0.1 ‘ ’ 1

Residual standard error: 0.6341 on 10 degrees of freedom
(2 observations deleted due to missingness)
Multiple R-squared: 0.5023, Adjusted R-squared: 0.4526
F-statistic: 10.09 on 1 and 10 DF, p-value: 0.009867

> abline(lm(jack$p50_Fold_Increase~jack$p65_Fold_Increase))

Not a great line but it would seem to be significant!!! IRONY

> plot(jack)

animation...

My plan is to try to render the molecules in d3 and then allow them to be manipulated in order to assemble a signalling pathway.

This requires me to be able to move the molecules in d3.

Animation and transitions are relatively easy. I can get the molecule moved up, down, left, right etc.

However, can I do that with a mouse click and drag? I feel sure it should be possible but I am not sure how yet.

Certainly with a mixture of javascript to input the cursor position and the desired movement, and then creating a d3 animation in response to this it should be possible.

Getting a little advanced perhaps.

Back to d3 rendering of the molecules perhaps?

Do a little more on this later...

Reading a little about animations this morning and I found this:

http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/

Still searching reveals:
Some drag behaviour in d3.

http://jsfiddle.net/CJ46R/3/

Interesting command:
var drag = d3.behavior.drag()

and this looks interesting:

http://collaboradev.com/2014/01/24/d3-drag-and-drop/

And this;
http://www.jasondavies.com/morley-triangle/

Cool!

With some discussion here:
https://groups.google.com/forum/#!topic/d3-js/fjp1mpvVW1M

This certainly can be done!!!

Requires more learning but it's going to be possible and I hope will work!!!

INSPIRING!!!!

Thursday 3 April 2014

BioModels Database...

Gosh there is so much information available....

Phosphatidylinositol signaling system - Homo sapiens

http://www.ebi.ac.uk/biomodels-main/BMID000000017744

Some random links from this morning...

Dasty3, a WEB framework for DAS

http://bioinformatics.oxfordjournals.org/content/27/18/2616.long

BioDAS Main Page

http://www.biodas.org/wiki/Main_Page

BioJas Specification Document

https://docs.google.com/document/d/1gG036Bvwl4i-KX5BTHddGzeE_5eospL-864BrnsAS_s/edit?hl=en_US

Global Organisation for Bioinformatics Learning, Education and Training

GOBLET

http://www.mygoblet.org/

More advice from PLOS Computational Biology

Ten Simple Rules for Effective Computational Research

http://www.ploscollections.org/article/info%3Adoi%2F10.1371%2Fjournal.pcbi.1003506;jsessionid=50417992F7DFFA7EE5651BCA701B7FE5

Learning about UK Bioinformatics people...

Jim Procter

Bioinformatician and Computer Scientist

Dundee

@foreveremain

Nice advice about developing open source software

Ten Simple Rules for the Open Development of Scientific Software

Found out about BioJS today...

List of relevant resources:

F1000 Research Article Collection about BioJS
BioJS Registry
GitHub repository - organised by Rafael C Jimenez
Tutorials on GitHub

BioJS is a library of JavaScript components to represent biological data.

Contributing or collaborating with this seems like a good idea.

Understanding all this is a bit of a challenge.

Some of the people involved:

Rafael C. Jimenez

rafael@ebi.ac.uk

Henning Hermjakob

hhe@ebi.ac.uk

John Gomez

jgomez@ebi.ac.uk

Manuel Corpas

manuel.corpas@tgac.ac.uk
@manuelcorpas

http://code.google.com/p/biojs/
biojs@googlegroups.com
@BiojsLibrary

Wednesday 2 April 2014

CD40 and TNFR1

So I have them both.

It's quite hard coded but it works.

Schematic represents size through amino acid length.

Green is the extracellular domain
Purple is the transmembrane domain
Red is the cytoplasmic domain

First thing I notice which I never really did before is that TNFR1 is much cytoplamsic domain than CD40.

Thus I learn stuff about the molecules by visualising them!

Code written in TextWrangler and in a file called Both.html

I also used the Console in Google Chrome to debug the code - I am becoming a programmer!

Already good :-)

Here is the picture.

Here is the code:

<!DOCTYPE html>

<html>

<head>

<title> Line representation of CD40 and TNFR1</title>

</head>

<body>

<h2> Rectangle representation of CD40 and TNFR1</h2>

// This works which is good news

// These are the variables for CD40 and TNFR1

var CD40 = [173,22,62];

var TNFR1 = [190, 23, 221]

var EC_CD40 = 173

var TM_CD40 = 22

var cyto_CD40 = 62

var EC_TNFR1 = 190

var TM_TNFR1 = 23

var cyto_TNFR1 = 221

var fulllength_TNFR1 = EC_TNFR1 + TM_TNFR1 + cyto_TNFR1

var ecandTM_CD40 = EC_CD40 + TM_CD40

var ecandTM_TNFR1 = EC_TNFR1 + TM_TNFR1

var noofproteins = 2

// This contains the hard code of the rectanges for CD40 and TNFR1

var jsonRectangles = [

{ "x_axis": 10, "y_axis": 10, "height": EC_CD40, "width":20, "color" : "green" },

{ "x_axis": 10, "y_axis": EC_CD40, "height": TM_CD40, "width":20, "color" : "purple" },

{ "x_axis": 10, "y_axis": ecandTM_CD40, "height": cyto_CD40, "width":20, "color" : "red" },

{ "x_axis": 100, "y_axis": 10, "height": EC_TNFR1, "width":20, "color" : "green" },

{ "x_axis": 100, "y_axis": EC_TNFR1, "height": TM_TNFR1, "width":20, "color" : "purple" },

{ "x_axis": 100, "y_axis": ecandTM_TNFR1, "height": cyto_TNFR1, "width":20, "color" : "red" }];

// This creates the svg container for the graphic

// It's good practice to generate an svg container that is as large as we need.

var svgContainer = d3.select("body").append("svg")

.attr("width", noofproteins*100)

.attr("height", fulllength_TNFR1+100);

// This binds the data in jsonRectangles_CD40 to the rectangles.

var rectangles = svgContainer.selectAll("rect")

.data(jsonRectangles)

.enter()

.append("rect");

// This creates the rectangles using the bound data

var rectangleAttributes = rectangles

.attr("x", function (d) { return d.x_axis; })

.attr("y", function (d) { return d.y_axis; })

.attr("height", function (d) { return d.height; })

.attr("width", function (d) { return d.width; })

.style("fill", function(d) { return d.color; });

// NOT WORKING YET as it only makes CD40 and not TNFR1!!! WHY??

</script>

</body>

</html>