Skip to content

Instantly share code, notes, and snippets.

@wfalkwallace

wfalkwallace/ Coffee D3 Example

Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wfalkwallace/287aa1ff08afb2bb57a9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wfalkwallace/287aa1ff08afb2bb57a9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wfalkwallace revised this gist Nov 5, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Coffee D3 Example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Title file
  2. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,7 @@
    d3.json('coffee.json', function(error, json) {
    data = json;
    });
    setTimeout( function() {

    // overall size
    var width = 1000,
    height = 500,
    @@ -103,7 +103,6 @@
    return yScale(d.cups);
    })
    .attr('r', 5);
    }, 50)
    </script>
    </body>
    </html>
  3. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,7 @@
    d3.json('coffee.json', function(error, json) {
    data = json;
    });

    setTimeout( function() {
    // overall size
    var width = 1000,
    height = 500,
    @@ -103,6 +103,7 @@
    return yScale(d.cups);
    })
    .attr('r', 5);
    }, 50)
    </script>
    </body>
    </html>
  4. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    My coffee intake over the last month and a half.
  5. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    My coffee intake over the last month and a half.
  6. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion coffee.json
    View file
    Original file line number Diff line number Diff line change
    @@ -35,5 +35,5 @@
    { "date": "2014-10-16", "change": 3 },
    { "date": "2014-10-17", "change": 2 },
    { "date": "2014-10-18", "change": 2 },
    { "date": "2014-10-19", "change": 2 }
    { "date": "2014-10-19", "change": 3 }
    ]
  7. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,10 +32,9 @@

    var data;
    d3.json('coffee.json', function(error, json) {
    debugger;
    data = json;
    });
    debugger;

    // overall size
    var width = 1000,
    height = 500,
  8. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion coffee.json
    View file
    Original file line number Diff line number Diff line change
    @@ -35,5 +35,5 @@
    { "date": "2014-10-16", "change": 3 },
    { "date": "2014-10-17", "change": 2 },
    { "date": "2014-10-18", "change": 2 },
    { "date": "2014-10-19", "change": 2 },
    { "date": "2014-10-19", "change": 2 }
    ]
  9. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    My coffee intake over the last month and a half.
  10. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    My coffee intake over the last month and a half.
  11. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,11 +30,12 @@
    <body>
    <script>

    var data = {};
    var data;
    d3.json('coffee.json', function(error, json) {
    debugger;
    data = json;
    });

    debugger;
    // overall size
    var width = 1000,
    height = 500,
  12. wfalkwallace revised this gist Oct 20, 2014. No changes.
  13. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    My coffee intake over the last month and a half.
  14. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    My coffee intake over the last month and a half.
  15. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,9 +31,8 @@
    <script>

    var data = {};
    d3.json('coffee.json', function(response) {
    debugger;
    data = response;
    d3.json('coffee.json', function(error, json) {
    data = json;
    });

    // overall size
  16. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,10 @@
    <script>

    var data = {};
    d3.json('coffee.json', function(response) { data = response; });
    d3.json('coffee.json', function(response) {
    debugger;
    data = response;
    });

    // overall size
    var width = 1000,
  17. wfalkwallace revised this gist Oct 20, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    My coffee intake over the last month and a half.
  18. wfalkwallace renamed this gist Oct 20, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → index.html
    View file
    File renamed without changes.
  19. wfalkwallace created this gist Oct 20, 2014.
    39 changes: 39 additions & 0 deletions coffee.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    [
    { "date": "2014-09-11", "change": 3 },
    { "date": "2014-09-12", "change": 2 },
    { "date": "2014-09-13", "change": 3 },
    { "date": "2014-09-14", "change": 1 },
    { "date": "2014-09-15", "change": 1 },
    { "date": "2014-09-16", "change": 3 },
    { "date": "2014-09-17", "change": 2 },
    { "date": "2014-09-18", "change": 2 },
    { "date": "2014-09-19", "change": 3 },
    { "date": "2014-09-20", "change": 1 },
    { "date": "2014-09-21", "change": 4 },
    { "date": "2014-09-22", "change": 4 },
    { "date": "2014-09-23", "change": 2 },
    { "date": "2014-09-24", "change": 2 },
    { "date": "2014-09-25", "change": 2 },
    { "date": "2014-09-26", "change": 3 },
    { "date": "2014-09-27", "change": 2 },
    { "date": "2014-09-28", "change": 2 },
    { "date": "2014-09-29", "change": 3 },
    { "date": "2014-09-30", "change": 2 },
    { "date": "2014-10-01", "change": 4 },
    { "date": "2014-10-02", "change": 3 },
    { "date": "2014-10-03", "change": 1 },
    { "date": "2014-10-04", "change": 1 },
    { "date": "2014-10-05", "change": 2 },
    { "date": "2014-10-06", "change": 3 },
    { "date": "2014-10-07", "change": 3 },
    { "date": "2014-10-08", "change": 2 },
    { "date": "2014-10-09", "change": 2 },
    { "date": "2014-10-10", "change": 2 },
    { "date": "2014-10-13", "change": 3 },
    { "date": "2014-10-14", "change": 4 },
    { "date": "2014-10-15", "change": 2 },
    { "date": "2014-10-16", "change": 3 },
    { "date": "2014-10-17", "change": 2 },
    { "date": "2014-10-18", "change": 2 },
    { "date": "2014-10-19", "change": 2 },
    ]
    106 changes: 106 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <!DOCTYPE html>
    <meta charset='utf-8'>
    <head>
    <style>

    body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    padding:100px;
    }

    .x-axis text {
    transform: rotate(0.1875turn) translateY(20px);
    font-size: .75em;
    }

    .axis line,
    .axis path {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
    }



    </style>
    <script src='http://d3js.org/d3.v3.min.js'></script>
    </head>
    <body>
    <script>

    var data = {};
    d3.json('coffee.json', function(response) { data = response; });

    // overall size
    var width = 1000,
    height = 500,
    padding = 30;

    // x-y scales
    var xScale = d3.time.scale()
    .domain([
    new Date(Date.parse(d3.min(data, function(d) { return d.date; }))),
    new Date(Date.parse(d3.max(data, function(d) { return d.date; })))
    ])
    .range([
    0 + 2 * padding,
    width - 2 * padding
    ]);
    var yScale = d3.scale.linear()
    .domain([
    0,
    d3.max(data, function(d) { return d.cups; })
    ])
    .range([
    height - 2 * padding,
    0 + padding
    ]);

    //x-y axes
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .ticks(data.length / 4);
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left')
    .ticks(
    data.reduce(function(prev, cur) {
    return(prev.indexOf(cur.cups) >= 0 || prev.push(cur.cups)) && prev;
    }, []).length
    );



    // setup
    var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
    // .append('g')
    // .attr('class', 'chart');

    svg.append('g')
    .attr('class', 'axis x-axis')
    .attr("transform", "translate(" + padding + "," + (height - padding) + ")")
    .call(xAxis);
    svg.append('g')
    .attr('class', 'axis y-axis')
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

    var points = svg.selectAll('circle')
    .data(data);
    var newPoints = points.enter();
    newPoints.append('circle')
    .attr('cx', function(d, i) {
    return xScale(new Date(Date.parse(d.date)));
    })
    .attr('cy', function(d, i) {
    return yScale(d.cups);
    })
    .attr('r', 5);
    </script>
    </body>
    </html>