{"id":4024,"date":"2025-05-20T11:31:57","date_gmt":"2025-05-20T11:31:57","guid":{"rendered":"https:\/\/www.creadata.com.tr\/?page_id=4024"},"modified":"2025-06-04T09:50:44","modified_gmt":"2025-06-04T09:50:44","slug":"timeky0iep-2","status":"publish","type":"page","link":"https:\/\/www.creadata.com.tr\/en\/timeky0iep-2\/","title":{"rendered":"Comet Chart"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:18%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/kuyrukluyildiz-ing-badge-min-1024x1024.png\" alt=\"\" class=\"wp-image-4025\" style=\"width:205px\" srcset=\"https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/kuyrukluyildiz-ing-badge-min-1024x1024.png 1024w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/kuyrukluyildiz-ing-badge-min-300x300.png 300w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/kuyrukluyildiz-ing-badge-min-150x150.png 150w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/kuyrukluyildiz-ing-badge-min-768x768.png 768w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/kuyrukluyildiz-ing-badge-min.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:82%\">\n<p>When we want to show the change between before-after values in a dataset, we can use the comet chart which is a type of lane charts. In this chart, the current values are shown with a circle, the previous values are shown with the sharp tip of a triangle, and the differences are compared by the length between them. This allows us to clearly see the position of the current value, while the previous value appears smaller and less significant. As the direction of the difference is also important, we can express this by using color.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p style=\"font-style:normal;font-weight:700\">VISUAL PERFORMANCE CHART<\/p>\n\n\n\n<style>\n  .rating-grid {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    max-width: 1000px;\n    margin: 0 auto;\n    text-align: center;\n  }\n\n  .rating-item {\n    flex: 0 0 20%;\n    max-width: 20%;\n    box-sizing: border-box;\n    padding: 12px;\n    font-size: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  .rating-label {\n    min-height: 36px; \/* sabit y\u00fckseklik \u2014 hem tek hem \u00e7ift sat\u0131ra uyar *\/\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    line-height: 1.2;\n  }\n\n  .rating-stars {\n    font-size: 15px;\n    color: #f4c700;\n    margin-top: 6px;\n  }\n\n  @media (max-width: 600px) {\n    .rating-item {\n      flex: 0 0 30%;\n      max-width: 30%;\n    }\n\n    .rating-grid .rating-item:nth-child(4),\n    .rating-grid .rating-item:nth-child(5) {\n      flex: 0 0 45%;\n      max-width: 45%;\n    }\n  }\n<\/style>\n\n<div class=\"rating-grid\">\n  <div class=\"rating-item\">\n    <div class=\"rating-label\">Information<br>Density<\/div>\n    <div class=\"rating-stars\">\u2605\u2605\u2605\u2605\u2606<\/div>\n  <\/div>\n  <div class=\"rating-item\">\n    <div class=\"rating-label\">Visual<br>Readability<\/div>\n    <div class=\"rating-stars\">\u2605\u2605\u2605\u2605\u2606<\/div>\n  <\/div>\n  <div class=\"rating-item\">\n    <div class=\"rating-label\">Ease of<br>Creation<\/div>\n    <div class=\"rating-stars\">\u2605\u2605\u2606\u2606\u2606<\/div>\n  <\/div>\n  <div class=\"rating-item\">\n    <div class=\"rating-label\">Familiarity<\/div>\n    <div class=\"rating-stars\">\u2605\u2606\u2606\u2606\u2606<\/div>\n  <\/div>\n  <div class=\"rating-item\">\n    <div class=\"rating-label\">Attractiveness<\/div>\n    <div class=\"rating-stars\">\u2605\u2605\u2605\u2605\u2606<\/div>\n  <\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p style=\"font-style:normal;font-weight:700\">VISUAL CREATION PLATFORMS<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"14910\" height=\"2843\" src=\"https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING.png\" alt=\"\" class=\"wp-image-4990\" style=\"width:1171px\" srcset=\"https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING.png 14910w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING-300x57.png 300w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING-1024x195.png 1024w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING-768x146.png 768w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING-1536x293.png 1536w, https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/05\/Kulvar-Kuyruklu-Yildiz-ING-2048x391.png 2048w\" sizes=\"auto, (max-width: 14910px) 100vw, 14910px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Do you have any ideas or examples related to this graphic that you would like to see published here?<\/strong><\/p>\n<a href=\"https:\/\/docs.google.com\/forms\/d\/15w1RE4B0f_56iYeW7m5o0_y9CBwXmug7Qv80kn75PtE\/viewform\" target=\"_blank\" style=\"padding: 10px 20px; background-color: #2a7ae4; color: white; text-decoration: none; border-radius: 5px;\" rel=\"noopener\">\nShare Here\n<\/a>","protected":false},"excerpt":{"rendered":"<p>When we want to show the change between before-after values in a dataset, we can use the comet chart which is a type of lane charts. In this chart, the current values are shown with a circle, the previous values are shown with the sharp tip of a triangle, and the differences are compared by [&hellip;]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4024","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/4024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/comments?post=4024"}],"version-history":[{"count":3,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/4024\/revisions"}],"predecessor-version":[{"id":5831,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/4024\/revisions\/5831"}],"wp:attachment":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/media?parent=4024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}