Last active
September 12, 2015 00:44
Revisions
-
kcsluis revised this gist
Sep 12, 2015 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -11,7 +11,7 @@ font-family: arial, sans; font-size: 9px; width: 960px; margin: 0px auto; } .axis path { -
kcsluis created this gist
Sep 12, 2015 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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>