Skip to main content
O
ofutip2001
Participant
March 31, 2024
Answered

Heat map in a box to represent level of disorder in a protein.

  • March 31, 2024
  • 1 reply
  • 538 views

Hello everyone! I would appreciate any help you can offer! I have different proteins of different lengths, and I want to make representations of the level of disorder along the amino acid positions of the protein. I have tables with the values (from 0 to 1) of disorder in order for each aminoacid. For example, if I had a protein with four aminoacids with the first two being very disordered and the last two being not disordered, my set of values for that protein would look like [0.98, 0.99, 0.06, 0.07]. I want a script that, when I input this set, would produce a box with a width in pixels equal to the number of values (4 pixels for a protein of 4 aminoacids), and each column of pixels to be colored depending on the value (e.g. white if the value is low and black if the value is high, with greys in between), creating in this way a type of heatmap box representation of the protein where the color indicates the level of disorder. This is what I have so far but it isn't working. I don't know if I should approach this in a different way? I am new to JavaScript and Illustrator and don't know how to go about it, thank you in advance!

 

 

 

 

    This topic has been closed for replies.
    Correct answer femkeblanco
    function drawHeatmapBox (values) {
    var doc = app.activeDocument;

    // box
    var boxWidth = values.length;
    var boxHeight = 100;
    var rect = doc.pathItems.rectangle(- 100, 100, boxWidth, boxHeight);
    rect.stroked = true;
    rect.strokeWidth = 1;

    // columns
    for (var i = 0; i < values.length; i++) {
        var color = new GrayColor();
        color.gray = values[i] * 100;
        var column = doc.pathItems.rectangle(- 100, 100 + i, 1, boxHeight);
        column.stroked = false;
        column.fillColor = color;
    }
}

var values = [0.98, 0.99, 0.06, 0.07];
drawHeatmapBox (values)

    1 reply

    femkeblanco
    femkeblancoCorrect answer
    Legend
    March 31, 2024
    function drawHeatmapBox (values) {
    var doc = app.activeDocument;

    // box
    var boxWidth = values.length;
    var boxHeight = 100;
    var rect = doc.pathItems.rectangle(- 100, 100, boxWidth, boxHeight);
    rect.stroked = true;
    rect.strokeWidth = 1;

    // columns
    for (var i = 0; i < values.length; i++) {
        var color = new GrayColor();
        color.gray = values[i] * 100;
        var column = doc.pathItems.rectangle(- 100, 100 + i, 1, boxHeight);
        column.stroked = false;
        column.fillColor = color;
    }
}

var values = [0.98, 0.99, 0.06, 0.07];
drawHeatmapBox (values)
      O
      ofutip2001Author
      Participant
      March 31, 2024

      Thank you so much! You really helped me! 🙂

        Firefly Community Gallery
        Adobe Firefly

        Remix with Firefly Community Gallery

        Thousands of free creations to fall in love with and remix in Firefly.

        Explore now
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices