{"action":"created","issue":{"url":"https://api.github.com/repos/ga-dc/pbj-project3/issues/54","labels_url":"https://api.github.com/repos/ga-dc/pbj-project3/issues/54/labels{/name}","comments_url":"https://api.github.com/repos/ga-dc/pbj-project3/issues/54/comments","events_url":"https://api.github.com/repos/ga-dc/pbj-project3/issues/54/events","html_url":"https://github.com/ga-dc/pbj-project3/issues/54","id":103559689,"number":54,"title":"invisible d3 object","user":{"login":"tomBeach","id":10157094,"avatar_url":"https://avatars.githubusercontent.com/u/10157094?v=3","gravatar_id":"","url":"https://api.github.com/users/tomBeach","html_url":"https://github.com/tomBeach","followers_url":"https://api.github.com/users/tomBeach/followers","following_url":"https://api.github.com/users/tomBeach/following{/other_user}","gists_url":"https://api.github.com/users/tomBeach/gists{/gist_id}","starred_url":"https://api.github.com/users/tomBeach/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tomBeach/subscriptions","organizations_url":"https://api.github.com/users/tomBeach/orgs","repos_url":"https://api.github.com/users/tomBeach/repos","events_url":"https://api.github.com/users/tomBeach/events{/privacy}","received_events_url":"https://api.github.com/users/tomBeach/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-08-27T17:43:23Z","updated_at":"2015-08-27T18:30:33Z","closed_at":"2015-08-27T18:30:33Z","body":"We've made and appended a set of d3 axes with two lines.  We can see when we \"inspect element\" but it's invisible on the screen.  Here's the html and d3 code...\r\n\r\n```\r\nHTML\t\t<div class=\"column column-8\">\r\n\t\t\t\t<div class=\"visualisation\"></div>\r\n\t\t\t\t<div class=\"contents\"></div>\r\n\t\t\t</div>\r\nd3 \r\n           // == select svg object; set xywh/margins\r\n            var vis = d3.select(\".visualisation\"),\r\n                WIDTH = 500,\r\n                HEIGHT = 300,\r\n                MARGINS = {\r\n                    top: 20,\r\n                    right: 20,\r\n                    bottom: 20,\r\n                    left: 50\r\n                },\r\n\r\n                // == Range: graph_wh inside container, Domain: data max/min values\r\n                xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2010]),\r\n                yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]),\r\n\r\n                // == create axes (d3.svg.axis method via api link)\r\n                xAxis = d3.svg.axis()\r\n                    .scale(xScale),\r\n                yAxis = d3.svg.axis()\r\n                    .scale(yScale)\r\n                    .orient(\"left\");    // /////// /////// ///////\r\n\r\n            console.log(\"vis: \" + vis);\r\n\r\n            // == append axes to container; add styles\r\n            vis.append(\"svg:g\")\r\n                .attr(\"class\", \"x axis\")\r\n                .attr(\"transform\", \"translate(0,\" + (HEIGHT - MARGINS.bottom) + \")\")\r\n                .call(xAxis);\r\n            vis.append(\"svg:g\")\r\n                .attr(\"class\", \"y axis\")\r\n                .attr(\"transform\", \"translate(\" + (MARGINS.left) + \",0)\")\r\n                .call(yAxis);\r\n\r\n            // == adjust yAxis orientation\r\n            yAxis = d3.svg.axis()\r\n                .scale(yScale)\r\n                .orient(\"left\");\r\n\r\n            // == add line object; apply scales\r\n            var lineGen = d3.svg.line()\r\n                .x(function(d) {\r\n                    return xScale(d.year);\r\n                })\r\n                .y(function(d) {\r\n                    return yScale(d.sale);\r\n                })\r\n                .interpolate(\"basis\");\r\n\r\n            // == append line path to svg; set params\r\n            vis.append('svg:path')\r\n                .attr('d', lineGen(data))\r\n                .attr('stroke', 'green')\r\n                .attr('stroke-width', 2)\r\n                .attr('fill', 'none');\r\n            vis.append('svg:path')\r\n                .attr('d', lineGen(data2))\r\n                .attr('stroke', 'blue')\r\n                .attr('stroke-width', 2)\r\n                .attr('fill', 'none');\r\n\r\n```"},"comment":{"url":"https://api.github.com/repos/ga-dc/pbj-project3/issues/comments/135515520","html_url":"https://github.com/ga-dc/pbj-project3/issues/54#issuecomment-135515520","issue_url":"https://api.github.com/repos/ga-dc/pbj-project3/issues/54","id":135515520,"user":{"login":"RobertAKARobin","id":6268177,"avatar_url":"https://avatars.githubusercontent.com/u/6268177?v=3","gravatar_id":"","url":"https://api.github.com/users/RobertAKARobin","html_url":"https://github.com/RobertAKARobin","followers_url":"https://api.github.com/users/RobertAKARobin/followers","following_url":"https://api.github.com/users/RobertAKARobin/following{/other_user}","gists_url":"https://api.github.com/users/RobertAKARobin/gists{/gist_id}","starred_url":"https://api.github.com/users/RobertAKARobin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RobertAKARobin/subscriptions","organizations_url":"https://api.github.com/users/RobertAKARobin/orgs","repos_url":"https://api.github.com/users/RobertAKARobin/repos","events_url":"https://api.github.com/users/RobertAKARobin/events{/privacy}","received_events_url":"https://api.github.com/users/RobertAKARobin/received_events","type":"User","site_admin":false},"created_at":"2015-08-27T18:30:33Z","updated_at":"2015-08-27T18:30:33Z","body":"Wooo!"}}