### Example PedigreeJS Initialization with Options

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

Illustrative JavaScript code showing how to initialize pedigreejs with various configuration options. This example demonstrates setting the 'dataset' and 'store_type'.

```javascript
// Example initialization with options
var opts = {
  "dataset": [
    // ... pedigree data ...
  ],
  "store_type": "session" // or "local" or "array"
};
var pedigree = pedigreejs_pedigreejs(opts);
```

--------------------------------

### Setup and Run Jasmine Tests with PhantomJS

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/spec/README.md

This script sets up a Python virtual environment, installs Jasmine, clones a test reporter repository, links necessary directories, and executes Jasmine tests using PhantomJS. It prepares the environment for CI integration.

```bash
PYENV_HOME=$WORKSPACE/pyenv/

# Delete previously built virtualenv
if [ -d $PYENV_HOME ]; then
    rm -rf $PYENV_HOME
fi

# Create virtualenv and install necessary packages
virtualenv --no-site-packages $PYENV_HOME
. $PYENV_HOME/bin/activate

pip install jasmine

rm -rf jasmine-reporters
git clone https://github.com/larrymyers/jasmine-reporters
cd jasmine-reporters
ln -s ../spec boadicea_spec
ln -s ../boadicea/local_apps/fh/static/js .
ln -s $PYENV_HOME/lib/python3.4/site-packages/jasmine_core jasmine-core
cp boadicea_spec/junit_xml_reporter.html examples/junit_xml_reporter_test.html
bin/phantomjs.runner.sh examples/junit_xml_reporter_test.html
```

--------------------------------

### Install and Build pedigreejs

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/README.md

Installs project dependencies and builds the ECMAScript 5 bundle using Rollup. Run these commands in your project directory.

```bash
npm install
npm run build
```

--------------------------------

### Define Pedigree Dataset Structure

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

Example of a dataset structure for a pedigree, defining individuals with their names, sex, parentage, and specific disease markers. This format is used to populate the pedigree visualization.

```json
[ {"name": "m21", "sex": "M", "top_level": true},
  {"name": "f21", "sex": "F", "top_level": true},
  {"name": "ch1", "sex": "F", "mother": "f21", "father": "m21", "breast_cancer":  true, "proband": true} ]
```

--------------------------------

### Retrieve Current Pedigree Data

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

JavaScript function to get the current pedigree data in JSON format. Requires the 'opts' object used for initialization.

```javascript
var pedigree = pedigreejs_pedcache.current(opts);
```

--------------------------------

### Getting SVG Dimensions

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Functions to calculate the width and height of the SVG canvas based on window dimensions and responsive design breakpoints.

```javascript
function get_svg_wid() {
  var w = window.innerWidth;
  var m = 140;
  return (w >= 768 ? (w*8/12 - m) : w- m);
}

function get_svg_hgt() {
  var w = window.innerWidth;
  return (w >= 768 ? 525 : 450);
}
```

--------------------------------

### Initializing Pedigree Data and Options

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Sets up the initial dataset and configuration options for the PedigreeJS library, including target elements and display settings.

```javascript
let opts;

$( document ).ready(function() {
  ////////////////////
  var dataset = [
    {"name": "m11", "sex": "M", "top_level": true},
    {"name": "f11", "display_name": "Jane", "sex": "F", "status": 1, "top_level": true, "breast_cancer_diagnosis_age":67, "ovarian_cancer_diagnosis_age":63},
    {"name": "m12", "sex": "M", "top_level": true},
    {"name": "f12", "sex": "F", "top_level": true, "breast_cancer_diagnosis_age":55},
    {"name": "m21", "sex": "M", "mother": "f11", "father": "m11", "age": 56},
    {"name": "f21", "sex": "F", "mother": "f12", "father": "m12", "breast_cancer_diagnosis_age":55, "breast_cancer2_diagnosis_age": 60, "ovarian_cancer_diagnosis_age":58, "age": 63},
    {"name": "ch1", "display_name": "Ana", "sex": "F", "mother": "f21", "father": "m21", "proband": true, "age": 25, "yob": 1996}
  ];

  $( "#pedigrees" ).append( $( "<div id='pedigree_history'></div>" ) );
  $( "#pedigrees" ).append( $( "<div id='pedigree'></div>" ) );

  opts = {
    'targetDiv': 'pedigree',
    'btn_target': 'pedigree_history',
    // 'nodeclick': pedigree_form.nodeclick,
    'width': get_svg_wid(),
    'height': get_svg_hgt(),
    // 'symbol_size': 35,
    'edit': true,
    'zoomSrc': ['button'],
    'zoomIn': .05,
    'zoomOut': 1.5,
    'age_suffix': 'y',
    'optionalLabels': [
      ['brca1_gene_test', 'brca2_gene_test', 'palb2_gene_test', 'chek2_gene_test', 'atm_gene_test']
    ],
    'labels': [
      ['age', 'yob'],
      ['brca1_gene_test', 'brca2_gene_test', 'palb2_gene_test', 'chek2_gene_test', 'atm_gene_test'],
      ['bard1_gene_test', 'rad51d_gene_test', 'rad51c_gene_test', 'brip1_gene_test', 'hoxb13_gene_test'],
      ['er_bc_pathology', 'pr_bc_pathology', 'her2_bc_pathology', 'ck14_bc_pathology', 'ck56_bc_pathology']
    ],
    'DEBUG': (urlParam('debug') === null ? false : true)
  };

  var local_dataset = pedcache.current(opts);
  if (local_dataset !== undefined && local_dataset !== null) {
    opts.dataset = local_dataset;
  } else {
    opts.dataset = dataset;
  }

  opts = pedigree.build(opts);
});
```

--------------------------------

### Importing Libraries

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Demonstrates how to import necessary libraries like jQuery, D3, and PedigreeJS modules using ES modules.

```javascript
import * as pedigree from '/es/pedigree.js';
import * as pedcache from '/es/pedcache.js';
import * as pedigree_util from '/es/utils.js';
import {urlParam, isIE} from '/es/utils.js';
import * as canrisk_file from '/es/canrisk_file.js';
```

--------------------------------

### Basic HTML Structure and Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

CSS for header, buttons, and body layout, including responsive adjustments for larger screens.

```css
.header { background-color:#DDD1C1; margin-right: auto; margin-left: auto; margin-bottom: 20px; }
.btn.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; text-decoration: none; }
@media screen and (min-width: 768px) {
  .header { padding-top: 20px; padding-bottom: 20px; }
  .header h1 { font-size: 63px; font-weight: 500; line-height: 1.1; margin: 10px 0; }
  .header h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; }
}
```

--------------------------------

### Pedigree Data Validation Errors

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

Example of error messages returned by PedigreeJS during data validation. These indicate issues like non-unique names or incorrect parent sex assignments.

```text
NON-UNIQUE NAME: f21
MOTHERS SEX NOT FEMALE: M
MISSING FATHER FOR ch1
```

--------------------------------

### Initialize PedigreeJS with Options

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/demo.html

Sets up the PedigreeJS chart with specified options, including target div, history button, storage type, dimensions, symbol size, edit mode, and disease configurations. It also loads existing datasets from session storage or local storage if available.

```javascript
function capitaliseFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); }
var DEFAULT_DISEASES = [
  {'type': 'breast_cancer', 'colour': '#F68F35'},
  {'type': 'breast_cancer2', 'colour': 'pink'},
  {'type': 'ovarian_cancer', 'colour': '#4DAA4D'},
  {'type': 'pancreatic_cancer', 'colour': '#4289BA'},
  {'type': 'prostate_cancer', 'colour': '#D5494A'}
];

$( document ).ready(function() {
  var parent_width = $('#pedigrees').parent().width();
  var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
  var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);
  var opts = {
    'targetDiv': 'pedigrees',
    'btn_target': 'demo_history',
    'store_type': 'session',
    'width': svg_width,
    'height': 500,
    'symbol_size': 35,
    'edit': true,
    'diseases': $.extend(true, [], DEFAULT_DISEASES),
    'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
  };
  $('#opts').append(JSON.stringify(opts, null, 4));

  var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
  if (local_dataset !== undefined && local_dataset !== null) {
    opts.dataset = local_dataset;
  }

  var dis = localStorage.getItem('diseases');
  if(dis !== undefined && dis !== null){
    opts.diseases = JSON.parse(dis);
  }

  opts= pedigreejs.pedigreejs.build(opts);

  $('#demo_history').css('max-width', svg_width);
  $('#demo_history').css('margin', 'auto');
});
```

--------------------------------

### Initialize PedigreeJS and Implement Search

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example8.html

This snippet initializes the PedigreeJS library with a dataset and configuration options, then defines a function to search through the pedigree data based on user input. It handles displaying search results or a 'no matches' message.

```javascript
$( document ).ready(function() {
    var parent_width = $('#pedigrees').parent().width();
    var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
    var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);
    var dataset = [
        {"name": "m11", "display_name": "John", "sex": "M", "diabetes_diagnosis_age": 55, "top_level": true},
        {"name": "f11", "display_name": "Jane", "sex": "F", "status": 1, "top_level": true},
        {"name": "m12", "display_name": "Jack", "sex": "M", "top_level": true},
        {"name": "f12", "display_name": "Jill", "sex": "F", "top_level": true},
        {"name": "m21", "display_name": "Jim", "sex": "M", "mother": "f11", "father": "m11", "age": 56},
        {"name": "f21", "display_name": "Jan", "sex": "F", "mother": "f12", "father": "m12", "age": 63},
        {"name": "ch1", "display_name": "Ana", "sex": "F", "mother": "f21", "father": "m21", "proband": true, "age": 25}
    ];
    var opts = {
        'targetDiv': 'pedigrees',
        'btn_target': 'history_ex8',
        'store_type': 'session',
        'width': svg_width,
        'height': 500,
        'symbol_size': 35,
        'edit': true,
        'diseases': [
            {'type': 'diabetes', 'colour': '#F68F35'}
        ],
        'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
    };
    //$('#opts').append(JSON.stringify(opts, null, 4));
    var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
    if (local_dataset !== undefined && local_dataset !== null) {
        opts.dataset = local_dataset;
    } else {
        opts.dataset = dataset;
    }
    opts= pedigreejs.pedigreejs.build(opts);
    $('#history_ex8').css('max-width', svg_width);
    $('#history_ex8').css('margin', 'auto');

    function search_pedigree_data(search) {
        var pedigree = pedigreejs.pedigreejs_pedcache.current(opts); // current pedigree data
        var html = "";
        for(var p=0; p<pedigree.length; p++){
            var found = false;
            var attr = '';
            $.each(pedigree[p], function(key, value) {
                if(search == key || search == value || key.indexOf(search) !== -1 || (""+value).indexOf(search) !== -1) {
                    found = true;
                    attr += "<strong><font color='red'>"+ key + ":" + value + "; " + "</font></strong>";
                } else {
                    attr += key + ":" + value + "; ";
                }
            });
            if(found) {
                html += attr + "<br>";
            }
        }
        if(html !== '') {
            $('#search_result').html(html);
        } else {
            $('#search_result').html("No matches");
        }
    }

    $('button').click(function() {
        search_pedigree_data($('input[type="text"]').val());
    });

    $('input[type="text"]').keypress(function(e){
        if(e.which == 13) // enter key pressed
            search_pedigree_data($('input[type="text"]').val());
    });
});
```

--------------------------------

### Responsive Header Styles

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

CSS for header padding and font sizes that adjust based on screen width.

```css
@media screen and (min-width: 768px) {
  .header { padding-top: 20px; padding-bottom: 20px; }
  .header h1 { font-size: 63px; font-weight: 500; line-height: 1.1; margin: 10px 0; }
  .header h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; }
}
```

--------------------------------

### Button and Options Panel Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

CSS for general buttons and a styled options panel with overflow handling.

```css
.btn { color: #333; background-color: #fff; border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; margin-left: 5px; border-radius: 4px; }
.options { background-color: #F5F5F5; padding: 10px; border: 1px solid #ccc; font-size: 13px; line-height: 1.42857143; overflow: auto;word-wrap: normal; border-radius: 4px; }
```

--------------------------------

### General Body and Container Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

CSS for body margins, font, and container width/centering.

```css
body { margin: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
.container { width: 90%; max-width: 1140px; margin-right: auto; margin-left: auto; }
```

--------------------------------

### PedigreeJS Initialization with Local Storage and Custom Colors

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example2.html

This snippet initializes PedigreeJS with a dataset, custom colors, and enables local storage for data persistence. It dynamically adjusts SVG width based on screen size and appends configuration options to a div.

```javascript
$( document ).ready(function() {
    var parent_width = $('#ped').parent().width();
    var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
    var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);
    var dataset = [
        {"famid":"FAM1","name":"m21","sex":"M","status":"0","father":"iHTp","mother":"DVEO","age":"67","yob":"1950","level":1},
        {"famid":"FAM1","name":"ch1","sex":"F","status":"0","proband":true,"father":"m21","mother":"f21","age":"41","yob":"1976"},
        {"famid":"FAM1","name":"f21","sex":"F","status":"0","father":"AhyZ","mother":"WJaM","age":"68","yob":"1949","breast_cancer_diagnosis_age":"67","ovarian_cancer_diagnosis_age":"63"},
        {"famid":"FAM1","name":"lXPO","sex":"F","status":"0","father":"UzQw","mother":"f21","age":"50","yob":"1967","breast_cancer_diagnosis_age":"49"},
        {"famid":"FAM1","name":"UzQw","sex":"M","status":"0","age":"72","yob":"1945","level":1,"noparents":true,"mother":"WJaM","father":"AhyZ"},
        {"famid":"FAM1","name":"iHTp","sex":"M","status":"1","age":"75","yob":"1955","breast_cancer_diagnosis_age":"72","breast_cancer2_diagnosis_age":"73","level":2,"top_level":true},
        {"famid":"FAM1","name":"DVEO","sex":"F","status":"0","age":"87","yob":"1930","level":2,"top_level":true},
        {"famid":"FAM1","name":"AhyZ","sex":"M","status":"0","age":"88","yob":"1929","level":2,"top_level":true},
        {"famid":"FAM1","name":"WJaM","sex":"F","status":"0","age":"85","yob":"1932","breast_cancer_diagnosis_age":"55","pancreatic_cancer_diagnosis_age":"53","level":2,"top_level":true}
    ];
    var opts = {
        'targetDiv': 'ped',
        'btn_target': 'history_ex2',
        'store_type': 'local',
        'width': svg_width,
        'height': 500,
        'symbol_size': 35,
        'edit': true,
        'background': '#d3d3d3',
        'node_background': '#fff',
        'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
    };
    $('#opts').append(JSON.stringify(opts, null, 4));
    var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
    if (local_dataset !== undefined && local_dataset !== null) {
        opts.dataset = local_dataset;
    } else {
        opts.dataset = dataset;
    }
    opts= pedigreejs.pedigreejs.build(opts);
    $('#history_ex2').css('max-width', svg_width);
    $('#history_ex2').css('margin', 'auto');
});
```

--------------------------------

### PedigreeJS Initialization with Consanguineous Partners and Custom Labels

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example5.html

Initializes PedigreeJS with a dataset that includes consanguineous partners and configures custom labels to display first and last names. The options are dynamically generated and appended to an element with the ID 'opts'.

```javascript
$( document ).ready(function() {
    var parent_width = $('#pedigrees').parent().width();
    var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
    var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);
    var dataset = [
        {"name":"m12","first_name":"Jack","last_name":"Smith","sex":"M","top_level":true},
        {"name":"f12","first_name":"Jill","last_name":"Smith","sex":"F","top_level":true},
        {"name":"m11","first_name":"John","last_name":"Brown","sex":"M","diabetes":true,"top_level":true},
        {"name":"f11","first_name":"Jane","last_name":"Brown","sex":"F","status":1,"top_level":true},
        {"name":"m22","first_name":"Alan","last_name":"Brown","sex":"M","mother":"f12","father":"m12"},
        {"name":"f21","first_name":"Jan","last_name":"Brown","sex":"F","mother":"f12","father":"m12","age":63},
        {"name":"m21","first_name":"Jim","last_name":"Brown","sex":"M","mother":"f11","father":"m11","diabetes":true,"age":56},
        {"name":"m31","first_name":"Mark","last_name":"Brown","sex":"M","mother":"f22","father":"m22"},
        {"name":"f31","first_name":"Ana","last_name":"Brown","sex":"F","mother":"f21","father":"m21","age":25},
        {"name":"m41","first_name":"Mary","last_name":"Brown","sex":"F","mother":"f31","father":"m31"},
        {"name":"f22","first_name":"Joy","last_name":"Brown","sex":"F","mother":"f12","father":"m12","noparents":true}
    ]
    var opts = {
        'targetDiv': 'pedigrees',
        'btn_target': 'history_ex5',
        'width': svg_width,
        'height': 500,
        'symbol_size': 35,
        'edit': true,
        'diseases': [
            {'type': 'diabetes', 'colour': '#F68F35'},
        ],
        labels: ['name', 'first_name', 'last_name'],
        'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
    };
    $('#opts').append(JSON.stringify(opts, null, 4));
    var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
    if (local_dataset !== undefined && local_dataset !== null) {
        opts.dataset = local_dataset;
    } else {
        opts.dataset = dataset;
    }
    opts= pedigreejs.pedigreejs.build(opts);
    $('#history_ex5').css('max-width', svg_width);
    $('#history_ex5').css('margin', 'auto');
});
```

--------------------------------

### PedigreeJS Initialization with Dataset

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

Initializes PedigreeJS with a dataset, including options for target div, history, dimensions, and editing capabilities. It also handles loading cached data or using a default dataset.

```javascript
var dataset = [
  {"name": "m11", "sex": "M", "top_level": true},
  {"name": "f11", "display_name": "Jane", "sex": "F", "status": 1, "top_level": true, "breast_cancer_diagnosis_age":67, "ovarian_cancer_diagnosis_age":63},
  {"name": "m12", "sex": "M", "top_level": true},
  {"name": "f12", "sex": "F", "top_level": true, "breast_cancer_diagnosis_age":55},
  {"name": "m21", "sex": "M", "mother": "f11", "father": "m11", "age": 56},
  {"name": "f21", "sex": "F", "mother": "f12", "father": "m12", "breast_cancer_diagnosis_age":55, "breast_cancer2_diagnosis_age": 60, "ovarian_cancer_diagnosis_age":58, "age": 63},
  {"name": "ch1", "display_name": "Ana", "sex": "F", "mother": "f21", "father": "m21", "proband": true, "age": 25, "yob": 1996}
];
$( "#pedigrees" ).append( $( "<div id='pedigree_history'></div>" ) );
$( "#pedigrees" ).append( $( "<div id='pedigree'></div>" ) );
var opts = {
  'targetDiv': 'pedigree',
  'btn_target': 'pedigree_history',
  // 'nodeclick': pedigree_form.nodeclick,
  'width': ($(window).width() > 540 ? 500 : $(window).width()- 30),
  'height': 350,
  'symbol_size': 30,
  'edit': true,
  'zoomIn': .5,
  'zoomOut': 1.5,
  'font_size': '0.75em',
  'age_suffix': 'yr',
  'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
};
var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
if (local_dataset !== undefined && local_dataset !== null) {
  opts.dataset = local_dataset;
} else {
  opts.dataset = dataset;
}
opts = pedigreejs.pedigreejs.build(opts);
```

--------------------------------

### Show Widgets

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Controls the visibility of UI widgets. Defaults to true.

```javascript
showWidgets: true
```

--------------------------------

### PedigreeJS Initialization with Consanguineous Partners

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example9.html

Initializes a PedigreeJS chart with sample data that includes consanguineous partners. The options object configures the target div, button target, dimensions, symbol size, edit mode, and debug flag. It also loads existing data from cache or uses the provided dataset.

```javascript
var dataset = [
  {"name":"m11","sex":"M","top_level":true},
  {"name":"f11","display_name":"Jane","sex":"F","status":1,"top_level":true},
  {"name":"m12","sex":"M","top_level":true},
  {"name":"f12","sex":"F","top_level":true,"breast_cancer_diagnosis_age":55},
  {"name":"WCd", "display_name":"L1", "sex":"M","mother":"f11","father":"m11"},
  {"name":"m21","sex":"M","mother":"f11","father":"m11","age":56},
  {"name":"f21","sex":"F","mother":"f12","father":"m12","age":63},
  {"name":"ch2","display_name":"L2","sex":"F","mother":"f21","father":"m21"},
  {"name":"WRq","display_name":"L3", "sex":"M","mother":"ch2","father":"WCd"},
  {"name":"ch1","sex":"F","mother":"f21","father":"m21","proband":true,"age":25}
];
var opts = {
  'targetDiv': 'pedigrees',
  'btn_target': 'history_ex9',
  'width': svg_width,
  'height': 500,
  'symbol_size': 30,
  'edit': true,
  'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
};
$('#opts').append(JSON.stringify(opts, null, 4));
var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
if (local_dataset !== undefined && local_dataset !== null) {
  opts.dataset = local_dataset;
} else {
  opts.dataset = dataset;
}
opts= pedigreejs.pedigreejs.build(opts);
$('#history_ex9').css('max-width', svg_width);
$('#history_ex9').css('margin', 'auto');
```

--------------------------------

### Configure PedigreeJS Options

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

Set up default options for PedigreeJS, including target divs for the pedigree and buttons, dimensions, symbol size, store type, disease colors, labels, fonts, and debug mode. This configuration is then used to load the dataset.

```javascript
var opts = {
		'targetDiv': 'pedigree',
		'btn_target': 'pedigree_history',
		'width': 450,
		'height': 320,
		'symbol_size': 35,
		'store_type': 'array',
		'diseases': [
			{'type': 'breast_cancer', 'colour': '#F68F35'},
			{'type': 'ovarian_cancer', 'colour': '#4DAA4D'},
			{'type': 'pancreatic_cancer', 'colour': '#4289BA'},
			{'type': 'prostate_cancer', 'colour': '#D5494A'}
		],
		labels: ['age', 'yob'],
		font_size: '.75em',
		font_family: 'Helvetica',
		font_weight: 700,
		'DEBUG': (pedigree_util.urlParam('debug') === null ? false : true)
	};
	var local_dataset = pedcache.current(opts);
	if (local_dataset !== undefined && local_dataset !== null) {
		opts.dataset = local_dataset;
	} else {
		opts.dataset = dataset;
	}
	opts= ptree.build(opts);
```

--------------------------------

### IE Compatibility Script Loading

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

JavaScript to conditionally load the canvg library for IE browsers.

```javascript
if(pedigreejs.pedigreejs_utils.isIE()) {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "https://cdn.jsdelivr.net/npm/canvg@3.0.7/lib/umd.js";
  $("head").append(s);
}
```

--------------------------------

### Options Panel Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

CSS for styling an options panel with background color, padding, border, and overflow handling.

```css
.options { background-color: #F5F5F5; padding: 10px; border: 1px solid #ccc; font-size: 13px; line-height: 1.42857143; overflow: auto;word-wrap: normal; border-radius: 4px; }
```

--------------------------------

### Container Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

CSS for a centered container with a maximum width.

```css
.container { width: 90%; max-width: 1140px; margin-right: auto; margin-left: auto; }
```

--------------------------------

### Header Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

Basic CSS for styling a page header with background color and margins.

```css
.header { background-color:#DDD1C1; margin-right: auto; margin-left: auto; margin-bottom: 20px; }
```

--------------------------------

### Body Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

Default body styling including margin, font, color, and background.

```css
body { margin: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
```

--------------------------------

### Enable Editing Mode

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Set to true to enable a button for displaying individual details or handling editing. Defaults to false.

```javascript
edit: false
```

--------------------------------

### External Link Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

CSS to style external links with an icon and ensure they open in a new tab.

```css
a[href^="http://"] [target=_blank]:after, a[href^="https://"] [target=_blank]:after, a[href^="ftp://"] [target=_blank]:after { content: "\\f08e"; font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: none; padding: 0px 2px; display:inline; }
```

--------------------------------

### Zoom Event Sources

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Defines the sources for zoom events. Defaults to mouse wheel and zoom buttons.

```javascript
zoomSrc: ['wheel', 'button']
```

--------------------------------

### Button Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

General styling for buttons, including color, border, padding, and border-radius.

```css
.btn { color: #333; background-color: #fff; border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; margin-left: 5px; border-radius: 4px; }
```

--------------------------------

### Initialize Pedigree Chart with Advanced Options

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example7.html

This JavaScript code initializes a PedigreeJS chart with a dataset and advanced configuration options. It dynamically calculates SVG dimensions based on the parent container width and window size. Options include target divs, storage type, dimensions, symbol size, editing capabilities, disease definitions, and a debug mode.

```javascript
$( document ).ready(function() {
    var parent_width = $('#pedigrees_ex7').parent().width();
    var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
    var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);
    var dataset = [
        {"name": "m11", "display_name": "John", "sex": "M", "diabetes_diagnosis_age": 55, "top_level": true},
        {"name": "f11", "display_name": "Jane", "sex": "F", "status": 1, "top_level": true},
        {"name": "m12", "display_name": "Jack", "sex": "M", "top_level": true},
        {"name": "f12", "display_name": "Jill", "sex": "F", "top_level": true},
        {"name": "m21", "display_name": "Jim", "divorced": "f21", "sex": "M", "mother": "f11", "father": "m11", "age": 56},
        {"name": "f21", "display_name": "Jan", "divorced": "m21", "sex": "F", "mother": "f12", "father": "m12", "age": 63},
        {"name": "ch1", "display_name": "Ana", "sex": "F", "mother": "f21", "father": "m21", "proband": true, "age": 25},
        {"name": "ch2", "display_name": "Bet", "sex": "F", "mother": "f21", "father": "m21", "adopted_in": true},
        {"name": "ch3", "display_name": "Adam", "sex": "M", "mother": "f21", "father": "m21", "stillbirth": true, "status": 1},
        {"name": "ch4", "display_name": "Sam", "sex": "M", "mother": "f21", "father": "m21", "miscarriage": true},
        {"name": "ch5", "mother": "f21", "father": "m21", "termination": true, "status": 1},
        {"name":"m22","sex":"M","mother":"f12","father":"m12","mztwin":"2"},
        {"name":"m23","sex":"M","mother":"f12","father":"m12","mztwin":"2"},
        {"name":"m24","sex":"M","mother":"f12","father":"m12","dztwin":"1"},
        {"name":"f22","sex":"F","mother":"f12","father":"m12","dztwin":"1"}
    ];
    var opts = {
        'targetDiv': 'pedigrees_ex7',
        'btn_target': 'history_ex7',
        'store_type': 'session',
        'width': svg_width,
        'height': 500,
        'symbol_size': 35,
        'edit': true,
        'diseases': [
            {'type': 'diabetes', 'colour': '#F68F35'},
        ],
        'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
    };
    var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
    if (local_dataset !== undefined && local_dataset !== null) {
        opts.dataset = local_dataset;
    } else {
        opts.dataset = dataset;
    }
    opts = pedigreejs.pedigreejs.build(opts);
    $('#history_ex7').css('max-width', svg_width);
    $('#history_ex7').css('margin', 'auto');
});
```

--------------------------------

### Primary Button Styling

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index.html

CSS for styling a primary button with specific colors, padding, and border-radius.

```css
.btn.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; text-decoration: none; }
```

--------------------------------

### PedigreeJS Configuration with Validation

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example6.html

This JavaScript code initializes PedigreeJS with a custom validation function and other configuration options. It dynamically sets the SVG width and height based on the window and container size, and includes disease highlighting.

```javascript
var parent_width = $('#ped').parent().width();
var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);

function validate(options) {
  $.each(options.dataset, function( idx, person ) {
    if(person.mother || person.father){
      if(!person.mother || !person.father) {
        throw new Error("ONLY ONE PARENT DEFINED");
      }
    }
  });
}

var dataset = [
  {"name":"m11","first_name":"John","last_name":"Brown","sex":"M","diabetes":true,"top_level":true},
  {"name":"f11","first_name":"Jane","last_name":"Brown","sex":"F","status":1,"top_level":true},
  {"name":"m12","first_name":"Jack","last_name":"Smith","sex":"M","top_level":true},
  {"name":"f12","first_name":"Jill","last_name":"Smith","sex":"F","top_level":true},
  {"name":"m21","first_name":"Jim","last_name":"Brown","sex":"M","mother":"f11","father":"m11","diabetes":true,"age":56},
  {"name":"f21","first_name":"Jan","last_name":"Brown","sex":"F","mother":"f12","father":"m12","age":63},
  {"name":"f31","first_name":"Ana","last_name":"Brown","sex":"F","mother":"f21","father":"m21","age":25},
  {"name":"m41","first_name":"Mary","last_name":"Brown","sex":"F","mother":"f31","father":"m31"},
  {"name":"m22","first_name":"Alan","last_name":"Brown","sex":"M","mother":"f12","father":"m12"},
  {"name":"f22","first_name":"Joy","last_name":"Brown","sex":"F","mother":"f12","father":"m12","noparents":true},
  {"name":"m31","first_name":"Mark","last_name":"Brown","sex":"M","mother":"f22","father":"m22"}
]

var opts = {
  'targetDiv': 'ped',
  'btn_target': 'history_ex6',
  'width': svg_width,
  'height': 500,
  'symbol_size': 35,
  'edit': true,
  'diseases': [{'type': 'diabetes', 'colour': '#F68F35'}],
  validate: validate,
  'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
};

$('#validate').append("" + validate + "\n");
$('#opts').append(JSON.stringify(opts, function(key, val) { return (typeof val === 'function') ? key : val; }, 4).replace(": \"validate\"",": validate"));

var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
if (local_dataset !== undefined && local_dataset !== null) {
  opts.dataset = local_dataset;
} else {
  opts.dataset = dataset;
}

opts = pedigreejs.pedigreejs.build(opts);

$('#history_ex6').css('max-width', svg_width);
$('#history_ex6').css('margin', 'auto');
```

--------------------------------

### Pedigree Storage Options

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Configure how pedigree data is stored for undo/redo functionality. Defaults to browser session storage.

```javascript
storage: 'session' // or 'local' or 'array'
```

--------------------------------

### Initialize Pedigree Chart with Diabetes Disease

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/example1.html

This JavaScript code initializes a PedigreeJS chart. It calculates SVG dimensions based on window and parent container size, defines a sample dataset with family members and their attributes, and sets up options including the target div, history storage type (session storage), SVG dimensions, symbol size, editability, and disease definitions (diabetes with a specific color). It also handles loading existing data from session storage or using the provided dataset. The 'DEBUG' option is set based on a URL parameter.

```javascript
$( document ).ready(function() {
var parent_width = $('#ped').parent().width();
var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
var svg_width = (parent_width > 750 ? (parent_width*8/12 - margin) : parent_width- margin);
var dataset = [
  {"name": "m11", "display_name": "John", "sex": "M", "diabetes_diagnosis_age": 55, "top_level": true},
  {"name": "f11", "display_name": "Jane", "sex": "F", "status": 1, "top_level": true},
  {"name": "m12", "display_name": "Jack", "sex": "M", "top_level": true},
  {"name": "f12", "display_name": "Jill", "sex": "F", "top_level": true},
  {"name": "m21", "display_name": "Jim", "sex": "M", "mother": "f11", "father": "m11", "age": 56},
  {"name": "f21", "display_name": "Jan", "sex": "F", "mother": "f12", "father": "m12", "age": 63},
  {"name": "ch1", "display_name": "Ana", "sex": "F", "mother": "f21", "father": "m21", "proband": true, "age": 25}
];
var opts = {
  'targetDiv': 'ped',
  'btn_target': 'history_ex1',
  'store_type': 'session',
  'width': svg_width,
  'height': 500,
  'symbol_size': 35,
  'edit': true,
  'diseases': [
    {'type': 'diabetes', 'colour': '#F68F35'},
  ],
  'DEBUG': (pedigreejs.pedigreejs_utils.urlParam('debug') === null ? false : true)
};
$('#opts').append(JSON.stringify(opts, null, 4));
var local_dataset = pedigreejs.pedigreejs_pedcache.current(opts);
if (local_dataset !== undefined && local_dataset !== null) {
  opts.dataset = local_dataset;
} else {
  opts.dataset = dataset;
}
opts= pedigreejs.pedigreejs.build(opts);
$('#history_ex1').css('max-width', svg_width);
$('#history_ex1').css('margin', 'auto');
});
```

--------------------------------

### BOADICEA v4 Pedigree Import Function

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

A function to format pedigree data into the BOADICEA v4 import file format.

```javascript
/**
 * Funtion to get the pedigree data in BOADICEA v4 format
 */
function get_pedigree_bwa4(dataset) {
  let msg = "BOADICEA import pedigree file format 4.0 ";
  let famid = opts.dataset[0].famid;
  // female risk factors
  let probandIdx = pedigreejs.pedigreejs_utils.getProbandIndex(dataset);
  let 
```

--------------------------------

### Debug Mode

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/index_es.html

Enables debug mode for the pedigree. Defaults to false.

```javascript
DEBUG: false
```

--------------------------------

### Customizing Individual Attribute Display

Source: https://github.com/ccge-boadicea/pedigreejs/blob/master/docs/developer.html

Configuration option 'labels' to customize which attributes are displayed under each individual in the pedigree. This allows for tailored visualizations.

```javascript
// Example configuration for labels
var opts = {
  "labels": {
    "name": true,
    "age": true,
    "sex": true
    // ... other attributes ...
  }
};
var pedigree = pedigreejs_pedigreejs(opts);
```