{"id":407,"date":"2021-10-24T22:38:25","date_gmt":"2021-10-24T20:38:25","guid":{"rendered":"https:\/\/www.astroartu.studio\/en\/?p=407"},"modified":"2021-10-24T22:56:17","modified_gmt":"2021-10-24T20:56:17","slug":"tunagramms","status":"publish","type":"post","link":"https:\/\/www.astroartu.studio\/en\/2021\/10\/24\/tunagramms\/","title":{"rendered":"Tunagramms!"},"content":{"rendered":"\n<svg id=\"fish\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" width=\"100\" height=\"68\" style=\"display: none\"><path d=\"M512,256c0-16.54-14.27-46.76-45.61-74a207.06,207.06,0,0,0-60.28-36.12,3.15,3.15,0,0,0-3.93,1.56c-.15.29-.3.57-.47.86l-9.59,15.9a183.24,183.24,0,0,0,.07,183.78l.23.39,8.74,16a4,4,0,0,0,4.94,1.82C479.63,337.42,512,281.49,512,256Zm-93.92-.14a16,16,0,1,1,13.79-13.79A16,16,0,0,1,418.08,255.86Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path><path d=\"M335.45,256a214.8,214.8,0,0,1,29.08-108l.12-.21,4.62-7.67a4,4,0,0,0-2.59-6,284.29,284.29,0,0,0-39.26-5.39,7.94,7.94,0,0,1-4.29-1.6c-19.28-14.66-57.5-40.3-96.46-46.89a16,16,0,0,0-18,20.18l10.62,37.17a4,4,0,0,1-2.42,4.84c-36.85,13.69-68.59,38.75-91.74,57.85a8,8,0,0,1-10.06.06q-4.72-3.75-9.69-7.39C65.74,164,19.17,160.19,17.21,160.05A16,16,0,0,0,.38,179.45c.42,1.93,9.19,40.69,31.7,71.61a8.09,8.09,0,0,1,0,9.55C9.57,291.52.8,330.29.38,332.22a16,16,0,0,0,16.83,19.4c2-.14,48.53-4,88.12-32.88q4.85-3.56,9.47-7.22a8,8,0,0,1,10.06.07c23.25,19.19,55.05,44.28,92,58a4,4,0,0,1,2.42,4.83L208.62,411.6a16,16,0,0,0,18,20.18c17.16-2.9,51.88-12.86,96.05-46.83a8.15,8.15,0,0,1,4.36-1.65A287.36,287.36,0,0,0,366.25,378a4,4,0,0,0,2.69-5.83l-4.51-8.29A214.81,214.81,0,0,1,335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path><\/svg>\n\n\n\n\n\n\n<svg id=\"fish_tail\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 218 227\" width=\"218\" height=\"227\" style=\"display: none\">\n    <g transform=\"matrix(1,0,0,1,0,-142)\">\n        <g>\n            <path d=\"M215.87,367.923C217.787,368.656 217.802,141.068 215.88,141.8C179.198,155.428 147.603,180.373 124.559,199.386C121.663,201.756 117.468,201.781 114.545,199.446C111.412,196.957 108.197,194.505 104.899,192.089C65.44,163.272 19.082,159.479 17.131,159.34C16.732,159.31 16.332,159.295 15.932,159.295C7.194,159.295 0.005,166.484 0.005,175.222C0.005,176.375 0.129,177.524 0.378,178.651C0.796,180.572 9.526,219.155 31.934,249.934C33.998,252.757 33.998,256.617 31.934,259.441C9.526,290.209 0.796,328.802 0.378,330.724C0.129,331.85 0.005,333 0.005,334.153C0.005,342.891 7.194,350.08 15.932,350.08C16.332,350.08 16.732,350.065 17.131,350.035C19.122,349.896 65.44,346.053 104.849,317.305C108.067,314.943 111.21,312.547 114.276,310.118C117.201,307.786 121.396,307.815 124.29,310.188C147.434,329.29 179.088,354.266 215.87,367.923Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n        <\/g>\n    <\/g>\n<\/svg>\n\n<svg id=\"fish_head\" viewBox=\"0 0 186 255\" width=\"186\" height=\"255\" style=\"display: none\">\n    <g transform=\"matrix(1,0,0,1,-325,-130)\">\n\n            <path d=\"M512,256C512,239.46 497.73,209.24 466.39,182C448.502,166.614 428.114,154.397 406.11,145.88C404.601,145.316 402.891,145.995 402.18,147.44C402.03,147.73 401.88,148.01 401.71,148.3L392.12,164.2C359.242,220.973 359.269,291.232 392.19,347.98L392.42,348.37L401.16,364.37C402.115,366.119 404.239,366.902 406.1,366.19C479.63,337.42 512,281.49 512,256ZM418.08,255.86C417.392,255.95 416.699,255.995 416.005,255.995C407.228,255.995 400.005,248.772 400.005,239.995C400.005,231.218 407.228,223.995 416.005,223.995C424.782,223.995 432.005,231.218 432.005,239.995C432.005,240.689 431.96,241.382 431.87,242.07C430.933,249.238 425.248,254.923 418.08,255.86Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\t\t\t\n            <path d=\"M335.45,256C335.436,218.067 345.471,180.798 364.53,148L364.65,147.79L369.27,140.12C369.654,139.492 369.857,138.77 369.857,138.034C369.857,136.15 368.525,134.508 366.68,134.12C353.735,131.412 340.616,129.611 327.42,128.73C325.864,128.63 325.447,383.414 327.03,383.3C340.21,382.437 353.314,380.666 366.25,378C368.095,377.613 369.428,375.971 369.428,374.085C369.428,373.416 369.26,372.757 368.94,372.17L364.43,363.88C345.427,331.107 335.427,293.884 335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n\t\t<\/g>\n<\/svg>\n\n\n\n\n<svg id=\"fish_pinna\" viewBox=\"0 0 128 352\" width=\"128\" height=\"352\" style=\"display: none\">\n        <g transform=\"matrix(1,0,0,1,-208,-80.0248)\">\n            <path d=\"M335.45,256C335.436,218.067 336.464,147.906 335.222,146.963C315.942,132.303 265.63,86.83 226.67,80.24C225.806,80.097 224.931,80.025 224.054,80.025C215.277,80.025 208.054,87.247 208.054,96.025C208.054,97.511 208.262,98.991 208.67,100.42L219.29,137.59C219.86,139.576 219.844,372.437 219.28,374.42L208.62,411.6C208.212,413.029 208.004,414.509 208.004,415.995C208.004,424.773 215.227,431.995 224.004,431.995C224.881,431.995 225.756,431.923 226.62,431.78C243.78,428.88 291.134,406.198 335.304,372.228C336.566,371.265 335.427,293.884 335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n        <\/g><\/svg>\n\n\n<svg id=\"fishscatter\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" width=\"80\" height=\"80\" style=\"display: none\"><path d=\"M512,256c0-16.54-14.27-46.76-45.61-74a207.06,207.06,0,0,0-60.28-36.12,3.15,3.15,0,0,0-3.93,1.56c-.15.29-.3.57-.47.86l-9.59,15.9a183.24,183.24,0,0,0,.07,183.78l.23.39,8.74,16a4,4,0,0,0,4.94,1.82C479.63,337.42,512,281.49,512,256Zm-93.92-.14a16,16,0,1,1,13.79-13.79A16,16,0,0,1,418.08,255.86Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path><path d=\"M335.45,256a214.8,214.8,0,0,1,29.08-108l.12-.21,4.62-7.67a4,4,0,0,0-2.59-6,284.29,284.29,0,0,0-39.26-5.39,7.94,7.94,0,0,1-4.29-1.6c-19.28-14.66-57.5-40.3-96.46-46.89a16,16,0,0,0-18,20.18l10.62,37.17a4,4,0,0,1-2.42,4.84c-36.85,13.69-68.59,38.75-91.74,57.85a8,8,0,0,1-10.06.06q-4.72-3.75-9.69-7.39C65.74,164,19.17,160.19,17.21,160.05A16,16,0,0,0,.38,179.45c.42,1.93,9.19,40.69,31.7,71.61a8.09,8.09,0,0,1,0,9.55C9.57,291.52.8,330.29.38,332.22a16,16,0,0,0,16.83,19.4c2-.14,48.53-4,88.12-32.88q4.85-3.56,9.47-7.22a8,8,0,0,1,10.06.07c23.25,19.19,55.05,44.28,92,58a4,4,0,0,1,2.42,4.83L208.62,411.6a16,16,0,0,0,18,20.18c17.16-2.9,51.88-12.86,96.05-46.83a8.15,8.15,0,0,1,4.36-1.65A287.36,287.36,0,0,0,366.25,378a4,4,0,0,0,2.69-5.83l-4.51-8.29A214.81,214.81,0,0,1,335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path><\/svg>\n\n<svg id=\"fishbar\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" width=\"80\" height=\"80\" style=\"display: none\">\n\t\n\t\n    <g transform=\"matrix(1,0,0,1,0,0)\">\t\n<path d=\"M512,256c0-16.54-14.27-46.76-45.61-74a207.06,207.06,0,0,0-60.28-36.12,3.15,3.15,0,0,0-3.93,1.56c-.15.29-.3.57-.47.86l-9.59,15.9a183.24,183.24,0,0,0,.07,183.78l.23.39,8.74,16a4,4,0,0,0,4.94,1.82C479.63,337.42,512,281.49,512,256Zm-93.92-.14a16,16,0,1,1,13.79-13.79A16,16,0,0,1,418.08,255.86Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n   <\/g>\n    <g transform=\"matrix(1,0,0,1,0,0)\">\n<path d=\"M335.45,256a214.8,214.8,0,0,1,29.08-108l.12-.21,4.62-7.67a4,4,0,0,0-2.59-6,284.29,284.29,0,0,0-39.26-5.39,7.94,7.94,0,0,1-4.29-1.6c-19.28-14.66-57.5-40.3-96.46-46.89a16,16,0,0,0-18,20.18l10.62,37.17a4,4,0,0,1-2.42,4.84c-36.85,13.69-68.59,38.75-91.74,57.85a8,8,0,0,1-10.06.06q-4.72-3.75-9.69-7.39C65.74,164,19.17,160.19,17.21,160.05A16,16,0,0,0,.38,179.45c.42,1.93,9.19,40.69,31.7,71.61a8.09,8.09,0,0,1,0,9.55C9.57,291.52.8,330.29.38,332.22a16,16,0,0,0,16.83,19.4c2-.14,48.53-4,88.12-32.88q4.85-3.56,9.47-7.22a8,8,0,0,1,10.06.07c23.25,19.19,55.05,44.28,92,58a4,4,0,0,1,2.42,4.83L208.62,411.6a16,16,0,0,0,18,20.18c17.16-2.9,51.88-12.86,96.05-46.83a8.15,8.15,0,0,1,4.36-1.65A287.36,287.36,0,0,0,366.25,378a4,4,0,0,0,2.69-5.83l-4.51-8.29A214.81,214.81,0,0,1,335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n\n   <\/g>\n<\/svg>\n\n<svg id=\"fishplot\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" width=\"80\" height=\"80\" style=\"display: none\">\n\t\n\t\n    <g transform=\"matrix(1,0,0,1,0,0)\">\t\n<path d=\"M512,256c0-16.54-14.27-46.76-45.61-74a207.06,207.06,0,0,0-60.28-36.12,3.15,3.15,0,0,0-3.93,1.56c-.15.29-.3.57-.47.86l-9.59,15.9a183.24,183.24,0,0,0,.07,183.78l.23.39,8.74,16a4,4,0,0,0,4.94,1.82C479.63,337.42,512,281.49,512,256Zm-93.92-.14a16,16,0,1,1,13.79-13.79A16,16,0,0,1,418.08,255.86Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n   <\/g>\n    <g transform=\"matrix(1,0,0,1,0,0)\">\n<path d=\"M335.45,256a214.8,214.8,0,0,1,29.08-108l.12-.21,4.62-7.67a4,4,0,0,0-2.59-6,284.29,284.29,0,0,0-39.26-5.39,7.94,7.94,0,0,1-4.29-1.6c-19.28-14.66-57.5-40.3-96.46-46.89a16,16,0,0,0-18,20.18l10.62,37.17a4,4,0,0,1-2.42,4.84c-36.85,13.69-68.59,38.75-91.74,57.85a8,8,0,0,1-10.06.06q-4.72-3.75-9.69-7.39C65.74,164,19.17,160.19,17.21,160.05A16,16,0,0,0,.38,179.45c.42,1.93,9.19,40.69,31.7,71.61a8.09,8.09,0,0,1,0,9.55C9.57,291.52.8,330.29.38,332.22a16,16,0,0,0,16.83,19.4c2-.14,48.53-4,88.12-32.88q4.85-3.56,9.47-7.22a8,8,0,0,1,10.06.07c23.25,19.19,55.05,44.28,92,58a4,4,0,0,1,2.42,4.83L208.62,411.6a16,16,0,0,0,18,20.18c17.16-2.9,51.88-12.86,96.05-46.83a8.15,8.15,0,0,1,4.36-1.65A287.36,287.36,0,0,0,366.25,378a4,4,0,0,0,2.69-5.83l-4.51-8.29A214.81,214.81,0,0,1,335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n\n   <\/g>\n<\/svg>\n\n\n<svg id=\"fishpareto\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" width=\"80\" height=\"80\" style=\"display: none\">\n\t\n\t\n    <g transform=\"matrix(1,0,0,1,0,0)\">\t\n<path d=\"M512,256c0-16.54-14.27-46.76-45.61-74a207.06,207.06,0,0,0-60.28-36.12,3.15,3.15,0,0,0-3.93,1.56c-.15.29-.3.57-.47.86l-9.59,15.9a183.24,183.24,0,0,0,.07,183.78l.23.39,8.74,16a4,4,0,0,0,4.94,1.82C479.63,337.42,512,281.49,512,256Zm-93.92-.14a16,16,0,1,1,13.79-13.79A16,16,0,0,1,418.08,255.86Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n   <\/g>\n    <g transform=\"matrix(1,0,0,1,0,0)\">\n<path d=\"M335.45,256a214.8,214.8,0,0,1,29.08-108l.12-.21,4.62-7.67a4,4,0,0,0-2.59-6,284.29,284.29,0,0,0-39.26-5.39,7.94,7.94,0,0,1-4.29-1.6c-19.28-14.66-57.5-40.3-96.46-46.89a16,16,0,0,0-18,20.18l10.62,37.17a4,4,0,0,1-2.42,4.84c-36.85,13.69-68.59,38.75-91.74,57.85a8,8,0,0,1-10.06.06q-4.72-3.75-9.69-7.39C65.74,164,19.17,160.19,17.21,160.05A16,16,0,0,0,.38,179.45c.42,1.93,9.19,40.69,31.7,71.61a8.09,8.09,0,0,1,0,9.55C9.57,291.52.8,330.29.38,332.22a16,16,0,0,0,16.83,19.4c2-.14,48.53-4,88.12-32.88q4.85-3.56,9.47-7.22a8,8,0,0,1,10.06.07c23.25,19.19,55.05,44.28,92,58a4,4,0,0,1,2.42,4.83L208.62,411.6a16,16,0,0,0,18,20.18c17.16-2.9,51.88-12.86,96.05-46.83a8.15,8.15,0,0,1,4.36-1.65A287.36,287.36,0,0,0,366.25,378a4,4,0,0,0,2.69-5.83l-4.51-8.29A214.81,214.81,0,0,1,335.45,256Z\" style=\"fill:rgb(0,0,0);fill-rule:nonzero;\"><\/path>\n\n\n   <\/g>\n<\/svg>\n\n\n\n<style>\n@media screen and (max-width: 1420px) {\n.table_center{\n\t\n\n        width: max-width;\n        overflow-x: auto;\n        border: none;\n\n}\n}\n@media screen and (min-width: 1420px) {\n.table_center{\n\t\n\tmargin-left: -250px;\n        width: 100vh;\n      \/\/  overflow-x: auto;\n        border: none;\n\n}\n\n}\n\n\n.plot_scrollable{\n\t\n\n        width: max-width;\n        overflow-x: auto;\n\n}\n\n\n\n\n.table_rows{\n\t\n\n        border: none;\n\n}\n.zampa{\n       position: relative;\n       bottom: -20px;\n}\n<\/style>\n\n\n\n<p>Hi guys!<\/p>\n\n\n\n<p>As CCEO (Cat CEO) of this website, for some time now I have been looking for the best way to communicate data graphically, both internally to our staff and for the articles we prepare for you. It already seemed all seen and seen again and, therefore, super boring &#8230; when I had the intuition to stop squeezing my brains and go to my humans to ask opening a tuna can. And here, like a flash, the most innovative idea that I could have imagined up to that moment during all my investigations sparked in my mind, clearing up any doubts: I had to make the&nbsp;<strong><em>TUNAGRAMS<\/em><\/strong>!<\/p>\n\n\n\n<p>I cannot describe my enthusiasm after having that happy intuition, it will suffice to say that I left the tuna for a moment to go and confer with my humans and tell them this fantastic idea.<\/p>\n\n\n\n<p>Obviously they were thrilled and, at that point, my work as a cat-magnificent inspirer, supreme genius inventor of amazing creations, was over: I could quietly go back to my tuna can.<\/p>\n\n\n\n<p>I let them produce, going to dispense my beneficial purring from time to time to motivate them. In truth, also to check that everything was going smoothly, without jams due to stagnation of the project &#8230; not that my humans are lazy, that was absolutely not the meaning, and I admit that perhaps I could have expressed myself better&#8230; Let&#8217;s say that in all projects it happens to run aground in some rock and I was always ready to throw them a rope to free them.<\/p>\n\n\n\n<p>After a month of hard work, I am pleased to present you the first tunagrams we created (I call them &#8220;the first&#8221; because new ones could surely come out<img loading=\"lazy\" decoding=\"async\" class=\"piccicons\" src=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-1024x846.png\" alt=\"\" width=\"30\" height=\"25\"> !).<\/p>\n\n\n\n<p>I almost forgot: the background of the tunagrams is orange (because it&#8217;s my favorite color!), but you can also choose the white one.<\/p>\n\n\n\n<p>Initially, the &#8220;ScatterTuna-gram&#8221; was born, essentially a scatterplot, that is a graph in which highlighting the relationship between two continuous numerical variables x and y (note: a continuous numerical variable is a variable represented by numbers, integers or decimals, often deriving from measurements).<\/p>\n\n\n\n<p>To give you an example, I propose the ScatterTuna-gram of the hypothetical relationship that I expect there will be between the increase in the quantity of my tuna cans in relation to the increase in the number of articles that we will publish on Astro Art\u00f9: the graph clearly shows a linear and positive relation between the two variables.<\/p>\n\n\n\n<div class=\"plot_scrollable\" align=\"center\"><canvas id=\"scattertunagram1\" height=\"355\" width=\"700\"><\/canvas><\/div>\n\n<script src=\"https:\/\/www.astroartu.studio\/tuna scatter 1.js\"><\/script>\n<script>\nvar tunaplot=new TunaScattergram(\"scattertunagram1\");\nvar array_data_y0=[[0.00,0.50,1.00,1.50,1.50,2.00,2.20,2.50,3.00,4.00,4.50,5.00,5.30,5.90,6.00,6.50,7.00]];\nvar array_data_x0=[[0.50,1.00,1.50,2.00,2.50,3.00,3.50,4.00,4.50,5.00,5.50,6.00,6.50,7.00,7.50,8.00,8.50]];   \nconst marker_colors_scatter=[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\"];   \n\n\ntunaplot.plot(array_data_x0,array_data_y0,\"tuna\",70\/100,\"true\",\"number of articles published on AstroArt\u00f9\",\"number of tuna cans\",\"Number of tuna expected in relation to the number of articles published on AstroArt\u00f9\",[\"Avenir Next\",12],[\"Avenir Next\",12],[\"Avenir Next\",15],[\"number of tuna cans\"],[\"Avenir Next\",12],\"down\", marker_colors_scatter,false,[\"Avenir Next\",15],false,[\"Avenir Next\",18],false,false,false,\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio\",0);   \n<\/script>\n\n\n\n<!--more-->\n\n\n\n<p>The ScatterTuna is equipped with a legend, which you can insert at the point that you like best in the chart, with titles and horizontal lines that can be added if you need to view a limit value. If you scroll with the pointer over each point (represented by a tuna), its value will be displayed.<\/p>\n\n\n\n<p>Then I propose to you what is perhaps my absolute favorite: the \u201cTunaCan-gram\u201d, because it is round like the little tuna can and contains other tuna fishes: nothing better to wish for a greedy cat like me!<\/p>\n\n\n\n<p>It follows the classic donut chart, so it is the representation of the proportion of observations for each category of data made one hundred the sum of all observations, but in a &#8220;gattastic&#8221; version, because the donut cart sectors have been converted into tuna. Also in this case, you have the possibility to insert the legend, the title, and to view the value of each single tuna by hovering over it with the mouse. I advise you not to exceed with the categories to be graphed, as you could create a graph that is not very informative and too confusing.<\/p>\n\n\n\n<p>Below is an example, in which I have best organized the free time of my humans.<\/p>\n\n\n\n<div class=\"plot_scrollable\" align=\"center\">\n<canvas style=\"text-align: center\" id=\"attivitaumani\" height=\"525\" width=\"700\"><\/canvas>\n<\/div>\n\n<script src=\"https:\/\/www.astroartu.studio\/tuna can 1.js\"><\/script>\n\n<script>\n\n\n\nvar size_marker=50\/100;\nvar grid=true;   \nconst marker_colors=[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\",\"llb\",\"dp\",\"lp\",\"kg\"];   \n\ntunacan=new TunaCangram(\"attivitaumani\");   \narray_data_Y=[50,20,20,5,3,2];\narray_data_X=[\"caress my belly\",\"give me a tuna\",\"play with me\",\"admire me in my cat-magnificence\",\"comb my hair\",\"ample free time to dedicate to their  activities\"];\ntunacan.plot(array_data_Y,array_data_Y,\"tuna\",size_marker,grid,\"x axis\",\"tuna\",\"My humans free time organization\",[\"Avenir Next\",20],[\"Avenir Next\",20],[\"Avenir Next\",25],array_data_X,[\"Avenir Next\",12],\"right\",marker_colors,false,[\"Avenir Next\",15],false,[\"Avenir Next\",18],\"white\",true,\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio\");   \n   \n\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>The Arthurian version of the bar chart could not be missing, which we called \u201cTunaBar-gram\u201d.<\/p>\n\n\n\n<p>Normally, this chart is used to compare quantities for each category using bars to represent them. The height of the bars is related to the value of the reference category. As with the other graphs, you can enter titles and add a label above each bar with the values assumed by each category.<\/p>\n\n\n\n<p>If the categories represent a defined time frame (eg: a day, a week, a month, etc.), observing the trend of the bars can also give us information on the trend of the quantity examined over time. Or, as in the example below referred to me (maybe I&#8217;m too Art\u00f9-centric?), You can simply monitor the level of your own food supplies.<\/p>\n\n\n\n<div class=\"plot_scrollable\" align=\"center\"><canvas style=\"text-align=center\" id=\"tunabarCanvas\" height=\"430\" width=\"700\"><\/canvas><\/div>\n\n<script src=\"https:\/\/www.astroartu.studio\/tuna bar 1.js\"><\/script>\n<script>\n   var tunaplot=new Tunabargram(\"tunabarCanvas\");\n   \n   var array_data_y0;\n   var array_data_x0;\n   \n\t\t\t  \n   var array_note=[];\n   \n   var limit_line=[];\n   \n   var size_marker=30\/100;\n   \n   var grid=true;\n   \n\n   \n   array_data_y0=[[25],[2],[10],[8],[5]];\n   array_data_x0=[\"Tuna\",\"Plaice soups\",\"Tuna soups\",\"Cod soups\",\"Chicken soups\"];\n   \n   \n   tunaplot.plot([],array_data_y0,\"tuna\",size_marker,grid,\"pouches categories\",\"n \u00b0 pouches \/ boxes\",\"Level of my provisions for lunch, dinner, snack, snack...\",[\"Avenir Next\",12],[\"Avenir Next\",12],[\"Avenir Next\",15],array_data_x0,[\"Avenir Next\",12],\"down\",[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\"],array_note,[\"Avenir Next\",15],limit_line,[\"Avenir Next\",18],\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio\");\n   \n  \n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>The super worrying thing about this chart is that they are practically without plaice soups, which I love! And this gives me the opportunity to make you understand how the graph must serve as a basis for making decisions, establishing actions. Here the only possible action is to instantly send my humans to buy more plaice soups!<\/p>\n\n\n\n<p>Now I will introduce you to a graph that probably many of you have not seen yet, but which is very useful for the representation of numerical data, often divided into categories, of which you want to visualize the distribution, the central trend (median) or identify anomalous points (the so-called &#8220;outliers&#8221;). I am referring to what we have re-baptized as &#8220;TunaPlot-gram&#8221;, but which whose real name is boxplot.<\/p>\n\n\n\n<p>It\u2019s quite complex, in fact, but I will show you below how to read it (I will not bore you exaggeratedly with the statistical explanations, you can always write to me or deepen through your research). Imagining to order the data in ascending order, the parts that make up a Tunaplot-gram (and the classic boxplot) are:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image.png\" alt=\"\" class=\"wp-image-409\" width=\"700\" height=\"390\" srcset=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image.png 3138w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-300x167.png 300w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1024x571.png 1024w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-768x428.png 768w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1536x857.png 1536w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-2048x1142.png 2048w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>I specify that the rhombus between the tails of the two tuna represents the average of the values.<\/p>\n\n\n\n<p>The extension of the whiskers or of the two parts of the interquartile range separated by the median, as well as the position of the median itself, characterize the distribution of the data. Mean and median coincide if the data follow the so-called normal distribution.<\/p>\n\n\n\n<p>The passage of the pointer brings up a summary of the data of the tuna chosen, that contains: third quartile, median, average and first quartile.<\/p>\n\n\n\n<p>The example below shows the measure of the time it takes to get up, my reactivity in a nutshell, depending on the activity I have to carry out.<\/p>\n\n\n\n<div class=\"plot_scrollable\" align=\"center\"><canvas id=\"tunaPlotCanvas\" height=\"525\" width=\"700\">\n<\/canvas><\/div>\n\n<script src=\"https:\/\/www.astroartu.studio\/tuna plot 1.js\"><\/script>\n\n<script>\n\n   var array_data_y0;\n   var array_data_x0;\n   var array_note=[];   \n   var limit_line=[];\n   var size_marker;\n   var grid=true;\n\n   \n\n   array_data_y0=[[348.0,141.9,269.5,342.7,361.8,312.0,519.7,530.9,364.5,440.1,302.2,306.3,172.2,407.0,459.0,323.5,252.3,427.4,214.3,235.6,386.2,442.5,392.9,163.5,370.5],\n                  [250.6,191.5,188.9,111.6,184.5,151.9,89.9,147.6,182.7,185.3,279.7,92.8,111.2,136.3,169.5,216.7,147.1,201.2,162.3,133.6,207.7,157.7,169.2,129.1,225.1],\n\t\t\t\t  [433.0,450.3,403.8,395.8,503.3,468.1,456.1,423.5,456.8,442.0,494.3,459.7,392.8,516.3,439.6,513.0,528.9,511.2,556.3,370.1,545.4,590.8,481.9,331.6,665.0],\n\t\t\t\t  [2.5,12.7,10.5,18.4,3.5,5.0,9.4,7.7,16.6,3.8,2.6,26.9,16.5,7.0,32.5,18.5,7.0,17.8,2.0,8.1,9.9,21.4,20.7,11.7,5.3]];\n   array_data_x0=[\"without precise goals\",\"for unusual noises\",\"called by my humans\",\"tuna can opening sound\"];   \n   \ntunacan=new TunaPlotgram(\"tunaPlotCanvas\");      \n   \n   \n   \ntunacan.plot([[]],array_data_y0,\"tuna\",size_marker,grid,\"activities\",\"reactivity [s]\",\"Reactivity [s] per activity\",[\"Avenir Next\",15],[\"Avenir Next\",15],[\"Avenir Next\",20],array_data_x0,[\"Avenir Next\",12],\"down\",[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\"],array_note,[\"Avenir Next\",15],limit_line,[\"Avenir Next\",18],\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio, referring to himself\");\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p><a>As you can see, I am a master in detecting the opening of the tuna: even if I am sleeping, I sling at the speed of light to eat it!<\/a><\/p>\n\n\n\n<p>Let&#8217;s now move on to a simpler graph, the tuna-version of the line diagram: the \u201cTunaLine-gram\u201d.<\/p>\n\n\n\n<p>It is a graph that simply indicates the trend of a numerical variable (on the y axis) over time or through various points defined by the user (x axis).<\/p>\n\n\n\n<p>You can insert multiple series in the same chart, including titles, legend, lines for a possible limit value and labels of individual tuna.<\/p>\n\n\n\n<p>In my dreams (which I hope will soon come true) the TunaLine-gram of the amount of the &#8220;tuna budget&#8221; should be roughly the same as the one I show you below in the left graph, while in reality today the situation is the one proposed in graph on the right.<\/p>\n\n\n\n<div class=\"table_center\">\n<table>\n     <tbody><tr class=\"table_rows\">\n        <td><canvas id=\"tunalinegram1\" height=\"315\" width=\"700\"><\/canvas><\/td>\n\t<td><canvas id=\"tunalinegram2\" height=\"315\" width=\"700\">\n    <\/canvas><\/td><\/tr>\n\n<\/tbody><\/table>\n<\/div>\n<script src=\"https:\/\/www.astroartu.studio\/tuna line 1.js\"><\/script>\n<script>\nvar tunaplot=new Tunalinegram(\"tunalinegram1\");\n\nvar array_data_y0=[[0,10,15,25,40,45,59,70,75,89,100,105,125,150]];\n\nvar array_data_x0=[[\"dic-20\",\"gen-21\",\"feb-21\",\"mar-21\",\"apr-21\",\"mag-21\",\"giu-21\",\"lug-21\",\"ago-21\",\"set-21\",\"ott-21\",\"nov-21\",\"dic-21\",\"gen-22\"]];\n\nvar size_marker;\nsize_marker=70\/100;\n\nvar leg_pos=\"down\";   \ntunaplot.plot(array_data_x0,array_data_y0,\"tuna\",size_marker,grid,\"period\",\"number of tuna cans\",\"Trend in the tuna budget [n\u00b0 cans]: EXPECTATIONS\",[\"Avenir Next\",12],[\"Avenir Next\",12],[\"Avenir Next\",15],[\"number of tuna cans\"],[\"Avenir Next\",12],leg_pos,[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\"],false,[\"Avenir Next\",15],false,[\"Avenir Next\",18],false,true,true,\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio\");\n\nvar array_data_y0=[[0,0,0,0,0,2,2,3,2,5,3]];\nvar tunaplot2=new Tunalinegram(\"tunalinegram2\");\ntunaplot2.plot(array_data_x0,array_data_y0,\"tuna\",size_marker,grid,\"period\",\"number of tuna cans\",\"Trend in the tuna budget [n\u00b0 cans]: REALITY\",[\"Avenir Next\",12],[\"Avenir Next\",12],[\"Avenir Next\",15],[\"number of tuna cans\"],[\"Avenir Next\",12],leg_pos,[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\"],false,[\"Avenir Next\",15],false,[\"Avenir Next\",18],false,true,true,\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio\",150);  \n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>Even if the data is what it is, I do not give up and I do my best every day to reach my goal.<\/p>\n\n\n\n<p>We have arrived to the last of the tunagrams created so far by Astro Arthur, the \u201cTunaPareto-gram\u201d. Some of you have probably already heard of the Pareto chart, a descending bar chart correlated by a line chart representing the cumulative percentage. Generally it is used to visualize the main effects of various components on a phenomenon (eg: the taste of best-selling cans in a shop, etc).<\/p>\n\n\n\n<p>To further detail what I have explained, I\u2019m including a graph showing hypothetical sales of a pet shop by taste of cans\/ pouches, if all customers had my tastes. The period considered is that of one month and the unit of measurement is the number of cans or pouches.<\/p>\n\n\n\n<div class=\"plot_scrollable\" align=\"center\"><canvas id=\"tunaparetogram\" height=\"450\" width=\"700\"><\/canvas>\n<\/div>\n<script src=\"https:\/\/www.astroartu.studio\/tuna pareto 1.js\"><\/script>\n\n<script>\n   \n\n   var array_data_y0;\n   var array_data_x0;\n   \n   \n   \n\t\t\t\t\n   array_data_y0=[0.49,0.49,0.49,0.49,0.49,0.49];\n   array_data_y0=[7586,4200,3221,1560,1100,750,420   ];\n\n   array_data_x0=[\"tuna\",\" plaice  (soup)\",\"   tuna  (soup)\",\"cod (soup)\",\"chicken  (soup)\",\"  turkey (soup)\",\"beef\"];\t\t  \n   var array_note=[];\n   \n\t\t\t   \n   var limit_line=[];\n   \n   var size_marker=30\/100;\n   \n   \n   var grid=true;\n   \n\n   \n\t   \n   \n   \n   tunapareto=new TunaParetogram(\"tunaparetogram\");\n   tunapareto.plot(array_data_x0,array_data_y0,\"tuna\",size_marker,grid,\"Can\/ pouch taste\",\"number of pieces sold\",\"Number of pieces sold\",[\"Avenir Next\",15],[\"Avenir Next\",15],[\"Avenir Next\",20],[\"Avenir Next\",12],\"down\",[\"r\",\"b\",\"o\",\"y\",\"lb\",\"lg\",\"lba\"],array_note,[\"Avenir Next\",15],limit_line,[\"Avenir Next\",18],[\"Avenir Next\",16],\"Created by Art\u00f9, cat-magnificent CCEO of AstroArt\u00f9.studio\",\"cumulative percentage %\");\n   \n   \n   \n   \n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>Perfect guys, I&#8217;d say that&#8217;s all for this article: I&#8217;m delighted to have shared our creation with us and I trust that this new form of representing data can entertain you here on our AstroArt\u00f9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-1024x846.png\" alt=\"\" class=\"wp-image-484\" width=\"59\" height=\"49\" srcset=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-1024x846.png 1024w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-300x248.png 300w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-768x634.png 768w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1.png 1475w\" sizes=\"auto, (max-width: 59px) 100vw, 59px\" \/><\/figure>\n\n\n\n<p>Meow bye-bye!<\/p>\n\n\n\n<p>P.S .: As CCEO, I am happy to announce the release of new exciting emojis, the Piccicons !!!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-1024x846.png\" alt=\"\" class=\"wp-image-484\" width=\"74\" height=\"61\" srcset=\"https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-1024x846.png 1024w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-300x248.png 300w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1-768x634.png 768w, https:\/\/www.astroartu.studio\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-1.png 1475w\" sizes=\"auto, (max-width: 74px) 100vw, 74px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-right\">AstroArtu.Studio CCEO <\/p>\n\n\n\n<div style=\"text-align: right;\">Art\u00f9  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.astroartu.studio\/wp-content\/uploads\/2021\/10\/image-6.png\" alt=\"\" class=\"zampa\" width=\"58\" height=\"56\">\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hi guys! As CCEO (Cat CEO) of this website, for some time now I have been looking for the best way to communicate data graphically, both internally to our staff and for the articles we prepare for you. It already seemed all seen and seen again and, therefore, super boring &#8230; when I had the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.astroartu.studio\/en\/2021\/10\/24\/tunagramms\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Tunagramms!&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-407","post","type-post","status-publish","format-standard","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/posts\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":90,"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/posts\/407\/revisions\/499"}],"wp:attachment":[{"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/media?parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/categories?post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.astroartu.studio\/en\/wp-json\/wp\/v2\/tags?post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}