{"id":427,"date":"2023-07-29T23:29:23","date_gmt":"2023-07-29T23:29:23","guid":{"rendered":"https:\/\/statorials.org\/de\/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\/de\/boxplot-generator\/","title":{"rendered":"Boxplot-generator"},"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\">Ein <b>Boxplot<\/b> (manchmal auch Box-and-Whisker-Plot genannt) ist ein Diagramm, das die f\u00fcnfstellige Zusammenfassung eines Datensatzes zeigt. Die f\u00fcnfstellige Zusammenfassung besteht aus dem Minimum, dem ersten Quartil, dem Median, dem dritten Quartil und dem Maximum.<\/p>\n<p style=\"text-align: left\"> Um ein Boxplot f\u00fcr einen bestimmten Datensatz zu erstellen, geben Sie Ihre Daten durch Kommas getrennt in das Feld unten ein: <\/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\"> Erstes Quartil:<span id=\"quartile1\"><\/span><\/p>\n<p style=\"text-align: left\"> Median:<span id=\"mid\"><\/span><\/p>\n<p style=\"text-align: left\"> Drittes Quartil:<span id=\"quartile3\"><\/span><\/p>\n<p style=\"text-align: left\"> Maximal:<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>Ein Boxplot (manchmal auch Box-and-Whisker-Plot genannt) ist ein Diagramm, das die f\u00fcnfstellige Zusammenfassung eines Datensatzes zeigt. Die f\u00fcnfstellige Zusammenfassung besteht aus dem Minimum, dem ersten Quartil, dem Median, dem dritten Quartil und dem Maximum. Um ein Boxplot f\u00fcr einen bestimmten Datensatz zu erstellen, geben Sie Ihre Daten durch Kommas getrennt in das Feld unten ein: [&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":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Boxplot-Generator \u2013 Statorials<\/title>\n<meta name=\"description\" content=\"Dieser Generator erstellt ein Boxplot, das den Minimalwert, das erste Quartil, den Median, das dritte Quartil und den Maximalwert f\u00fcr einen bestimmten Datensatz anzeigt.\" \/>\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\/de\/boxplot-generator\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boxplot-Generator \u2013 Statorials\" \/>\n<meta property=\"og:description\" content=\"Dieser Generator erstellt ein Boxplot, das den Minimalwert, das erste Quartil, den Median, das dritte Quartil und den Maximalwert f\u00fcr einen bestimmten Datensatz anzeigt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/statorials.org\/de\/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\/de\/boxplot-generator\/\",\"url\":\"https:\/\/statorials.org\/de\/boxplot-generator\/\",\"name\":\"Boxplot-Generator \u2013 Statorials\",\"isPartOf\":{\"@id\":\"https:\/\/statorials.org\/de\/#website\"},\"datePublished\":\"2023-07-29T23:29:23+00:00\",\"dateModified\":\"2023-07-29T23:29:23+00:00\",\"author\":{\"@id\":\"https:\/\/statorials.org\/de\/#\/schema\/person\/ec75c4d6365f2708f8a0ad3a42121aa0\"},\"description\":\"Dieser Generator erstellt ein Boxplot, das den Minimalwert, das erste Quartil, den Median, das dritte Quartil und den Maximalwert f\u00fcr einen bestimmten Datensatz anzeigt.\",\"breadcrumb\":{\"@id\":\"https:\/\/statorials.org\/de\/boxplot-generator\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/statorials.org\/de\/boxplot-generator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/statorials.org\/de\/boxplot-generator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Heim\",\"item\":\"https:\/\/statorials.org\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Boxplot-generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/statorials.org\/de\/#website\",\"url\":\"https:\/\/statorials.org\/de\/\",\"name\":\"Statorials\",\"description\":\"Ihr Leitfaden f\u00fcr statistische Kompetenz !\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/statorials.org\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/statorials.org\/de\/#\/schema\/person\/ec75c4d6365f2708f8a0ad3a42121aa0\",\"name\":\"Dr. Benjamin Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/statorials.org\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/statorials.org\/de\/wp-content\/uploads\/2023\/11\/Benjamin-Anderson-96x96.jpg\",\"contentUrl\":\"https:\/\/statorials.org\/de\/wp-content\/uploads\/2023\/11\/Benjamin-Anderson-96x96.jpg\",\"caption\":\"Dr. Benjamin Anderson\"},\"description\":\"Hallo, ich bin Benjamin, ein pensionierter Statistikprofessor, der sich zum engagierten Statorials-Lehrer entwickelt hat. Mit umfassender Erfahrung und Fachwissen auf dem Gebiet der Statistik bin ich bestrebt, mein Wissen zu teilen, um Studenten durch Statorials zu bef\u00e4higen. Mehr wissen\",\"sameAs\":[\"https:\/\/statorials.org\/de\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Boxplot-Generator \u2013 Statorials","description":"Dieser Generator erstellt ein Boxplot, das den Minimalwert, das erste Quartil, den Median, das dritte Quartil und den Maximalwert f\u00fcr einen bestimmten Datensatz anzeigt.","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\/de\/boxplot-generator\/","og_locale":"de_DE","og_type":"article","og_title":"Boxplot-Generator \u2013 Statorials","og_description":"Dieser Generator erstellt ein Boxplot, das den Minimalwert, das erste Quartil, den Median, das dritte Quartil und den Maximalwert f\u00fcr einen bestimmten Datensatz anzeigt.","og_url":"https:\/\/statorials.org\/de\/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\/de\/boxplot-generator\/","url":"https:\/\/statorials.org\/de\/boxplot-generator\/","name":"Boxplot-Generator \u2013 Statorials","isPartOf":{"@id":"https:\/\/statorials.org\/de\/#website"},"datePublished":"2023-07-29T23:29:23+00:00","dateModified":"2023-07-29T23:29:23+00:00","author":{"@id":"https:\/\/statorials.org\/de\/#\/schema\/person\/ec75c4d6365f2708f8a0ad3a42121aa0"},"description":"Dieser Generator erstellt ein Boxplot, das den Minimalwert, das erste Quartil, den Median, das dritte Quartil und den Maximalwert f\u00fcr einen bestimmten Datensatz anzeigt.","breadcrumb":{"@id":"https:\/\/statorials.org\/de\/boxplot-generator\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/statorials.org\/de\/boxplot-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/statorials.org\/de\/boxplot-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Heim","item":"https:\/\/statorials.org\/de\/"},{"@type":"ListItem","position":2,"name":"Boxplot-generator"}]},{"@type":"WebSite","@id":"https:\/\/statorials.org\/de\/#website","url":"https:\/\/statorials.org\/de\/","name":"Statorials","description":"Ihr Leitfaden f\u00fcr statistische Kompetenz !","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/statorials.org\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/statorials.org\/de\/#\/schema\/person\/ec75c4d6365f2708f8a0ad3a42121aa0","name":"Dr. Benjamin Anderson","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/statorials.org\/de\/#\/schema\/person\/image\/","url":"https:\/\/statorials.org\/de\/wp-content\/uploads\/2023\/11\/Benjamin-Anderson-96x96.jpg","contentUrl":"https:\/\/statorials.org\/de\/wp-content\/uploads\/2023\/11\/Benjamin-Anderson-96x96.jpg","caption":"Dr. Benjamin Anderson"},"description":"Hallo, ich bin Benjamin, ein pensionierter Statistikprofessor, der sich zum engagierten Statorials-Lehrer entwickelt hat. Mit umfassender Erfahrung und Fachwissen auf dem Gebiet der Statistik bin ich bestrebt, mein Wissen zu teilen, um Studenten durch Statorials zu bef\u00e4higen. Mehr wissen","sameAs":["https:\/\/statorials.org\/de"]}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"_links":{"self":[{"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/posts\/427"}],"collection":[{"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":0,"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"wp:attachment":[{"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/statorials.org\/de\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}