Visualisation and Data

Grouping elements...

This is important.
It's possible to group your elements together and then transform them together.

By transformation, it means animate.

adding comments in javascript...

// should allow the addition of comments....

More info from Dashing D3.js

https://www.dashingd3js.com/dynamic-svg-coordinate-space

Three SVG Rectangle Example.

So all based on absolute data rather than calculated values but it seems to work:

Code below generates:

<!DOCTYPE html>
<html>
<head>
<title> Line representation of CD40</title>
<script src=http://d3js.org/d3.v3.min.js></script>
</head>

<body>
<h2> Three rectanges </h2>

<script>
var CD40 = [173,22,62];
var EC = 173
var TM = 22
var cyto=62
var fulllength = 257
var ecandtm = 195

var jsonRectangles = [
{ "x_axis": 10, "y_axis": 10, "height": EC, "width":20, "color" : "green" },
{ "x_axis": 10, "y_axis": EC, "height": TM, "width":20, "color" : "purple" },
{ "x_axis": 10, "y_axis": ecandtm, "height": cyto, "width":20, "color" : "red" }];

var svgContainer = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 500);

var rectangles = svgContainer.selectAll("rect")
.data(jsonRectangles)
.enter()
.append("rect");

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; });

</script>

</body>
</html>

Made a page that make three lines....

OK so I have created d3 page that makes three vertical red lines of different sizes.

This is good.

I have actually used rectanges rather than lines.

This is OK.

They look like this:

So they are not correctly positioned in the y-axis but it's progress....

Make a line

.append("line")
.attr("x1", 100)
.attr("y1", 10)
.attr("x2", 100)
.attr("y2", 300)
.attr("stroke-width", 10)
.attr("stroke", "black");

Makes a nice black line

Text editor and it works!

OK, so I downloaded TextWrangler as a text editor.

I typed in my script and it works.

It makes a heading and it makes a circle.

Excellent news.

Some of my problems are due to cutting and pasting text.

Not sure why but I will have to work it out in due course....

Dashing D3...

Working through this because I can't make my line!

Argghhh!!

Console in Developing tools for Chrome is useful.
Check that javascript is working and that d3 library has been loaded!