phoeguo · April 9, 2019 17:34
diff --git a/.block b/.block
 license: MIT
 height: 800
 border: yes
diff --git a/readme.md b/readme.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-lollipop.min.css">
    <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/cdsjsd3/css/gist.css">
 </head>

 <body>
    <div>
        <div>
            <span class="btn-group">
                <button id="save-as-png">save as PNG</button>
                <button id="save-as-svg">save as SVG</button>
                <button id="prev-btn" disabled>Prev</button>
                <button id="next-btn">Start</button>
            </span>
        </div>

        <div class="console" id="info-box"></div>
        <div id="lollipop"></div>
    </div>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-lollipop.min.js"></script>
    <script>
        // mutation data in TSV (tabular-separated value) format
        var snvFile = "TP53-msk_impact_2017-parsed.tsv";

        // pfam domain data
        var domainFile = "TP53_pfam.json";

        // mutation data format
        var snvDataFormat = {
            x: "AA_Position",
            y: "Protein_Change",
            factor: "Mutation_Class",
        };

        // pfam domain JSON information
        var domainDataFormat = {
            symbol: "hgnc_symbol",
            name: "protein_name",
            length: "length",
            domainType: "pfam",
            details: {
                start: "pfam_start",
                end: "pfam_end",
                ac: "pfam_ac",
                name: "pfam_id",
            },
        };

        // read data in
        var q = d3.queue();
        q.defer(d3.tsv, snvFile);
        q.defer(d3.json, domainFile);

        var _cols = g3.listPalettes();
        var _prev_btn = document.getElementById('prev-btn');
        var _next_btn = document.getElementById('next-btn');
        var _info_box = document.getElementById("info-box");

        // new lollipop chart
        lollipop = g3.Lollipop("lollipop");

        q.await(function (error, snvData, domainData) {
            // format data
            snvData.forEach(function (d) {
                d[snvDataFormat.x] = +d[snvDataFormat.x];
            });

            // add data
            lollipop.data.snvData = snvData;
            lollipop.data.domainData = domainData;

            // add data options
            lollipop.format.snvData = snvDataFormat;
            lollipop.format.domainData = domainDataFormat;

            lollipop.options.chartMargin = {
                left: 40,
                right: 40,
                top: 30,
                bottom: 25
            };
            lollipop.options.titleFont = "normal 20px Sans";
            lollipop.options.titleColor = "steelblue";
            lollipop.options.titleAlignment = "middle";
            lollipop.options.titleDy = "0.3em";

            var _idx = -1;
            var _init = false;

            var updateLollipop = function () {
                if (_idx < 0 || _idx > _cols.length) {
                    return;
                }

                var cur_col_scheme = _cols[_idx];

                lollipop.options.lollipopColorScheme = cur_col_scheme;
                lollipop.options.titleText = "Lollipop color scheme: " + cur_col_scheme;

                if (!_init) {
                    _next_btn.innerHTML = "Next";
                    lollipop.draw();
                    _init = true;
                } else {
                    lollipop.refresh();
                }

                info = "<span style=\"color:steelblue;\">Color " +
                    (_idx + 1) + "/" + _cols.length + "</span>: color scheme " +
                    "<span style = \"color:firebrick;font-weight: bold;\">" + cur_col_scheme +
                    "</span><br>";

                _info_box.innerHTML += info;
                _info_box.scrollTop = _info_box.scrollHeight;
            };

            var checkButtons = function () {
                _prev_btn.disabled = (_idx > 0) ? false : true;
                _next_btn.disabled = (_idx < _cols.length - 1) ? false : true;
            }

            _prev_btn.onclick = function (e) {
                _idx--;

                checkButtons();
                updateLollipop();
            };

            _next_btn.onclick = function (e) {
                _idx++;

                checkButtons();
                updateLollipop();
            };

            // get chart div id
            var chartID = lollipop.options.chartID;

            // set default filename
            var output_chart_filename = "lollipop";

            // button actions: download chart
            document.getElementById("save-as-png").onclick = function (e) {
                g3.output().toPNG(output_chart_filename, chartID);
            };

            document.getElementById("save-as-svg").onclick = function (e) {
                g3.output().toSVG(output_chart_filename, chartID);
            };

        });
    </script>
 </body>

 </html>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/TP53-msk_impact_2017-parsed.tsv b/TP53-msk_impact_2017-parsed.tsv
diff --git a/TP53_pfam.json b/TP53_pfam.json
 {"hgnc_symbol":"TP53","protein_name":"tumor protein p53","uniprot_id":"P04637","length":393,"pfam":[{"pfam_ac":"PF08563","pfam_start":6,"pfam_end":29,"pfam_id":"P53_TAD"},{"pfam_ac":"PF00870","pfam_start":95,"pfam_end":288,"pfam_id":"P53"},{"pfam_ac":"PF07710","pfam_start":318,"pfam_end":358,"pfam_id":"P53_tetramer"}]}
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-lollipop.min.css">
	<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/cdsjsd3/css/gist.css">
	</head>

	<body>
	<div>
	<div>
	<span class="btn-group">
	<button id="save-as-png">save as PNG</button>
	<button id="save-as-svg">save as SVG</button>
	<button id="prev-btn" disabled>Prev</button>
	<button id="next-btn">Start</button>
	</span>
	</div>

	<div class="console" id="info-box"></div>
	<div id="lollipop"></div>
	</div>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/cdsjsd3/g3-viz/0.5.0/g3-lollipop.min.js"></script>
	<script>
	// mutation data in TSV (tabular-separated value) format
	var snvFile = "TP53-msk_impact_2017-parsed.tsv";

	// pfam domain data
	var domainFile = "TP53_pfam.json";

	// mutation data format
	var snvDataFormat = {
	x: "AA_Position",
	y: "Protein_Change",
	factor: "Mutation_Class",
	};

	// pfam domain JSON information
	var domainDataFormat = {
	symbol: "hgnc_symbol",
	name: "protein_name",
	length: "length",
	domainType: "pfam",
	details: {
	start: "pfam_start",
	end: "pfam_end",
	ac: "pfam_ac",
	name: "pfam_id",
	},
	};

	// read data in
	var q = d3.queue();
	q.defer(d3.tsv, snvFile);
	q.defer(d3.json, domainFile);

	var _cols = g3.listPalettes();
	var _prev_btn = document.getElementById('prev-btn');
	var _next_btn = document.getElementById('next-btn');
	var _info_box = document.getElementById("info-box");

	// new lollipop chart
	lollipop = g3.Lollipop("lollipop");

	q.await(function (error, snvData, domainData) {
	// format data
	snvData.forEach(function (d) {
	d[snvDataFormat.x] = +d[snvDataFormat.x];
	});

	// add data
	lollipop.data.snvData = snvData;
	lollipop.data.domainData = domainData;

	// add data options
	lollipop.format.snvData = snvDataFormat;
	lollipop.format.domainData = domainDataFormat;

	lollipop.options.chartMargin = {
	left: 40,
	right: 40,
	top: 30,
	bottom: 25
	};
	lollipop.options.titleFont = "normal 20px Sans";
	lollipop.options.titleColor = "steelblue";
	lollipop.options.titleAlignment = "middle";
	lollipop.options.titleDy = "0.3em";

	var _idx = -1;
	var _init = false;

	var updateLollipop = function () {
	if (_idx < 0 \|\| _idx > _cols.length) {
	return;
	}

	var cur_col_scheme = _cols[_idx];

	lollipop.options.lollipopColorScheme = cur_col_scheme;
	lollipop.options.titleText = "Lollipop color scheme: " + cur_col_scheme;

	if (!_init) {
	_next_btn.innerHTML = "Next";
	lollipop.draw();
	_init = true;
	} else {
	lollipop.refresh();
	}

	info = "<span style=\"color:steelblue;\">Color " +
	(_idx + 1) + "/" + _cols.length + "</span>: color scheme " +
	"<span style = \"color:firebrick;font-weight: bold;\">" + cur_col_scheme +
	"</span><br>";

	_info_box.innerHTML += info;
	_info_box.scrollTop = _info_box.scrollHeight;
	};

	var checkButtons = function () {
	_prev_btn.disabled = (_idx > 0) ? false : true;
	_next_btn.disabled = (_idx < _cols.length - 1) ? false : true;
	}

	_prev_btn.onclick = function (e) {
	_idx--;

	checkButtons();
	updateLollipop();
	};

	_next_btn.onclick = function (e) {
	_idx++;

	checkButtons();
	updateLollipop();
	};

	// get chart div id
	var chartID = lollipop.options.chartID;

	// set default filename
	var output_chart_filename = "lollipop";

	// button actions: download chart
	document.getElementById("save-as-png").onclick = function (e) {
	g3.output().toPNG(output_chart_filename, chartID);
	};

	document.getElementById("save-as-svg").onclick = function (e) {
	g3.output().toSVG(output_chart_filename, chartID);
	};

	});
	</script>
	</body>

	</html>