{"id":1878,"date":"2011-11-02T10:30:29","date_gmt":"2011-11-02T14:30:29","guid":{"rendered":"http:\/\/thesocietypages.org\/graphicsociology\/?p=1878"},"modified":"2011-11-02T09:58:25","modified_gmt":"2011-11-02T13:58:25","slug":"elegant-box-plots-code-available","status":"publish","type":"post","link":"https:\/\/thesocietypages.org\/graphicsociology\/2011\/11\/02\/elegant-box-plots-code-available\/","title":{"rendered":"Elegant Box Plots. Code available."},"content":{"rendered":"<figure id=\"attachment_1879\" aria-describedby=\"caption-attachment-1879\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mbostock.github.com\/d3\/ex\/box.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/box-plots.png\" alt=\"Box Plot with code\" width=\"600\" height=\"507\" class=\"size-full wp-image-1879\" srcset=\"https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/box-plots.png 600w, https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/box-plots-275x232.png 275w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1879\" class=\"wp-caption-text\">Box Plot with code<\/figcaption><\/figure>\n<h3>What works<\/h3>\n<p>This is elegant and information rich.  Box plots are an old standard in the display of quantitative data, useful because they are able to show average tendencies, upper and lower confidence intervals, outliers (nice addition here, outlier display is optional), and thus give not only concrete data points but an impressionistic view of skewness.<\/p>\n<p>You can make box plots like this using your own data.  The <a href=\"http:\/\/mbostock.github.com\/d3\/ex\/box.html\">javascript is available<\/a>.  It was created by Mike Bostock using d3 which is something you should check out. From mbstock&#8217;s website for d3.js:<\/p>\n<blockquote><p>&#8220;D3 is a small, free JavaScript library for manipulating HTML documents based on data. D3 can help you quickly visualize your data as HTML or SVG, handle interactivity, and incorporate smooth transitions and staged animations into your pages. You can use D3 as a visualization framework (like Protovis), or you can use it to build dynamic pages (like jQuery).&#8221; <\/p><\/blockquote>\n<p>I haven&#8217;t had a chance to try doing anything much with it yet, but I will. It&#8217;s extremely exciting to me and I couldn&#8217;t wait for myself to mess around with it. I had to post right away.<\/p>\n<h3>What needs work<\/h3>\n<p>I need to work &#8211; my overscheduled self needs to carve out some time and try it. <\/p>\n<h3>Javascript code is available<\/h3>\n<p>There are a bunch of javascript codes available for a range of different kinds of visualization, including the box plot and code to make things that look like this:<\/p>\n<figure id=\"attachment_1894\" aria-describedby=\"caption-attachment-1894\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mbostock.github.com\/d3\/ex\/chord.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/chord-diagram.png\" alt=\"Chord Diagram | d3.js by mbostock\" width=\"600\" height=\"693\" class=\"size-full wp-image-1894\" srcset=\"https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/chord-diagram.png 600w, https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/chord-diagram-259x300.png 259w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1894\" class=\"wp-caption-text\">Chord Diagram | d3.js by mbostock<\/figcaption><\/figure>\n<p>or this:<\/p>\n<figure id=\"attachment_1895\" aria-describedby=\"caption-attachment-1895\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mbostock.github.com\/d3\/ex\/force.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/force-directed-graph.png\" alt=\"Force directed graph | d3.js by mbostock\" width=\"600\" height=\"441\" class=\"size-full wp-image-1895\" srcset=\"https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/force-directed-graph.png 600w, https:\/\/thesocietypages.org\/graphicsociology\/files\/2011\/11\/force-directed-graph-275x202.png 275w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1895\" class=\"wp-caption-text\">Force directed graph | d3.js by mbostock<\/figcaption><\/figure>\n<h3>References<\/h3>\n<p>Bostock, Mike. (2011) <a href=\"http:\/\/mbostock.github.com\/d3\/ex\/box.html\">d3.js repository on GitHub<\/a>. [Code for generating information graphics]  See also: <a href=\"http:\/\/bost.ocks.org\/mike\/\">Mike Bostock&#8217;s webpage<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What works This is elegant and information rich. Box plots are an old standard in the display of quantitative data, useful because they are able to show average tendencies, upper and lower confidence intervals, outliers (nice addition here, outlier display is optional), and thus give not only concrete data points but an impressionistic view of [&hellip;]<\/p>\n","protected":false},"author":218,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11526,11528,11529,11527],"class_list":["post-1878","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-box-plot","tag-javascript","tag-mike-bostock","tag-visualization-code"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/posts\/1878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/users\/218"}],"replies":[{"embeddable":true,"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/comments?post=1878"}],"version-history":[{"count":9,"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/posts\/1878\/revisions"}],"predecessor-version":[{"id":1897,"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/posts\/1878\/revisions\/1897"}],"wp:attachment":[{"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/media?parent=1878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/categories?post=1878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thesocietypages.org\/graphicsociology\/wp-json\/wp\/v2\/tags?post=1878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}