{"id":947,"date":"2017-02-20T05:58:38","date_gmt":"2017-02-20T05:58:38","guid":{"rendered":"https:\/\/blogs.scu.edu\/dataviz\/?p=947"},"modified":"2017-02-20T05:58:38","modified_gmt":"2017-02-20T05:58:38","slug":"how-to-d3js-a-line-graph","status":"publish","type":"post","link":"https:\/\/blogs.scu.edu\/dataviz\/2017\/02\/20\/how-to-d3js-a-line-graph\/","title":{"rendered":"How to D3JS a Line Graph"},"content":{"rendered":"<p>Steps to D3JS a line graph:<\/p>\n<ol>\n<li><strong>Scale Functions: <\/strong>To make a scale function, you have to know the maximum and minimum data (domain) and output(range).\n<ul>\n<li>Use this to Position in following manner:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>var width = 500;<\/p>\n<p>var xScale = d3.scale.linear().domain([0, 100]).range([0, width]);<\/p>\n<ul>\n<li>Use it for Reversing the Y-axis:<\/li>\n<\/ul>\n<p>var height = 400;<\/p>\n<p>var yScale = d3.scale.linear().domain([0, 10]).range([height, 0]);<\/p>\n<ol start=\"2\">\n<li><strong>Selection Functions:<\/strong> select() selects the first matching element whilst the d3.selectAll() is \u2018greedy\u2019 in that it\u2019ll select everything that matches. Once we\u2019ve made a selection we can manipulate the elements using functions such as<\/li>\n<\/ol>\n<p>style()- Add\/modify CSS style declaration<\/p>\n<p>attr() &#8211;\u00a0 Add\/modify element attributes;<\/p>\n<ol start=\"3\">\n<li><strong>Data Joins<\/strong>: In our example, we are plotting a line graph. Plotting in line graph is different from others that we learnt in class because data is continuous unlike other discrete idioms that we learnt in class. To make it continuous use \u2018Data Joins\u2019.<\/li>\n<\/ol>\n<p>In our example, We are appending the\u00a0path to our group for each data point. Then, datum() joins a single entity to a\u00a0 selection. Attr(\u201cfill\u201d) should be none as it is a line graph and no fill is required Attr(\u201cstroke\u201d) will be the\u00a0color of the stroke and you can set the width by attr(&#8220;stroke-width&#8221;).<\/p>\n<p>Reference:\u00a0https:\/\/bl.ocks.org\/mbostock\/3883245<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Steps to D3JS a line graph: Scale Functions: To make a scale function, you have to know the maximum and minimum data (domain) and output(range). Use this to Position in following manner: var width = 500; var xScale = d3.scale.linear().domain([0, 100]).range([0, width]); Use it for Reversing the Y-axis: var height = 400; var yScale = &hellip; <a href=\"https:\/\/blogs.scu.edu\/dataviz\/2017\/02\/20\/how-to-d3js-a-line-graph\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to D3JS a Line Graph<\/span><\/a><\/p>\n","protected":false},"author":1868,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"qubely_global_settings":"","qubely_interactions":"","kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-947","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"gutentor_comment":0,"qubely_featured_image_url":null,"qubely_author":{"display_name":"Jinal Goradia","author_link":"https:\/\/blogs.scu.edu\/dataviz\/author\/jgoradia\/"},"qubely_comment":0,"qubely_category":"<a href=\"https:\/\/blogs.scu.edu\/dataviz\/category\/uncategorized\/\" rel=\"category tag\">Uncategorized<\/a>","qubely_excerpt":"Steps to D3JS a line graph: Scale Functions: To make a scale function, you have to know the maximum and minimum data (domain) and output(range). Use this to Position in following manner: var width = 500; var xScale = d3.scale.linear().domain([0, 100]).range([0, width]); Use it for Reversing the Y-axis: var height = 400; var yScale =&hellip;","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/users\/1868"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/comments?post=947"}],"version-history":[{"count":1,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/947\/revisions"}],"predecessor-version":[{"id":951,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/posts\/947\/revisions\/951"}],"wp:attachment":[{"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/media?parent=947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/categories?post=947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.scu.edu\/dataviz\/wp-json\/wp\/v2\/tags?post=947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}