Query from goolegroups: d3-js: subject: noob circle question.
Could not reproduce problem, so posted working index.html in the hope that it would shed light on the issue.
Created
December 3, 2012 21:26
-
-
Save tsenga/4198215 to your computer and use it in GitHub Desktop.
Visualisation Exploration: D3: SVG circle question
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 characters
| <html> | |
| <head> | |
| <title>D3 SVG Query</title> | |
| <script src="http://d3js.org/d3.v2.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Vis Exploration - D3 - SVG Query</h1> | |
| <svg id="chart"></svg> | |
| </body> | |
| <script type="text/javascript"> | |
| function getDate(d) { | |
| return new Date(d.DateTime); | |
| } | |
| var weightData = [{"Session":"Upperbody PUSH","Exercise":"DB bench press","DateTime":"10/09/2012","Weight":12.5000,"Repititions":10},{"Session":"Upperbody PUSH","Exercise":"DB bench press","DateTime":"10/17/2012","Weight":12.5000,"Repititions":10}]; | |
| var margin = { top: 20, right: 20, bottom: 30, left: 80 }; | |
| var width = 960 - margin.left - margin.right; | |
| var height = 500 - margin.top - margin.bottom; | |
| var minDate = getDate(weightData[0]); | |
| var maxDate = getDate(weightData[weightData.length-1]); | |
| var x = d3.time.scale().domain([minDate, maxDate]).range([0, width]); | |
| var y = d3.scale.linear().domain([0, d3.max(weightData, function(i) { return i.Weight; })]).range([height, 0]).nice(); | |
| var xAxis = d3.svg.axis().scale(x).orient("bottom"); | |
| var yAxis = d3.svg.axis().scale(y).orient("left"); | |
| var line = d3.svg.line() | |
| .x(function(d) { return getDate(d); }) | |
| .y(function(d) { return d.Weight; }); | |
| var svg = d3.select("svg#chart") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height",height + margin.top + margin.bottom); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| g.append("g").attr("class", "points") | |
| .selectAll("circle") | |
| .data(weightData) | |
| .enter().append("circle") | |
| .attr("r", 5) | |
| .attr("cx", function(d) { return x(getDate(d)); }) | |
| .attr("cy", function (d) { return y(d.Weight); }) | |
| .append("title") | |
| .text(function(e) { return getDate(e).getFullYear() + ": " + e.Weight; });; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment