JSXGraph
JSXGraph share

Share

Emulate color blindness
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/emulate-color-blindness" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Emulate color blindness" 
    allowfullscreen
></iframe>
This code has to 
<button id="protanopia" onClick="emulateColorblindness('protanopia')">Emulate Protanopia</button>
<button id="deuteranopia" onClick="emulateColorblindness('deuteranopia')">Emulate Deuteranopia</button>
<button id="tritanopia" onClick="emulateColorblindness('tritanopia')">Emulate Tritanopia</button>
<button id="original" onClick="emulateColorblindness()">Show original</button>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-1.5, 2, 1.5, -1],
        keepaspectratio: true
    });
    
    var cerise = {
            strokeColor: '#901B77',
            fillColor: '#CA147A'
        },
    
        grass = {
            strokeColor: '#009256',
            fillColor: '#65B72E',
            visible: true,
            withLabel: true
        },
    
        perpendicular = {
            strokeColor: 'black',
            dash: 1,
            strokeWidth: 1,
            point: JXG.deepCopy(cerise, {
                visible: true,
                withLabel: true
            })
        },
    
        median = {
            strokeWidth: 1,
            strokeColor: '#333333',
            dash: 2
        },
    
        A = board.create('point', [1, 0], cerise),
        B = board.create('point', [-1, 0], cerise),
        C = board.create('point', [0.2, 1.5], cerise),
        pol = board.create('polygon', [A, B, C], {
            fillColor: '#FFFF00',
            lines: {
                strokeWidth: 2,
                strokeColor: '#009256'
            }
        });
    
    var pABC, pBCA, pCAB, i1;
    perpendicular.point.name = 'H_c';
    pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
    perpendicular.point.name = 'H_a';
    pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
    perpendicular.point.name = 'H_b';
    pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
    grass.name = 'H';
    i1 = board.create('intersection', [pABC, pCAB, 0], grass);
    
    var mAB, mBC, mCA;
    cerise.name = 'M_c';
    mAB = board.create('midpoint', [A, B], cerise);
    cerise.name = 'M_a';
    mBC = board.create('midpoint', [B, C], cerise);
    cerise.name = 'M_b';
    mCA = board.create('midpoint', [C, A], cerise);
    
    var ma, mb, mc, i2;
    ma = board.create('segment', [mBC, A], median);
    mb = board.create('segment', [mCA, B], median);
    mc = board.create('segment', [mAB, C], median);
    grass.name = 'S';
    i2 = board.create('intersection', [ma, mc, 0], grass);
    
    var c;
    grass.name = 'U';
    c = board.create('circumcircle', [A, B, C], {
        strokeColor: '#000000',
        dash: 3,
        strokeWidth: 1,
        point: grass
    });
    
    var euler;
    euler = board.create('line', [i1, i2], {
        strokeWidth: 2,
        strokeColor: '#901B77'
    });
    
    var emulateColorblindness = function(d) {
        board.emulateColorblindness(d);
    };
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-1.5, 2, 1.5, -1],
    keepaspectratio: true
});

var cerise = {
        strokeColor: '#901B77',
        fillColor: '#CA147A'
    },

    grass = {
        strokeColor: '#009256',
        fillColor: '#65B72E',
        visible: true,
        withLabel: true
    },

    perpendicular = {
        strokeColor: 'black',
        dash: 1,
        strokeWidth: 1,
        point: JXG.deepCopy(cerise, {
            visible: true,
            withLabel: true
        })
    },

    median = {
        strokeWidth: 1,
        strokeColor: '#333333',
        dash: 2
    },

    A = board.create('point', [1, 0], cerise),
    B = board.create('point', [-1, 0], cerise),
    C = board.create('point', [0.2, 1.5], cerise),
    pol = board.create('polygon', [A, B, C], {
        fillColor: '#FFFF00',
        lines: {
            strokeWidth: 2,
            strokeColor: '#009256'
        }
    });

var pABC, pBCA, pCAB, i1;
perpendicular.point.name = 'H_c';
pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
perpendicular.point.name = 'H_a';
pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
perpendicular.point.name = 'H_b';
pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
grass.name = 'H';
i1 = board.create('intersection', [pABC, pCAB, 0], grass);

var mAB, mBC, mCA;
cerise.name = 'M_c';
mAB = board.create('midpoint', [A, B], cerise);
cerise.name = 'M_a';
mBC = board.create('midpoint', [B, C], cerise);
cerise.name = 'M_b';
mCA = board.create('midpoint', [C, A], cerise);

var ma, mb, mc, i2;
ma = board.create('segment', [mBC, A], median);
mb = board.create('segment', [mCA, B], median);
mc = board.create('segment', [mAB, C], median);
grass.name = 'S';
i2 = board.create('intersection', [ma, mc, 0], grass);

var c;
grass.name = 'U';
c = board.create('circumcircle', [A, B, C], {
    strokeColor: '#000000',
    dash: 3,
    strokeWidth: 1,
    point: grass
});

var euler;
euler = board.create('line', [i1, i2], {
    strokeWidth: 2,
    strokeColor: '#901B77'
});

var emulateColorblindness = function(d) {
    board.emulateColorblindness(d);
};

Emulate color blindness

Technical
JSXGraph can give a rough impression about how color blind people see your work. It is possible to emulate three types of color vision deficiency: **Protanopia**, **Deuteranopia**, and **Tritanopia**. Consider this geometric construction from the Euler line example. 
<button id="protanopia" onClick="emulateColorblindness('protanopia')">Emulate Protanopia</button>
<button id="deuteranopia" onClick="emulateColorblindness('deuteranopia')">Emulate Deuteranopia</button>
<button id="tritanopia" onClick="emulateColorblindness('tritanopia')">Emulate Tritanopia</button>
<button id="original" onClick="emulateColorblindness()">Show original</button>
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-1.5, 2, 1.5, -1],
    keepaspectratio: true
});

var cerise = {
        strokeColor: '#901B77',
        fillColor: '#CA147A'
    },

    grass = {
        strokeColor: '#009256',
        fillColor: '#65B72E',
        visible: true,
        withLabel: true
    },

    perpendicular = {
        strokeColor: 'black',
        dash: 1,
        strokeWidth: 1,
        point: JXG.deepCopy(cerise, {
            visible: true,
            withLabel: true
        })
    },

    median = {
        strokeWidth: 1,
        strokeColor: '#333333',
        dash: 2
    },

    A = board.create('point', [1, 0], cerise),
    B = board.create('point', [-1, 0], cerise),
    C = board.create('point', [0.2, 1.5], cerise),
    pol = board.create('polygon', [A, B, C], {
        fillColor: '#FFFF00',
        lines: {
            strokeWidth: 2,
            strokeColor: '#009256'
        }
    });

var pABC, pBCA, pCAB, i1;
perpendicular.point.name = 'H_c';
pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
perpendicular.point.name = 'H_a';
pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
perpendicular.point.name = 'H_b';
pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
grass.name = 'H';
i1 = board.create('intersection', [pABC, pCAB, 0], grass);

var mAB, mBC, mCA;
cerise.name = 'M_c';
mAB = board.create('midpoint', [A, B], cerise);
cerise.name = 'M_a';
mBC = board.create('midpoint', [B, C], cerise);
cerise.name = 'M_b';
mCA = board.create('midpoint', [C, A], cerise);

var ma, mb, mc, i2;
ma = board.create('segment', [mBC, A], median);
mb = board.create('segment', [mCA, B], median);
mc = board.create('segment', [mAB, C], median);
grass.name = 'S';
i2 = board.create('intersection', [ma, mc, 0], grass);

var c;
grass.name = 'U';
c = board.create('circumcircle', [A, B, C], {
    strokeColor: '#000000',
    dash: 3,
    strokeWidth: 1,
    point: grass
});

var euler;
euler = board.create('line', [i1, i2], {
    strokeWidth: 2,
    strokeColor: '#901B77'
});

var emulateColorblindness = function(d) {
    board.emulateColorblindness(d);
};

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.