Skip to content

Instantly share code, notes, and snippets.

@kcsluis
Last active September 12, 2015 00:44

Revisions

  1. kcsluis revised this gist Sep 12, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@
    font-family: arial, sans;
    font-size: 9px;
    width: 960px;
    margin: 40px auto;
    margin: 0px auto;
    }

    .axis path {
  2. kcsluis created this gist Sep 12, 2015.
    12 changes: 12 additions & 0 deletions group1.tsv
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    group x y
    I 10 8.04
    I 8 6.95
    I 13 7.58
    I 9 8.81
    I 11 8.33
    I 14 9.96
    I 6 7.24
    I 4 4.26
    I 12 10.84
    I 7 4.82
    I 5 5.68
    110 changes: 110 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <!DOCTYPE html>

    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

    /*css*/

    body {
    font-family: arial, sans;
    font-size: 9px;
    width: 960px;
    margin: 40px auto;
    }

    .axis path {
    display: none;
    }
    .axis line {
    stroke-width: 1px;
    stroke: #ccc;
    stroke-dasharray: 5px 3px;
    shape-rendering: crispEdges;
    }

    </style>
    </head>

    <body>

    <!-- html -->

    </body>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script>

    // d3 margin convention
    var margin = {top: 20, right: 20, bottom: 20, left: 40};
    var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    // create scales with range (output) defined
    // svg 0,0 origin is top left, so yScale range is flipped
    var xScale = d3.scale.linear()
    .range([0,width]);
    var yScale = d3.scale.linear()
    .range([height,0]);

    // create axes
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .orient("left");

    // append svg and inner g (svg group selection) as per margin convention
    // svg variable will point to the appended g, not the svg itself
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // load external data, if needed
    d3.tsv("group1.tsv", ready);

    function ready(error, data) {
    if (error) return console.warn(error);

    // convert to numbers
    data.forEach(function(d) {
    d.x = +d.x;
    d.y = +d.y;
    });

    // update domains based on extrema
    xScale.domain(d3.extent(data, function(d) { return d.x; }));
    yScale.domain(d3.extent(data, function(d) { return d.y; }));

    // append axes
    svg.append("g")
    .call(xAxis)
    .attr("class", "axis xAxis")
    .attr("transform", "translate(0," + height + ")");
    svg.append("g")
    .call(yAxis)
    .attr("class", "axis yAxis");

    // for convenience, append g's to which we add circles
    // data join used in conjunction with selectAll
    // preselect elements that are not yet created
    var dataGroup = svg.selectAll('g.container')
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'container')
    .attr('transform', function (d) {
    return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')'
    });

    dataGroup.append('circle')
    .attr('r', 3);
    }

    </script>