diff --git a/adam-cli/src/main/scala/org/bdgenomics/adam/cli/VizReads.scala b/adam-cli/src/main/scala/org/bdgenomics/adam/cli/VizReads.scala
index c8b001cc70..8daed4ab1b 100644
--- a/adam-cli/src/main/scala/org/bdgenomics/adam/cli/VizReads.scala
+++ b/adam-cli/src/main/scala/org/bdgenomics/adam/cli/VizReads.scala
@@ -19,14 +19,16 @@ package org.bdgenomics.adam.cli
 
 import org.apache.hadoop.mapreduce.Job
 import org.apache.spark.SparkContext
+import org.bdgenomics.adam.models.VariantContext
 import org.apache.spark.rdd.RDD
 import org.bdgenomics.adam.models.{ OrderedTrackedLayout, ReferenceRegion }
 import org.bdgenomics.adam.projections.AlignmentRecordField._
 import org.bdgenomics.adam.projections.Projection
 import org.bdgenomics.adam.rdd.ADAMContext._
 import org.bdgenomics.adam.rdd.read.AlignmentRecordContext._
-import org.bdgenomics.adam.rich.ReferenceMappingContext.AlignmentRecordReferenceMapping
-import org.bdgenomics.formats.avro.AlignmentRecord
+import org.bdgenomics.adam.rdd.variation.VariationContext._
+import org.bdgenomics.adam.rich.ReferenceMappingContext._
+import org.bdgenomics.formats.avro.{ AlignmentRecord, Genotype, GenotypeAllele }
 import org.fusesource.scalate.TemplateEngine
 import org.json4s._
 import org.kohsuke.args4j.{ Argument, Option => Args4jOption }
@@ -40,8 +42,9 @@ object VizReads extends ADAMCommandCompanion {
   var refName = ""
   var inputPath = ""
   var reads: RDD[AlignmentRecord] = null
+  var variants: RDD[Genotype] = null
 
-  val trackHeight = 5
+  val trackHeight = 10
   val width = 1200
   val height = 400
   val base = 50
@@ -61,6 +64,19 @@ object VizReads extends ADAMCommandCompanion {
     tracks.toList
   }
 
+  def printVariationJson(layout: OrderedTrackedLayout[Genotype]): List[VariationJson] = {
+    var tracks = new scala.collection.mutable.ListBuffer[VariationJson]
+
+    for ((rec, track) <- layout.trackAssignments) {
+      val aRec = rec.asInstanceOf[Genotype]
+      val referenceAllele = aRec.getVariant.getReferenceAllele
+      val alternateAllele = aRec.getVariant.getAlternateAllele
+      tracks += new VariationJson(aRec.getVariant.getContig.getContigName, aRec.getAlleles.mkString(" / "), aRec.getVariant.getStart, aRec.getVariant.getEnd, track)
+
+    }
+    tracks.toList
+  }
+
   def printJsonFreq(array: Array[AlignmentRecord], region: ReferenceRegion): List[FreqJson] = {
     val freqMap = new java.util.TreeMap[Long, Long]
     var freqBuffer = new scala.collection.mutable.ListBuffer[FreqJson]
@@ -96,6 +112,7 @@ object VizReads extends ADAMCommandCompanion {
 }
 
 case class TrackJson(readName: String, start: Long, end: Long, track: Long)
+case class VariationJson(contigName: String, alleles: String, start: Long, end: Long, track: Long)
 case class FreqJson(base: Long, freq: Long)
 
 class VizReadsArgs extends Args4jBase with ParquetArgs {
@@ -111,7 +128,7 @@ class VizReadsArgs extends Args4jBase with ParquetArgs {
 
 class VizServlet extends ScalatraServlet with JacksonJsonSupport {
   protected implicit val jsonFormats: Formats = DefaultFormats
-  var regInfo = ReferenceRegion(VizReads.refName, 0, 100)
+  var regInfo = ReferenceRegion(VizReads.refName, 0, 200)
   var filteredLayout: OrderedTrackedLayout[AlignmentRecord] = null
   var filteredArray: Array[AlignmentRecord] = null
 
@@ -159,6 +176,30 @@ class VizServlet extends ScalatraServlet with JacksonJsonSupport {
     filteredArray = VizReads.reads.filterByOverlappingRegion(regInfo).collect()
     VizReads.printJsonFreq(filteredArray, regInfo)
   }
+
+  get("/variants/?") {
+    contentType = "text/html"
+
+    val input = VizReads.variants.filterByOverlappingRegion(regInfo).collect()
+    val filteredGenotypeTrack = new OrderedTrackedLayout(input)
+    val templateEngine = new TemplateEngine
+    val displayMap = Map("regInfo" -> (regInfo.referenceName, regInfo.start.toString, regInfo.end.toString),
+      "width" -> VizReads.width.toString,
+      "base" -> VizReads.base.toString,
+      "numTracks" -> filteredGenotypeTrack.numTracks.toString,
+      "trackHeight" -> VizReads.trackHeight.toString)
+    templateEngine.layout("adam-cli/src/main/webapp/WEB-INF/layouts/variants.ssp",
+      displayMap)
+  }
+
+  get("/variants/:ref") {
+    contentType = formats("json")
+
+    regInfo = ReferenceRegion(params("ref"), params("start").toLong, params("end").toLong)
+    val input = VizReads.variants.filterByOverlappingRegion(regInfo).collect()
+    val filteredGenotypeTrack = new OrderedTrackedLayout(input)
+    VizReads.printVariationJson(filteredGenotypeTrack)
+  }
 }
 
 class VizReads(protected val args: VizReadsArgs) extends ADAMSparkCommand[VizReadsArgs] {
@@ -168,7 +209,14 @@ class VizReads(protected val args: VizReadsArgs) extends ADAMSparkCommand[VizRea
     VizReads.refName = args.refName
 
     val proj = Projection(contig, readMapped, readName, start, end)
-    VizReads.reads = sc.loadAlignments(args.inputPath, projection = Some(proj))
+
+    if (args.inputPath.endsWith(".bam") || args.inputPath.endsWith(".sam") || args.inputPath.endsWith(".align.adam")) {
+      VizReads.reads = sc.loadAlignments(args.inputPath, projection = Some(proj))
+    }
+
+    if (args.inputPath.endsWith(".vcf") || args.inputPath.endsWith(".gt.adam")) {
+      VizReads.variants = sc.loadGenotypes(args.inputPath, projection = Some(proj))
+    }
 
     val server = new org.eclipse.jetty.server.Server(args.port)
     val handlers = new org.eclipse.jetty.server.handler.ContextHandlerCollection()
@@ -178,7 +226,7 @@ class VizReads(protected val args: VizReadsArgs) extends ADAMSparkCommand[VizRea
     println("View the visualization at: " + args.port)
     println("Frequency visualization at: /freq")
     println("Overlapping reads visualization at: /reads")
+    println("Variant visualization at: /variants")
     server.join()
   }
-
 }
diff --git a/adam-cli/src/main/webapp/WEB-INF/layouts/reads.ssp b/adam-cli/src/main/webapp/WEB-INF/layouts/reads.ssp
index b15bac7483..a02d1f47eb 100644
--- a/adam-cli/src/main/webapp/WEB-INF/layouts/reads.ssp
+++ b/adam-cli/src/main/webapp/WEB-INF/layouts/reads.ssp
@@ -26,13 +26,13 @@
         .highlight {
             font-weight:700;
         }
-	    h2 {
-	        text-align: center;
-	        margin: 0 0 10px 0;
-	        color: #999999;
-	        font-weight:300;
-	    }
-	    ul {
+        h2 {
+            text-align: center;
+            margin: 0 0 10px 0;
+            color: #999999;
+            font-weight:300;
+        }
+        ul {
             list-style-type: none;
             margin: 0;
             padding: 0 5px 0 5px;
diff --git a/adam-cli/src/main/webapp/WEB-INF/layouts/variants.ssp b/adam-cli/src/main/webapp/WEB-INF/layouts/variants.ssp
new file mode 100644
index 0000000000..1c77157291
--- /dev/null
+++ b/adam-cli/src/main/webapp/WEB-INF/layouts/variants.ssp
@@ -0,0 +1,366 @@
+<%@ val regInfo: (String, String, String) %>
+<%@ val width: String %>
+<%@ val base: String %>
+<%@ val trackHeight: String %>
+<%@ val numTracks: String %>
+
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
+    <style>
+        body {
+            background: whitesmoke;
+            font-family: 'Open Sans', sans-serif;
+            font-weight:300;
+        }
+        h1 {
+            text-align: center;
+            margin: 10px 0 0 0;
+            color: #333333;
+            font-weight:400;
+            text-transform: uppercase;
+        }
+        .highlight {
+            font-weight:700;
+        }
+	    h2 {
+	        text-align: center;
+	        margin: 0 0 10px 0;
+	        color: #999999;
+	        font-weight:300;
+	    }
+	    ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0 5px 0 5px;
+            float: left;
+        }
+        li {
+            display: inline;
+            float: left;
+            padding: 0 0 0 5px;
+        }
+        .axis path,
+        .axis line {
+            fill: none;
+            stroke: black;
+            shape-rendering: crispEdges;
+        }
+        .axis text {
+            font-family: sans-serif;
+            font-size: 11px;
+        }
+        div.tooltip {
+            position: absolute;
+            text-align: center;
+            padding: 2px;
+            background: lightsteelblue;
+            border: 0px;
+            pointer-events: none;
+        }
+        rect {
+            fill: red;
+        }
+        altrect {
+            fill: slategrey;
+        }
+        input[type="text"] {
+            height: 22px;
+        }
+    </style>
+    <title>Genome visualization for ADAM</title>
+</head>
+<body>
+    <h1>Genome visualization for <span class='highlight'>ADAM</span></h1>
+    <h2 align="center">current region: ${regInfo._1}:</h2>
+    <br>
+    <ul>
+        <li>move:</li>
+        <li>
+            <input name="Move very far left button"
+               type="button"
+               value="<<<"
+               onclick="moveVeryFarLeft()"
+               class="btn btn-primary btn-xs"/>
+        </li>
+        <li>
+            <input name="Move far left button"
+               type="button"
+               value="<<"
+               onclick="moveFarLeft()"
+               class="btn btn-primary btn-xs"/>
+        </li>
+        <li>
+            <input name="Move left button"
+               type="button"
+               value="<"
+               onclick="moveLeft()"
+               class="btn btn-primary btn-xs"/>
+        </li>
+        <li>
+            <input name="Move right button"
+               type="button"
+               value=">"
+               onclick="moveRight()"
+               class="btn btn-info btn-xs"/>
+        </li>
+        <li>
+            <input name="Move far right button"
+               type="button"
+               value=">>"
+               onclick="moveFarRight()"
+               class="btn btn-info btn-xs"/>
+        </li>
+        <li>
+            <input name="Move very far right button"
+               type="button"
+               value=">>>"
+               onclick="moveVeryFarRight()"
+               class="btn btn-info btn-xs"/>
+        </li>
+        <li>zoom:</li>
+        <li>
+            <input name="Zoom in button"
+               type="button"
+               value="++"
+               onclick="zoomIn()"
+               class="btn btn-warning btn-xs"/>
+        </li>
+        <li>
+            <input name="Zoom out button"
+               type="button"
+               value="--"
+               onclick="zoomOut()"
+               class="btn btn-warning btn-xs"/>
+        </li>
+        <li>
+            <form name="regForm" method="GET" class="form-inline">
+                region:
+                <input type="text" name="start" size="10" class="form-control" placeholder="start">
+                - <input type="text" name="end" size="10" class="form-control" placeholder="end">
+                <input name="Submit button"
+                       type="button"
+                       value="Submit"
+                       onclick="checkForm(this.form)"
+                       class="btn btn-danger btn-xs"/>
+            </form>
+        </li>
+    </ul>
+    <br>
+    <script>
+        var refName = "${regInfo._1}";
+        var start = parseInt(${regInfo._2}, 10);
+        var end = parseInt(${regInfo._3}, 10);
+        var width = parseInt(${width}, 10);
+        var base = parseInt(${base}, 10);
+        var trackHeight = parseInt(${trackHeight}, 10);
+        var numTracks = parseInt(${numTracks}, 10);
+        var height = (numTracks+1) * trackHeight;
+        var jsonLocation = "/variants/" + refName + "?start=" + start + "&end=" + end;
+
+        var svgContainer = d3.select("body")
+                             .append("svg")
+                             .attr("height", (height+base))
+                             .attr("width", width);
+
+        d3.select("h2")
+          .append("span")
+          .text(start + "-" + end);
+
+        d3.json(jsonLocation, function(error, data) {
+            data.forEach(function(d) {
+                d.contigName = d.contigName;
+                d.start = +d.start;
+                d.end = +d.end;
+                d.track = +d.track;
+                d.alleles = d.alleles;
+                
+            });
+
+            // Add the rectangles
+            svgContainer.append("g")
+                        .selectAll("rect")
+                        .data(data)
+                        .enter()
+                        .append("rect")
+                        .attr("x", (function(d) { return (d.start-start)/(end-start) * width; }))
+                        .attr("y", (function(d) { return height - trackHeight * (d.track+1); }))
+                        .attr("width", (function(d) { return Math.max(1,(d.end-d.start)*(width/(end-start))); }))
+                        .attr("height", (trackHeight-2))
+                        .on("mouseover", function(d) {
+                                            div.transition()
+                                            .duration(200)
+                                            .style("opacity", .9);
+                                            div .html(d.alleles)
+                                            .style("left", (d3.event.pageX) + "px")
+                                            .style("top", (d3.event.pageY - 28) + "px");
+                                        })
+                        .on("mouseout", function(d) {
+                                            div.transition()
+                                            .duration(500)
+                                            .style("opacity", 0);
+                                        });
+        });
+
+        // Create the scale for the axis
+        var axisScale = d3.scale.linear()
+                                .domain([start, end])
+                                .range([0, width]);
+
+        // Create the axis
+        var xAxis = d3.svg.axis()
+                       .scale(axisScale)
+                       .ticks(5);
+
+        // Add the axis to the container
+        svgContainer.append("g")
+                    .attr("class", "axis")
+                    .attr("transform", "translate(0, " + height + ")")
+                    .call(xAxis);
+
+        // Try to move very far left
+        function moveVeryFarLeft() {
+            var newStart = Math.max(0, start - (end-start));
+            var newEnd = Math.max(newStart, end - (end-start));
+            update(newStart, newEnd);
+        }
+
+        // Try to move far left
+        function moveFarLeft() {
+            var newStart = Math.max(0, start - (end-start)/2);
+            var newEnd = Math.max(newStart, end - (end-start)/2);
+            update(newStart, newEnd);
+        }
+
+        // Try to move left
+        function moveLeft() {
+            var newStart = Math.max(0, start - (end-start)/4);
+            var newEnd = Math.max(newStart, end - (end-start)/4);
+            update(newStart, newEnd);
+        }
+
+         // Try to move right
+         function moveRight() {
+             var newStart = start + (end-start)/4;
+             var newEnd = end + (end-start)/4;
+             update(newStart, newEnd);
+         }
+
+        // Try to move far right
+        function moveFarRight() {
+            var newStart = start + (end-start)/2;
+            var newEnd = end + (end-start)/2;
+            update(newStart, newEnd);
+        }
+
+        // Try to move very far right
+        function moveVeryFarRight() {
+            var newStart = start + (end-start);
+            var newEnd = end + (end-start);
+            update(newStart, newEnd);
+        }
+
+        // Try to zoom in
+        function zoomIn() {
+            var newStart = start + (end-start)/4;
+            var newEnd = end - (end-start)/4;
+            update(newStart, newEnd);
+        }
+
+        // Try to zoom out
+        function zoomOut() {
+            var newStart = Math.max(0, start - (end-start)/2);
+            var newEnd = end - (end-start)/2;
+            update(newStart, newEnd);
+        }
+
+        // Redirect based on form input
+        function checkForm(form) {
+            var newStart = Math.max(0, form.start.value);
+            var newEnd = Math.max(newStart, form.end.value);
+            form.reset();
+            update(newStart, newEnd);
+        }
+
+        function update(newStart, newEnd) {
+            start = newStart;
+            end = newEnd;
+            jsonLocation = ("/variants/" + refName + "?start=" + start + "&end=" + end);
+            var numTracks = 0;
+
+            d3.json(jsonLocation, function(error, data) {
+                data.forEach(function(d) {
+                    d.readName = d.readName;
+                    d.start = +d.start;
+                    d.end = +d.end;
+                    d.alleles = d.alleles;
+                    if (d.track > numTracks) { numTracks = d.track; }
+                });
+
+                d3.select("h2")
+                  .select("span")
+                  .text(start + "-" + end);
+
+                height = (numTracks+1) * trackHeight;
+
+                // Change dimensions of the SVG container
+                var svgContainer = d3.select("svg")
+                                     .attr("height", (height+base));
+
+                // Remove old content
+                svgContainer.selectAll("g")
+                            .remove();
+
+                // Add the rectangles
+                svgContainer.append("g")
+                            .selectAll("rect")
+                            .data(data)
+                            .enter()
+                            .append("rect")
+                            .attr("x", (function(d) { return (d.start-start)/(end-start) * width; }))
+                            .attr("y", (function(d) { return height - trackHeight * (d.track+1); }))
+                            .attr("width", (function(d) { return Math.max(1,(d.end-d.start)*(width/(end-start))); }))
+                            .attr("height", (trackHeight-2))
+                            .on("mouseover", function(d) {
+                                                div.transition()
+                                                .duration(200)
+                                                .style("opacity", .9);
+                                                div .html(d.alleles)
+                                                .style("left", (d3.event.pageX) + "px")
+                                                .style("top", (d3.event.pageY - 28) + "px");
+                                            })
+                            .on("mouseout", function(d) {
+                                                div.transition()
+                                                .duration(500)
+                                                .style("opacity", 0);
+                                            });
+
+                // Recreate the scale for the axis
+                var axisScale = d3.scale.linear()
+                                        .domain([start, end])
+                                        .range([0, width]);
+
+                // Recreate the axis
+                var xAxis = d3.svg.axis()
+                               .scale(axisScale)
+                               .ticks(5);
+
+                // Add the axis to the container
+                svgContainer.append("g")
+                            .attr("class", "axis")
+                            .attr("transform", "translate(0, " + height + ")")
+                            .call(xAxis);
+            });
+        }
+
+        // Hover box for reads
+        var div = d3.select("body")
+                    .append("div")
+                    .attr("class", "tooltip")
+                    .style("opacity", 0);
+    </script>
+</body>
+</html>
diff --git a/adam-core/src/main/scala/org/bdgenomics/adam/rdd/ADAMContext.scala b/adam-core/src/main/scala/org/bdgenomics/adam/rdd/ADAMContext.scala
index 9c0729af10..bdb708a63e 100644
--- a/adam-core/src/main/scala/org/bdgenomics/adam/rdd/ADAMContext.scala
+++ b/adam-core/src/main/scala/org/bdgenomics/adam/rdd/ADAMContext.scala
@@ -34,9 +34,11 @@ import org.bdgenomics.adam.models._
 import org.bdgenomics.adam.predicates.ADAMPredicate
 import org.bdgenomics.adam.projections.{ AlignmentRecordField, NucleotideContigFragmentField, Projection }
 import org.bdgenomics.adam.rdd.read.AlignmentRecordContext
+import org.bdgenomics.adam.rdd.variation.VariationContext._
+
 import org.bdgenomics.adam.rich.RichAlignmentRecord
 import org.bdgenomics.adam.util.HadoopUtil
-import org.bdgenomics.formats.avro.{ AlignmentRecord, NucleotideContigFragment, Pileup }
+import org.bdgenomics.formats.avro.{ AlignmentRecord, NucleotideContigFragment, Pileup, Genotype }
 import parquet.avro.{ AvroParquetInputFormat, AvroReadSupport }
 import parquet.filter.UnboundRecordFilter
 import parquet.hadoop.ParquetInputFormat
@@ -273,6 +275,32 @@ class ADAMContext(val sc: SparkContext) extends Serializable with Logging {
       None
   }
 
+  def maybeLoadVcf[U <: ADAMPredicate[Genotype]](
+    filePath: String,
+    predicate: Option[Class[U]] = None,
+    projection: Option[Schema] = None): Option[RDD[Genotype]] = {
+    if (filePath.endsWith(".vcf")) {
+      if (projection.isDefined) {
+        log.warn("Projection is ignored when loading a VCF file")
+      }
+      val variants = sc.adamVCFLoad(filePath)
+        .flatMap(_.genotypes)
+
+      Some(applyPredicate(variants, predicate))
+    } else
+      None
+  }
+
+  def loadGenotypes[U <: ADAMPredicate[Genotype]](
+    filePath: String,
+    predicate: Option[Class[U]] = None,
+    projection: Option[Schema] = None): RDD[Genotype] = {
+    maybeLoadVcf(filePath, predicate, projection)
+      .getOrElse(
+        adamLoad[Genotype, U](filePath, predicate, projection)
+      )
+  }
+
   def loadAlignments[U <: ADAMPredicate[AlignmentRecord]](
     filePath: String,
     predicate: Option[Class[U]] = None,
@@ -304,4 +332,4 @@ class ADAMContext(val sc: SparkContext) extends Serializable with Logging {
       matches.toSeq ++ recurse.flatMap(p => findFiles(p, regex))
     }
   }
-}
+}
\ No newline at end of file