Tracking my work on myFavouriteProtein - a webpage to use BioJS components Part 1 - making the basic page.

I am using Aptana

New Project...
    Web Project...
        Name... myFavouriteProtein

So this creates a wide range of files and folders and a structure.

The first step I want to do is to copy in some of the bootstrap stuff so that I can create four areas ("divs") in which I can target the BioJs components.

I have moved in

• bootstrap.css
• bootstrap.css.map
• bootstrap.min.css
• bootstrap-theme.css
• bootstrap-theme.css.map
• bootstrap-theme.min.css
• jumbotron.css
• tipsy.css

I don't need all of this but I will sort that out a bit later, I think.

Copy in stuff from the index.html page of Electives2014.

Just cut and pasted the whole thing.
I am going to remove the unnecessary stuff now.
Only use the bootstrap.min.css so I can remove the bootstrap.css, I think.

Looking at the html, I also need to move across the javascript.
I have just moved in the bootstrap.min.js right now.

Lots of editing too.
I have removed the Facebook button.

I have to add "div id=something" - this is a key step to getting the right things into the right pages.

OK, so basic format of the webpage is made.:

Now: let's get in some BioJS stuff.....

Shapes and strokes in Photoshop

Learned something interesting in Photoshop.
I wanted to add a red circle to my images.

To change the thickness of the circle:
Go to Layer...
             Layer Style....
                    Stroke
This allows you to alter the thickness of the lines of the shape.

Good learning point!

Back to D3 protein viewer...

So I think I have finished all the stuff for the Electives web pages and I want to get back to the D3 protein viewer.
I don't think anybody else is doing anything similar so it still feels like a good place to put time.

I had to pull the stuff from Git and merge all the files and do some reorganising.

I've learned a lot over the last few months but I'm not sure how close to solving these problems I really am

If I think back to Ian's comments, I think jQuery might help.

There feels like there is a lot to do.

First step today:
Create an index file and put the molecule drawing bits into separate javascript files.

This feels like a good thing to do.

Drawing some more graphs...

Attaching data
   Should you attach the data?
   Seems not - read more here:
   http://www.r-bloggers.com/to-attach-or-not-attach-that-is-the-question/

Some fundamentals:

• http://www.statmethods.net/input/importingdata.html
• Bar plots: http://www.statmethods.net/graphs/bar.html
• Axes and plots: http://www.statmethods.net/advgraphs/axes.html

Font size: - USEFUL

• http://stackoverflow.com/questions/4241798/how-to-increase-font-size-in-a-plot-in-r

Wrapping text labels: - I didn't use. 

• http://stackoverflow.com/questions/20241065/r-barplot-wrapping-long-text-labels

Rotating text labels (by adding text) - USEFUL

• http://jnlnet.wordpress.com/2009/05/20/x-axis-labels-on-a-45-degree-angle-using-r/

I have started making some notes. 

Expanding the color palette - couldn't get to work :-(

• http://novyden.blogspot.co.uk/2013/09/how-to-expand-color-palette-with-ggplot.html
• http://cran.r-project.org/web/packages/RColorBrewer/RColorBrewer.pdf

What to do with javascript disabled...

So I think I should have static images in this case.
Or maybe a whole new page?

As possible solution illustrated here:

http://www.mkyong.com/javascript/display-different-content-if-javascript-is-disabled/

Inkscape

Inkscape is an open source SVG package.
It is easy to download and seems quite easy to use at least from a basic point of view.
I think time getting to know this is well spent.

I would like to make a zoomable cell with some scale associated with it.

I think SVG is probably the right format to do this with.

I have just worked through the basic tutorial:
http://inkscape.org/doc/basic/tutorial-basic.html

I will probably have to do it again to be sure that I can use it but it's a good start.

Within the tutorials is also the possibility of bitmap tracing.
I am not sure exactly what this is but it looks interesting.
http://inkscape.org/doc/tracing/tutorial-tracing.html
This might be very useful for turning electron micrographs into zoomable images.

Refactoring troubles...

A bit of a challenging day.
Too much time spent coding.


Some errors still present:
The graph on the advice page has an error because of the number format.
Not sure how to change this but I will have to learn.

I spend some time this morning trying to refactor my code so that I only had one map drawing function.
However, I couldn't really make it work.

I tried to put the code into two different functions but I just ended up with the map at the top and the circles below it.

Then I tried to understand why the graph on the advice page wasn't working.
I played around a lot with numbers and the like.

In the end I realised that it was do to with a little function called type

"

   function type(d) {

      d.low_numbers = +d.low_numbers;

            return d;

    }

"

This was copy and pasted from:

the bar chart making code for example:

http://bl.ocks.org/mbostock/7341714

The comment says that the role of this function is to "coerce to number"

However, it only coerces the data from low_number not from all the lists. 

This is why the low_numbers data works but the other doesn't. 

I don't know how to coerce the data generally because I still don't understand enough of how Ian uses the Methods in the graphresponsive.js script. 

It's a bit annoying but hey it's all learning. 

On a positive note, I did some refactoring and organising on the CSS side. This will help. 

Also, I made 15 commits to GitHub using a combination of the Terminal and Aptana. 

All in all that builds confidence in my coding abilities. 

Step by step!