{"id":429,"date":"2023-07-29T23:29:23","date_gmt":"2023-07-29T23:29:23","guid":{"rendered":"https:\/\/statorials.org\/nl\/boxplot-generator\/"},"modified":"2023-07-29T23:29:23","modified_gmt":"2023-07-29T23:29:23","slug":"boxplot-generator","status":"publish","type":"post","link":"https:\/\/statorials.org\/nl\/boxplot-generator\/","title":{"rendered":"Boxplotgenerator"},"content":{"rendered":"<p><script src=\"https:\/\/unpkg.com\/d3@4.6.0\"><\/script><script src=\"https:\/\/unpkg.com\/d3fc@12.1.0\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3-legend\/2.18.0\/d3-legend.min.js\"><\/script><script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjs\/5.1.1\/math.js\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jstat@latest\/dist\/jstat.min.js\"><\/script><\/p>\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css?family=Droid+Serif|Raleway');<\/p>\n<p>#chart {\n  width: 100%;\n  height: 500px;\n}<\/p>\n<p>.point path {\n  opacity: 0.5\n}<\/p>\n<p>.y-axis-label {\n  white-space: nowrap;\n  transform: rotate(-90deg) translateY(-3em) !important;\n}<\/p>\n<p>.y-axis-label, .x-axis-label {\n  font-size: 1.5em;\n}<\/p>\n<p>.x-axis .tick {\ndisplay: none;\n}<\/p>\n<p>.axis--y .domain {\n  display: none;\n}<\/p>\n<p>h1 {\ntext-align: center;\nfont-size: 50px;\nmargin-bottom: 0px;\nfont-family: 'Raleway', serif;\n}<\/p>\n<p>p {\ncolor: black;\ntext-align: center;\nmargin-bottom: 15px;\nmargin-top: 15px;\nfont-family: 'Raleway', sans-serif;\n}<\/p>\n<p>#words {\npadding-left: 30px;\ncolor: black;\nfont-family: Raleway;\nmax-width: 550px;\nmargin: 25px auto;\nline-height: 1.75;\n}<\/p>\n<p>#words_summary {\npadding-left: 70px;\ncolor: black;\nfont-family: Raleway;\nmax-width: 550px;\nmargin: 25px auto;\nline-height: 1.75;\n}<\/p>\n<p>#words_text {\ncolor: black;\nfont-family: Raleway;\nmax-width: 550px;\nmargin: 25px auto;\nline-height: 1.75;\n}<\/p>\n<p>#words_text_area {\ndisplay:inline-block;\ncolor: black;\nfont-family: Raleway;\nmax-width: 550px;\nmargin: 25px auto;\nline-height: 1.75;\npadding-left: 100px;\n}<\/p>\n<p>#calcTitle {\ntext-align: center;\nfont-size: 20px;\nmargin-bottom: 0px;\nfont-family: 'Raleway', serif;\n}<\/p>\n<p>#hr_top {\nwidth: 30%;\nmargin-bottom: 0px;\nborder: none;\nheight: 2px;\ncolor: black;\nbackground-color: black;\n}<\/p>\n<p>#hr_bottom {\nwidth: 30%;\nmargin-top: 15px;\nborder: none;\nheight: 2px;\ncolor: black;\nbackground-color: black;\n}<\/p>\n<p>#words label, input {\n    display: inline-block;\n    vertical-align: baseline;\n    width: 350px;\n}<\/p>\n<p>    #button {\n      border: 1px solid;\n      border-radius: 10px;\n      margin-top: 20px;<\/p>\n<p>      cursor: pointer;\n      outline: none;\n      background-color: white;\n      color: black;\n      font-family: 'Work Sans', sans-serif;\n      border: 1px solid grey;\n      \/* Green *\/\n    }<\/p>\n<p>    #button:hover {\n      background-color: #f6f6f6;\n      border: 1px solid black;\n    }<\/p>\n<p>\t#words_table {\ncolor: black;\nfont-family: Raleway;\nmax-width: 350px;\nmargin: 25px auto;\nline-height: 1.75;\n}<\/p>\n<p>#summary_table {\ncolor: black;\nfont-family: Raleway;\nmax-width: 550px;\nmargin: 25px auto;\nline-height: 1.75;\npadding-left: 20px;\n}<\/p>\n<p>\t.label_radio {\n\ttext-align: center;\n    }<\/p>\n<p>td, tr, th {\n    border: 1px solid black;\n}\ntable {\n    border-collapse: collapse;\n}\ntd, th {\n    min-width: 50px;\n    height: 21px;\n}\n    .label_radio {\n\ttext-align: center;\n}<\/p>\n<p>#text_area_input {\n\tpadding-left: 35%;\n\tfloat: left;\n}<\/p>\n<p>svg:not(:root) {\n  overflow: visible;\n}<\/p>\n<\/style>\n<div id=\"words\">\n<p style=\"text-align: left\">Een <b>boxplot<\/b> (ook wel een box-and-whisker-plot genoemd) is een plot die de vijfcijferige samenvatting van een reeks gegevens weergeeft. De samenvatting met vijf cijfers is het minimum, het eerste kwartiel, de mediaan, het derde kwartiel en het maximum.<\/p>\n<p style=\"text-align: left\"> Om een boxplot voor een bepaalde dataset te maken, voert u uw gegevens in het onderstaande vak in, gescheiden door komma&#8217;s: <\/p>\n<\/div>\n<div id=\"words_table\"><textarea id=\"input_data\" name=\"x\" rows=\"5\" cols=\"40\"><\/textarea><\/div>\n<div id=\"words_table\"><input type=\"button\" id=\"button\" onclick=\"calc()\" value=\"Generate Boxplot\"><\/div>\n<div id=\"words_table\">\n<div id=\"chart\"><\/div>\n<\/div>\n<div id=\"words_table\">\n<p style=\"text-align: left\">Minimum:<span id=\"min\"><\/span><\/p>\n<p style=\"text-align: left\"> Eerste kwartiel:<span id=\"quartile1\"><\/span><\/p>\n<p style=\"text-align: left\"> Mediaan:<span id=\"mid\"><\/span><\/p>\n<p style=\"text-align: left\"> Derde kwartiel:<span id=\"quartile3\"><\/span><\/p>\n<p style=\"text-align: left\"> Maximaal:<span id=\"max\"><\/span><\/p>\n<\/div>\n<p><script><\/p>\n<p>\/\/function to get weird object keys from object that holds boxplot\nfunction resolve(path, obj=self, separator='.') {\n    var properties = Array.isArray(path) ? path : path.split(separator)\n    return properties.reduce((prev, curr) => prev && prev[curr], obj)\n}<\/p>\n<p>function calc() {<\/p>\n<p>var input_data = document.getElementById('input_data').value.match(\/\\d+\/g).map(Number);<\/p>\n<p>var data = [];\nfor (var i=0; i < input_data.length; i++) {\n    data.push({\n        Q1: input_data[i]\n    });\n}\n\nvar box = (values) => {\n  var sorted = values.slice();\n  sorted.sort((a, b) => a - b);<\/p>\n<p>  var max = sorted[sorted.length - 1];\n  var min = sorted[0];<\/p>\n<p>  \/\/var upper = d3.quantile(sorted, 0.75);\n  \/\/var mid = d3.quantile(sorted, 0.5);\n  \/\/var lower = d3.quantile(sorted, 0.25);<\/p>\n<p>\/\/ find the median of the sample\n    var mid = math.median(sorted);<\/p>\n<p>    \/\/ split the data by the median\n    var _firstHalf = sorted.filter(function(f){ return f < mid})\n    var _secondHalf = sorted.filter(function(f){ return f > mid})<\/p>\n<p>    \/\/ find the medians for each split, calculate IQR\n    var lower = math.median(_firstHalf);\n    var upper = math.median(_secondHalf);<\/p>\n<p>  var lowerLimit = lower - ((upper - lower) * 1.5);\n  var lowerWhisker = sorted.find(function(d) { return d > lowerLimit; });<\/p>\n<p>  var upperLimit = upper - (-1 * ((upper - lower) * 1.5));\n  var upperWhisker = sorted.reverse().find(function(d) { return d < upperLimit; });\n\n  return {\n    upper: upper, mid: mid, lower: lower, lowerWhisker: lowerWhisker,\n    upperWhisker: upperWhisker, max: max, min:min,\n    outliers: values.filter(function(d) { return d > upperWhisker || d < lowerWhisker; })\n  }\n}\n\nvar flatten = function(arrays) {\n  return arrays.reduce(function(a, b) {\n    return a.concat(b);\n  }, [])\n}\n  var quarters = Object.keys(data[0]);\n  var series = quarters.map(function(q) {\n    return {\n      quarter: q,\n      data: box(data.map(function(d) { return Number(d[q]); }))\n    };\n  })\n\n  var yFormat = d3.format(',.0f');\n\n  var yExtent = fc.extentLinear()\n    .accessors([function(d) { return d.max; }, function(d) { return d.min; }])\n    .pad([0, 0.1])\n    .include([0])\n\n  var boxplot = fc.seriesSvgBoxPlot()\n      .crossValue(function(d) { return d.quarter; })\n      .medianValue(function(d) { return d.data.mid; })\n      .barWidth(50)\n      .upperQuartileValue(function(d) { return d.data.upper; })\n      .lowerQuartileValue(function(d) { return d.data.lower; })\n      .highValue(function(d) { return d.data.upperWhisker; })\n      .lowValue(function(d) { return d.data.lowerWhisker; });\n\n  var point = fc.seriesSvgPoint()\n      .crossValue(function(d) { return d[0]; })\n      .mainValue(function(d) { return d[1]; });\n\n  var label = fc.seriesSvgPoint()\n      .crossValue(function(d) { return d[0]; })\n      .mainValue(function(d) { return d[1]; })\n      .decorate(function(selection) {\n        selection.enter()\n            .select('path')\n            .attr('display', 'none')\n        selection.enter()\n            .append('text')\n            .style('text-anchor', 'middle')\n            .attr('transform', function(d, i) { return  'translate(' + (i % 2 === 0 ? -50 : 50) + ', 5)'; })\n            .text(function(d) { return yFormat(d[1]); })\n            .attr('stroke', 'transparent')\n            .attr('fill', 'black');\n      });\n\n  var multi = fc.seriesSvgMulti()\n      .series([boxplot, point, label])\n      .mapping((data, index, series) => {\n        switch(series[index]) {\n          case point:\n            return flatten(data.map(function(s) {\n              return s.data.outliers.map(function(o) { return [s.quarter, o]; })\n            }))\n          case boxplot:\n            return data;\n        }\n      });<\/p>\n<p>  var chart = fc.chartSvgCartesian(\n        d3.scalePoint(),\n        d3.scaleLinear()\n      )\n      .xDomain(quarters)\n      .xPadding(0.1)\n      .yDomain(yExtent(series.map(function(d) { return d.data; })))\n      .yTickFormat(yFormat)\n      .plotArea(multi);<\/p>\n<p>  d3.select('#chart')\n      .datum(series)\n      .call(chart);<\/p>\n<p>      \/\/output results\n      var min = resolve('0->data->min', series, '->');\n      var quartile1 = resolve('0->data->lower', series, '->');\n      var mid = resolve('0->data->mid', series, '->');\n      var quartile3 = resolve('0->data->upper', series, '->');\n      var max = resolve('0->data->max', series, '->');\n      var outliers = resolve('0->data->outliers', series, '->');<\/p>\n<p>      document.getElementById('min').innerHTML = min;\n      document.getElementById('quartile1').innerHTML = quartile1;\n      document.getElementById('mid').innerHTML = mid;\n      document.getElementById('quartile3').innerHTML = quartile3;\n      document.getElementById('max').innerHTML = max;<\/p>\n<p>} \/\/end calc function\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Een boxplot (ook wel een box-and-whisker-plot genoemd) is een plot die de vijfcijferige samenvatting van een reeks gegevens weergeeft. De samenvatting met vijf cijfers is het minimum, het eerste kwartiel, de mediaan, het derde kwartiel en het maximum. Om een boxplot voor een bepaalde dataset te maken, voert u uw gegevens in het onderstaande vak [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-429","post","type-post","status-publish","format-standard","hentry","category-gids"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Boxplotgenerator - Statorialen<\/title>\n<meta name=\"description\" content=\"Deze generator cre\u00ebert een boxplot die de minimumwaarde, het eerste kwartiel, de mediaan, het derde kwartiel en de maximumwaarde voor een bepaalde gegevensset weergeeft.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/statorials.org\/nl\/boxplot-generator\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boxplotgenerator - Statorialen\" \/>\n<meta property=\"og:description\" content=\"Deze generator cre\u00ebert een boxplot die de minimumwaarde, het eerste kwartiel, de mediaan, het derde kwartiel en de maximumwaarde voor een bepaalde gegevensset weergeeft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/statorials.org\/nl\/boxplot-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Statorials\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-29T23:29:23+00:00\" \/>\n<meta name=\"author\" content=\"Dr.benjamin anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dr.benjamin anderson\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/statorials.org\/nl\/boxplot-generator\/\",\"url\":\"https:\/\/statorials.org\/nl\/boxplot-generator\/\",\"name\":\"Boxplotgenerator - Statorialen\",\"isPartOf\":{\"@id\":\"https:\/\/statorials.org\/nl\/#website\"},\"datePublished\":\"2023-07-29T23:29:23+00:00\",\"dateModified\":\"2023-07-29T23:29:23+00:00\",\"author\":{\"@id\":\"https:\/\/statorials.org\/nl\/#\/schema\/person\/d4b8842173cca1bb62cdec41860e4219\"},\"description\":\"Deze generator cre\u00ebert een boxplot die de minimumwaarde, het eerste kwartiel, de mediaan, het derde kwartiel en de maximumwaarde voor een bepaalde gegevensset weergeeft.\",\"breadcrumb\":{\"@id\":\"https:\/\/statorials.org\/nl\/boxplot-generator\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/statorials.org\/nl\/boxplot-generator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/statorials.org\/nl\/boxplot-generator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Thuis\",\"item\":\"https:\/\/statorials.org\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Boxplotgenerator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/statorials.org\/nl\/#website\",\"url\":\"https:\/\/statorials.org\/nl\/\",\"name\":\"Statorials\",\"description\":\"Uw gids voor statistische competentie\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/statorials.org\/nl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/statorials.org\/nl\/#\/schema\/person\/d4b8842173cca1bb62cdec41860e4219\",\"name\":\"Dr.benjamin anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/statorials.org\/nl\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/statorials.org\/nl\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg\",\"contentUrl\":\"http:\/\/statorials.org\/nl\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg\",\"caption\":\"Dr.benjamin anderson\"},\"description\":\"Ik ben Benjamin, een gepensioneerde hoogleraar statistiek die nu een toegewijde Statorials-lesgever is. Ik heb uitgebreide ervaring en expertise op het gebied van statistiek en ik ben vastbesloten om mijn kennis te delen met studenten via Statorials. Lees verder\",\"sameAs\":[\"http:\/\/statorials.org\/nl\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Boxplotgenerator - Statorialen","description":"Deze generator cre\u00ebert een boxplot die de minimumwaarde, het eerste kwartiel, de mediaan, het derde kwartiel en de maximumwaarde voor een bepaalde gegevensset weergeeft.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/statorials.org\/nl\/boxplot-generator\/","og_locale":"de_DE","og_type":"article","og_title":"Boxplotgenerator - Statorialen","og_description":"Deze generator cre\u00ebert een boxplot die de minimumwaarde, het eerste kwartiel, de mediaan, het derde kwartiel en de maximumwaarde voor een bepaalde gegevensset weergeeft.","og_url":"https:\/\/statorials.org\/nl\/boxplot-generator\/","og_site_name":"Statorials","article_published_time":"2023-07-29T23:29:23+00:00","author":"Dr.benjamin anderson","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Dr.benjamin anderson"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/statorials.org\/nl\/boxplot-generator\/","url":"https:\/\/statorials.org\/nl\/boxplot-generator\/","name":"Boxplotgenerator - Statorialen","isPartOf":{"@id":"https:\/\/statorials.org\/nl\/#website"},"datePublished":"2023-07-29T23:29:23+00:00","dateModified":"2023-07-29T23:29:23+00:00","author":{"@id":"https:\/\/statorials.org\/nl\/#\/schema\/person\/d4b8842173cca1bb62cdec41860e4219"},"description":"Deze generator cre\u00ebert een boxplot die de minimumwaarde, het eerste kwartiel, de mediaan, het derde kwartiel en de maximumwaarde voor een bepaalde gegevensset weergeeft.","breadcrumb":{"@id":"https:\/\/statorials.org\/nl\/boxplot-generator\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/statorials.org\/nl\/boxplot-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/statorials.org\/nl\/boxplot-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Thuis","item":"https:\/\/statorials.org\/nl\/"},{"@type":"ListItem","position":2,"name":"Boxplotgenerator"}]},{"@type":"WebSite","@id":"https:\/\/statorials.org\/nl\/#website","url":"https:\/\/statorials.org\/nl\/","name":"Statorials","description":"Uw gids voor statistische competentie","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/statorials.org\/nl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/statorials.org\/nl\/#\/schema\/person\/d4b8842173cca1bb62cdec41860e4219","name":"Dr.benjamin anderson","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/statorials.org\/nl\/#\/schema\/person\/image\/","url":"http:\/\/statorials.org\/nl\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg","contentUrl":"http:\/\/statorials.org\/nl\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg","caption":"Dr.benjamin anderson"},"description":"Ik ben Benjamin, een gepensioneerde hoogleraar statistiek die nu een toegewijde Statorials-lesgever is. Ik heb uitgebreide ervaring en expertise op het gebied van statistiek en ik ben vastbesloten om mijn kennis te delen met studenten via Statorials. Lees verder","sameAs":["http:\/\/statorials.org\/nl"]}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"_links":{"self":[{"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/posts\/429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/comments?post=429"}],"version-history":[{"count":0,"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/posts\/429\/revisions"}],"wp:attachment":[{"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/media?parent=429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/categories?post=429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/statorials.org\/nl\/wp-json\/wp\/v2\/tags?post=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}