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>
<script src=http://d3js.org/d3.v3.min.js></script>
</head>
<body>
<h2> Rectangle representation of CD40 and TNFR1</h2>
<script>
// 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>
No comments:
Post a Comment