{"id":430,"date":"2023-07-29T23:29:23","date_gmt":"2023-07-29T23:29:23","guid":{"rendered":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/"},"modified":"2023-07-29T23:29:23","modified_gmt":"2023-07-29T23:29:23","slug":"pembuat-plot-kotak","status":"publish","type":"post","link":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/","title":{"rendered":"Pembuat plot kotak"},"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\"><b>Plot kotak<\/b> (terkadang disebut plot kotak dan kumis) adalah plot yang menampilkan ringkasan lima angka dari sekumpulan data. Rangkuman lima angka tersebut adalah minimum, kuartil pertama, median, kuartil ketiga, dan maksimum.<\/p>\n<p style=\"text-align: left\"> Untuk membuat plot kotak untuk kumpulan data tertentu, masukkan data Anda dipisahkan dengan koma pada kotak di bawah ini: <\/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\"> Kuartil pertama:<span id=\"quartile1\"><\/span><\/p>\n<p style=\"text-align: left\"> Median:<span id=\"mid\"><\/span><\/p>\n<p style=\"text-align: left\"> Kuartil ketiga:<span id=\"quartile3\"><\/span><\/p>\n<p style=\"text-align: left\"> Maksimum:<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>Plot kotak (terkadang disebut plot kotak dan kumis) adalah plot yang menampilkan ringkasan lima angka dari sekumpulan data. Rangkuman lima angka tersebut adalah minimum, kuartil pertama, median, kuartil ketiga, dan maksimum. Untuk membuat plot kotak untuk kumpulan data tertentu, masukkan data Anda dipisahkan dengan koma pada kotak di bawah ini: Minimum: Kuartil pertama: Median: Kuartil [&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>Generator Boxplot - Statorial<\/title>\n<meta name=\"description\" content=\"Generator ini membuat diagram kotak yang menampilkan nilai minimum, kuartil pertama, median, kuartil ketiga, dan nilai maksimum untuk kumpulan data tertentu.\" \/>\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\/id\/pembuat-plot-kotak\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generator Boxplot - Statorial\" \/>\n<meta property=\"og:description\" content=\"Generator ini membuat diagram kotak yang menampilkan nilai minimum, kuartil pertama, median, kuartil ketiga, dan nilai maksimum untuk kumpulan data tertentu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/\" \/>\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=\"Benjamin anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin anderson\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/\",\"url\":\"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/\",\"name\":\"Generator Boxplot - Statorial\",\"isPartOf\":{\"@id\":\"https:\/\/statorials.org\/id\/#website\"},\"datePublished\":\"2023-07-29T23:29:23+00:00\",\"dateModified\":\"2023-07-29T23:29:23+00:00\",\"author\":{\"@id\":\"https:\/\/statorials.org\/id\/#\/schema\/person\/3d17a1160dd2d052b7c78e502cb9ec81\"},\"description\":\"Generator ini membuat diagram kotak yang menampilkan nilai minimum, kuartil pertama, median, kuartil ketiga, dan nilai maksimum untuk kumpulan data tertentu.\",\"breadcrumb\":{\"@id\":\"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/statorials.org\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pembuat plot kotak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/statorials.org\/id\/#website\",\"url\":\"https:\/\/statorials.org\/id\/\",\"name\":\"Statorials\",\"description\":\"Panduan anda untuk kompetensi statistik!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/statorials.org\/id\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/statorials.org\/id\/#\/schema\/person\/3d17a1160dd2d052b7c78e502cb9ec81\",\"name\":\"Benjamin anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/statorials.org\/id\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/statorials.org\/id\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg\",\"contentUrl\":\"http:\/\/statorials.org\/id\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg\",\"caption\":\"Benjamin anderson\"},\"description\":\"Halo, saya Benjamin, pensiunan profesor statistika yang menjadi guru Statorial yang berdedikasi. Dengan pengalaman dan keahlian yang luas di bidang statistika, saya ingin berbagi ilmu untuk memberdayakan mahasiswa melalui Statorials. Baca selengkapnya\",\"sameAs\":[\"http:\/\/statorials.org\/id\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Generator Boxplot - Statorial","description":"Generator ini membuat diagram kotak yang menampilkan nilai minimum, kuartil pertama, median, kuartil ketiga, dan nilai maksimum untuk kumpulan data tertentu.","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\/id\/pembuat-plot-kotak\/","og_locale":"id_ID","og_type":"article","og_title":"Generator Boxplot - Statorial","og_description":"Generator ini membuat diagram kotak yang menampilkan nilai minimum, kuartil pertama, median, kuartil ketiga, dan nilai maksimum untuk kumpulan data tertentu.","og_url":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/","og_site_name":"Statorials","article_published_time":"2023-07-29T23:29:23+00:00","author":"Benjamin anderson","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Benjamin anderson"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/","url":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/","name":"Generator Boxplot - Statorial","isPartOf":{"@id":"https:\/\/statorials.org\/id\/#website"},"datePublished":"2023-07-29T23:29:23+00:00","dateModified":"2023-07-29T23:29:23+00:00","author":{"@id":"https:\/\/statorials.org\/id\/#\/schema\/person\/3d17a1160dd2d052b7c78e502cb9ec81"},"description":"Generator ini membuat diagram kotak yang menampilkan nilai minimum, kuartil pertama, median, kuartil ketiga, dan nilai maksimum untuk kumpulan data tertentu.","breadcrumb":{"@id":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/statorials.org\/id\/pembuat-plot-kotak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/statorials.org\/id\/pembuat-plot-kotak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/statorials.org\/id\/"},{"@type":"ListItem","position":2,"name":"Pembuat plot kotak"}]},{"@type":"WebSite","@id":"https:\/\/statorials.org\/id\/#website","url":"https:\/\/statorials.org\/id\/","name":"Statorials","description":"Panduan anda untuk kompetensi statistik!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/statorials.org\/id\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/statorials.org\/id\/#\/schema\/person\/3d17a1160dd2d052b7c78e502cb9ec81","name":"Benjamin anderson","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/statorials.org\/id\/#\/schema\/person\/image\/","url":"http:\/\/statorials.org\/id\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg","contentUrl":"http:\/\/statorials.org\/id\/wp-content\/uploads\/2023\/10\/Dr.-Benjamin-Anderson-96x96.jpg","caption":"Benjamin anderson"},"description":"Halo, saya Benjamin, pensiunan profesor statistika yang menjadi guru Statorial yang berdedikasi. Dengan pengalaman dan keahlian yang luas di bidang statistika, saya ingin berbagi ilmu untuk memberdayakan mahasiswa melalui Statorials. Baca selengkapnya","sameAs":["http:\/\/statorials.org\/id"]}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"_links":{"self":[{"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/posts\/430"}],"collection":[{"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":0,"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"wp:attachment":[{"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/statorials.org\/id\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}