A rapid prototype for an interface for MyVariant.info JSON data

MyVariantUIPrototype.js

var myvar = {
    "hits": [
        {
            "_id": "chr1:g.218631822G>A",
            "_score": 17.48471,
            "dbsnp": {
                "allele_origin": "unspecified",
                "alleles": [
                    {
                        "allele": "G",
                        "freq": 0.9784
                    },
                    {
                        "allele": "A",
                        "freq": 0.02157
                    }
                ],
                "alt": "A",
                "chrom": "1",
                "class": "SNV",
                "dbsnp_build": 129,
                "flags": [
                    "ASP",
                    "G5",
                    "G5A",
                    "GNO",
                    "KGPhase1",
                    "KGPhase3",
                    "SLO"
                ],
                "gmaf": 0.02157,
                "hg19": {
                    "end": 218631823,
                    "start": 218631822
                },
                "ref": "G",
                "rsid": "rs58991260",
                "validated": true,
                "var_subtype": "ts",
                "vartype": "snp"
            },
            "snpeff": {
                "ann": {
                    "effect": "intergenic_region",
                    "feature_id": "TGFB2-LYPLAL1-AS1",
                    "feature_type": "intergenic_region",
                    "gene_id": "TGFB2-LYPLAL1-AS1",
                    "gene_name": "TGFB2-LYPLAL1-AS1",
                    "putative_impact": "MODIFIER"
                }
            },
            "vcf": {
                "alt": "A",
                "position": "218631822",
                "ref": "G"
            },
            "wellderly": {
                "alleles": [
                    {
                        "allele": "A",
                        "freq": 0.0025
                    },
                    {
                        "allele": "G",
                        "freq": 0.9975
                    }
                ],
                "alt": "A",
                "chrom": "1",
                "gene": "TGFB2",
                "genotypes": [
                    {
                        "count": 1,
                        "freq": 0.005,
                        "genotype": "G/A"
                    },
                    {
                        "count": 199,
                        "freq": 0.995,
                        "genotype": "G/G"
                    }
                ],
                "hg19": {
                    "end": 218631822,
                    "start": 218631822
                },
                "pos": 218631822,
                "ref": "G",
                "vartype": "snp"
            }
        }
    ],
    "max_score": 17.48471,
    "took": 3,
    "total": 1
};

var width = 400;
var height = 800;

// setup a new svg object in a foreach loop for each hit in myvar

var svg = d3.select('.summary')
      .append('svg')
      .attr("height", height)
      .attr("width", width);

var texts = svg.selectAll("text")
              .data(myvar.hits)
              .enter();

var id = texts.append("text")
      .text(function(d) {
        return d._id;
      })
      .attr("x", 50)
      .attr("y", 30)
      .attr("font-size", 25);

var rsid = texts.append("text")
      .text(function(d) {
        return d.dbsnp.rsid;
      })
      .attr("x", 50)
      .attr("y", 50)
      .attr("font-size", 20);

var genes = texts.append("text")
            .text(function(d) {
              return "Genes: " + d.snpeff.ann.gene_name;
            })
            .attr("x", 50)
            .attr("y", 70);

var SNPclass = texts.append("text")
            .text(function(d) {
              return d.dbsnp.class;
            })
            .attr("x", 50)
            .attr("y", 90);

var effect = texts.append("text")
            .text(function(d) {
              return d.snpeff.ann.effect;
            })
            .attr("x", 50)
            .attr("y", 110);

var impact = texts.append("text")
            .text(function(d) {
              return d.snpeff.ann.putative_impact;
            })
            .attr("x", 50)
            .attr("y", 130);

var score = texts.append("text")
            .text(function(d) {
              return "MyVariant Score: " + d._score;
            })
            .attr("x", 50)
            .attr("y", 150)
            .attr("font-size", 15);

var data = [0.9784, 0.02157];
var alleleItems = ["G", "A"];

var barHeight = 20;

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, width-200]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate("+50+"," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight-1);

bar.append("text")
    .attr("x", function(d) { return -5; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d, i) { return alleleItems[i]; })
    .style("fill", "black")
    .style("font", "20px sans-serif");

bar.append("text")
    .attr("x", function(d) { return x(d) + 5; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d, i) { return d.toFixed(2); })
    .style("fill", "black")
    .style("font", "14px sans-serif")
    .style("text-anchor", "start");