{"id":4028,"date":"2016-02-12T14:57:31","date_gmt":"2016-02-12T19:57:31","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=4028"},"modified":"2016-02-12T17:07:44","modified_gmt":"2016-02-12T22:07:44","slug":"d3-course-notes","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/d3-course-notes\/","title":{"rendered":"D3 Course Notes"},"content":{"rendered":"<ul>\n<li>You can use commas in the console.log() to add spaces<\/li>\n<li>You can set multiple variables (comma delimited)\u00a0in the first argument of a &#8216;for&#8217; loop<\/li>\n<li>myArray.forEach(function(<strong>entry<\/strong>){ console.log(entry.prop1, entry.prop2); }); \u00a0\/\/ <strong>entry<\/strong> is the current object\n<ul>\n<li>Note: &#8216;For&#8217; loops are faster<\/li>\n<\/ul>\n<\/li>\n<li>Some important JavaScript array methods&#8230;\n<ul>\n<li>.filter() = Return a subset of an\u00a0array based on the conditions\n<ul>\n<li>var newArray = data.filter(function(entry){ return entry &gt; 50; });<\/li>\n<\/ul>\n<\/li>\n<li>.map() = Perform transformations on an array and return a new array\n<ul>\n<li>var newArray = data.filter(function(entry){ return{ newPropName: entry.oldPropName }; });<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Some important D3 array methods&#8230;\n<ul>\n<li>d3.min(data) = Returns minimum value in array<\/li>\n<li>d3.max(data) = Returns maximum value in array<\/li>\n<li>d3.extent(data) = Returns an array with the lowest and highest values [lowest, highest]<\/li>\n<\/ul>\n<\/li>\n<li>For arrays of objects in D3 you can pass an accessor function as the second argument in the methods above\n<ul>\n<li>var dataHiLo\u00a0= d3.extent(data, function(d){\u00a0return d.value;\u00a0});<\/li>\n<\/ul>\n<\/li>\n<li>svg.selectAll(&#8216;.bar&#8217;).data(data).enter().append(&#8216;rect&#8217;).attr(&#8230;)&#8230; \u00a0 \/\/ = &#8220;Bind data to all elements in the SVG which have the bar class, and I&#8217;m about to tell you how to handle them&#8230;&#8221;<\/li>\n<li>d3.scale.linear().domain([0, d3.max(data)]).range([0, w]) &#8230; domain method needs an array of min and max, and range method needs an array of min\/max to scale to<\/li>\n<li>You can use .classed(&#8216;myclass&#8217;, true\/false) to add or remove classes and you can chain it multiple times<\/li>\n<li>.attr(&#8216;dy or dx&#8217;, function(){}) allows us to nudge text in an SVG<\/li>\n<li>Useful CSS for SVG&#8217;s\n<ul>\n<li>shape-rendering: crispEdges;<\/li>\n<li>text-anchor: end;<\/li>\n<\/ul>\n<\/li>\n<li>Pass an object into a function and reference values with dot syntax &#8230; plot({ data: data }); &#8230; function plot(params){ params.data }<\/li>\n<li>Use plot.call(svg, { data: data}); to scope JavaScript&#8217;s &#8216;this&#8217; to the SVG<\/li>\n<li>Use .attr(&#8216;transform&#8217;, &#8216;translate(0,0)&#8217;) to move an element in an SVG by x and then y<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can use commas in the console.log() to add spaces You can set multiple variables (comma delimited)\u00a0in the first argument of a &#8216;for&#8217; loop myArray.forEach(function(entry){ console.log(entry.prop1, entry.prop2); }); \u00a0\/\/ entry is the current object Note: &#8216;For&#8217; loops are faster Some important JavaScript array methods&#8230; .filter() = Return a subset of an\u00a0array based on the conditions [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[9],"class_list":["post-4028","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-javascript"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/4028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=4028"}],"version-history":[{"count":20,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/4028\/revisions"}],"predecessor-version":[{"id":4048,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/4028\/revisions\/4048"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=4028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=4028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=4028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}