{"id":197,"date":"2014-04-06T11:25:24","date_gmt":"2014-04-06T11:25:24","guid":{"rendered":"http:\/\/www.mirageglobe.com\/wp\/?p=197"},"modified":"2014-04-06T11:25:24","modified_gmt":"2014-04-06T11:25:24","slug":"svg-graphing","status":"publish","type":"post","link":"https:\/\/sites.alldaycity.com\/mirageglobe\/svg-graphing\/","title":{"rendered":"SVG Graphing"},"content":{"rendered":"<p style=\"text-align: center\"><a href=\"http:\/\/www.mirageglobe.com\/wp\/wp-content\/uploads\/2014\/04\/Screen-Shot-2014-04-06-at-12.19.101.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-199 size-full\" src=\"http:\/\/www.mirageglobe.com\/wp\/wp-content\/uploads\/2014\/04\/Screen-Shot-2014-04-06-at-12.19.101.png\" alt=\"\" width=\"1130\" height=\"446\" \/><\/a><\/p>\n<p>Javascript based live updated graphing is picking up speed for analytics and now for print. A few noted names are D3JS, rickshaw, flot, graphael. A good table of comparisons can be found at\u00a0<a href=\"http:\/\/socialcompare.com\/en\/comparison\/javascript-graphs-and-charts-libraries\" target=\"_blank\">http:\/\/socialcompare.com\/en\/comparison\/javascript-graphs-and-charts-libraries<\/a><br \/>\n<strong>Scraping off SVG graphics off your browser<\/strong><br \/>\nYou can easily scrape off the graphics from your browser after running your javascript based graph generator either via print screen. or scraping it off to a local svg using SVG crowbar found at\u00a0<a href=\"https:\/\/github.com\/NYTimes\/svg-crowbar\" target=\"_blank\">https:\/\/github.com\/NYTimes\/svg-crowbar<\/a><br \/>\n<strong>Converting SVG to PNG<\/strong><br \/>\nThe first is command line method..<br \/>\nFor generating and exporting the svg graphs to png versions. Use svg2png via brew (not npm version)<\/p>\n<blockquote><p>&gt; brew install svg2png.<\/p><\/blockquote>\n<p>Then to convert..<\/p>\n<blockquote><p>&gt; sudo svg2png raphael-ico.svg rap.png<\/p><\/blockquote>\n<p>To have a large printable version..<\/p>\n<blockquote><p>&gt; sudo svg2png -s3 raphael-ico.svg rap3.png.<\/p><\/blockquote>\n<p>note: -w300 -h300 argvs will yield width and height respectively.<br \/>\nThe second is online method.. which i recommend for non-cli fans. This can be done using cloud convert at <a href=\"https:\/\/cloudconvert.org\/svg-to-png\" target=\"_blank\">https:\/\/cloudconvert.org\/svg-to-png<\/a>\u00a0.Or a personal favourite just because theres a unicorn at\u00a0<a href=\"http:\/\/www.grumpicon.com\/\" target=\"_blank\">http:\/\/www.grumpicon.com\/<\/a><br \/>\n<strong>Bonus on online PNG compression<\/strong><br \/>\nFinally once you get your png file. Use\u00a0<a href=\"https:\/\/tinypng.com\/\" target=\"_blank\">https:\/\/tinypng.com\/<\/a> to compress your images average to 60% compression. The image above was 765kb unedited, and after compression its around 250kb.<br \/>\n<strong>Good References<\/strong><\/p>\n<ul>\n<li>http:\/\/blog.omgmog.net\/post\/converting-svg-to-png-online-and-in-your-terminal\/<\/li>\n<li>http:\/\/www.flotcharts.org\/<\/li>\n<li>https:\/\/gist.github.com\/mbostock\/6466603<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Javascript based live updated graphing is picking up speed for analytics and now for print. A few noted names are D3JS, rickshaw, flot, graphael. A good table of comparisons can be found at\u00a0http:\/\/socialcompare.com\/en\/comparison\/javascript-graphs-and-charts-libraries Scraping off SVG graphics off your browser You can easily scrape off the graphics from your browser after running your javascript based [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-197","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":0,"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"wp:attachment":[{"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.alldaycity.com\/mirageglobe\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}