The art of blowing up protein

• If it is a figure with a half dozen areas to be coloured only once on a given dataset, it is obviously worth doing it manually.
• I should apologise that, whereas I use British English in normal speech, when I code I use American English. This is not mandated by a Python PIP, but it does keep everything slightly more consistent, even if it a tad weird. So please no hate mail.

1. Menu bar: Effects > Distort > Roughen... Smooth radiobox
2. Menu bar: Object > Expand Appearance (optional normally, but required for things like Clipping Mask)

1. Draw a rectangular triangle or rectangle (foreground) in front of a rectangle (background) bigger than the protein
2. Group the two (Right click: Group)
3. Right click: Arrange > Send to back
4. Select the two
5. Menu bar: Object > Clipping Mask > Make ...
6. Double click to enter object. Select border (formerly the front object)
7. Toolbar: Default fill and stroke, blank the fill
8. Exit object (button on ribbon under filename)

from IPython.display import display, SVG, Javascript, HTML

display(SVG('cartoon-01.svg'))

%%javascript
require.config({ 
     paths: { 
     d3: 'https://d3js.org/d3.v5.min'
}});

require(['d3'], function(d3) {
    window.d3 = d3;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js" integrity="sha512-9H86d5lhAwgf2/u29K4N5G6pZThNOojI8kMT4nT4NHvVR02cM85M06KJRQXkI0XgQWBpzQyIyr8LVomyu1AQdw==" crossorigin="anonymous"></script>

d3.select('#Layer_1')

d3.select('#Layer_1').selectAll("g").each(function(d, i) {...});

const text = d3.select(this).select('text').text();

let selector = d3.select(element);
let elementReturned = selector.node()

// Vanilla JS DOM element
let el = document.getElementById("someID");
// D3 selector
let sele = d3.select("#someID");

let color = d3.rgb(redInteger, greenInteger, blueInteger);

Further afield

Putting it all together

%%javascript

// function to add protein
window.UpdateColors = (data, blank) => {
    // ********************
    // make an object with name -> D3 element of g
    const items = {};
    d3.select('#Layer_1').selectAll("g").each(function(d, i) {
        const groupSele = d3.select(this);
        const textSele = groupSele.select('text');
        const text = textSele.size() ? textSele.text() : groupSele.attr('id'); 
        items[text] = d3.select(this);
    });
    // spy on object?
    //console.log(JSON.stringify(items));
    // ********************
    // change fill color
    const blankcolor = d3.rgb(blank.red, blank.green, blank.blue); // 255,255,255 is white
    Object.keys(items).forEach((itemName) => {
        let color = data[itemName] !== undefined ? d3.rgb(data[itemName].red, data[itemName].green, data[itemName].blue) : blankcolor;
        // select all that have a fill already.
        let shapes = items[itemName].selectAll('line,path,polyline,circle,ellipse,rect,polygon')
                                    .filter((d, i, nodes) => d3.select(nodes[i]).style('fill') !== 'none');
        // color all
        shapes.style('fill', color);
        // color first lighter
        //shapes.filter((d, i, nodes) => i === 0).style('fill', color.brighter(1));
        // color last darker
        shapes.filter((d, i, nodes) => i=== nodes.length - 1).style('fill', color.darker(1));
    })
}

%%javascript
  
  // 
window.downloadSVG = (idName) => {
    //get svg element.
    var svg = document.getElementById(idName);

    //get svg source.
    var serializer = new XMLSerializer();
    var source = serializer.serializeToString(svg);

    //add name spaces.
    if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
        source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
    }
    if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
        source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
    }

    //add xml declaration
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

    //convert svg source to URI data scheme.
    var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);

    //set url value to a element's href attribute.
    document.getElementById("downloadSVG").href = url;
    //you can download svg file by right click menu.
}

display(HTML('<a id="downloadSVG" onclick="window.downloadSVG('Layer_1')" download>download</a>'))

def update_colors(reds=pd.Series(dtype=int),
                  greens=pd.Series(dtype=int),
                  blues=pd.Series(dtype=int),
                  white_blank=True):
    
    normalise = lambda color_series : (color_series / color_series.max() * 255).astype(int) if str(color_series.max()) != 'nan' else {} 
    keys = {*reds.keys(), *greens.keys()}

    colors = pd.DataFrame(data=[[0, 0, 0]] * len(keys),
                         index=keys,
                         columns=['red', 'green', 'blue'])

    for gene_name, color in normalise(reds).items():
        colors.at[gene_name, 'red'] = color

    for gene_name, color in normalise(greens).items():
        colors.at[gene_name, 'green'] = color

    for gene_name, color in normalise(blues).items():
        colors.at[gene_name, 'blue'] = color
    
    if white_blank:
        blank = {"red": 255, "green": 255, "blue": 255}
        
        # this is suspicious
        r = 255 - colors.green - colors.blue
        g = 255 - colors.red - colors.blue
        b = 255 - colors.red - colors.green
        
        # kill negatives
        r[r < 0] = 0
        b[b < 0] = 0
        g[g < 0] = 0
        
        # assign
        colors.red = r
        colors.green = g
        colors.blue = b
    else:
        blank = {"red": 0, "green": 0, "blue": 0}
    display(Javascript(f'window.UpdateColors({colors.transpose().to_json()}, {blank});'))
    
    return colors
    

import pandas as pd

reds = pd.Series({'protein A': 10, 'protein B': 110, 'protein C': 1})

update_colors(reds=reds)