![\"line\"](\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2014\/12\/line.png\")
<\/a><\/p>\nAnd is again as simple as I could get it. The data contains no X axis coordinate, and is just a flat array. In order to plot this a function provided to D3 infers the X axis from the datapoints index.<\/p>\n
\r\n<html>\r\n\r\n<style>\r\npath {\r\n stroke: steelblue;\r\n stroke-width: 2;\r\n fill: none; \/\/important\r\n}\r\n<\/style>\r\n\r\n<body>\r\n\r\n\r\n<svg class="output" width="500" height="500">\r\n<\/svg>\r\n\r\n<script src="http:\/\/d3js.org\/d3.v3.min.js"><\/script>\r\n\r\n<script>\r\nvar svg = d3.select(".output")\r\n\r\nvar mydata = [127, 61, 256, 71, 10,10,10,10,10,10,100];\r\n\r\nvar selection = svg.selectAll("line")\r\n .data(mydata)\r\n\r\nvar valueline = d3.svg.line()\r\n .x(function(d,i) { return i*10; })\r\n .y(function(d,i) { return d; });\r\n\r\nselection.enter().append("path")\r\n .attr("class", "line")\r\n .attr("d", valueline(mydata))\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"A basic bargraph, as simple as it can be made, largely hacked from various tutorials. It looks like this: <html> <body> <svg class="output" width="500" height="500"> <\/svg> <script src="http:\/\/d3js.org\/d3.v3.min.js"><\/script> <script> var svg = d3.select(".output") var mydata = [127, 61, 256, 71]; var selection = svg.selectAll("rect") .data(mydata) selection.enter().append("rect") .attr("x", 0) .attr("y", function(d,i) { return i*90+50 }) .attr("width", […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1599","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-pN","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=1599"}],"version-history":[{"count":2,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1599\/revisions"}],"predecessor-version":[{"id":1603,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1599\/revisions\/1603"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=1599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=1599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"bar\"](\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2014\/12\/bar.png\")
<\/a><\/p>\n