{"id":8068,"date":"2023-11-02T09:19:55","date_gmt":"2023-11-02T17:19:55","guid":{"rendered":"https:\/\/live-cometml.pantheonsite.io\/?p=8068"},"modified":"2025-04-24T17:04:57","modified_gmt":"2025-04-24T17:04:57","slug":"how-to-integrate-d3-js-graphs-in-a-comet-panel","status":"publish","type":"post","link":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel\/","title":{"rendered":"How to Integrate D3.js Graphs in a Comet Panel"},"content":{"rendered":"\n<div class=\"fl fm fn fo fp\">\n<div class=\"ab ca\">\n<div class=\"ch bg ex ey ez fa\">\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl\" alt=\"\" width=\"700\" height=\"499\"><\/figure><div class=\"mq mr ms\"><picture><\/picture><\/div>\n<\/div><figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Photo by <a class=\"af nk\" href=\"https:\/\/unsplash.com\/@kmuza?utm_source=medium&amp;utm_medium=referral\" target=\"_blank\" rel=\"noopener ugc nofollow\">Carlos Muza<\/a> on <a class=\"af nk\" href=\"https:\/\/unsplash.com\/?utm_source=medium&amp;utm_medium=referral\" target=\"_blank\" rel=\"noopener ugc nofollow\">Unsplash<\/a><\/figcaption><\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"1059\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\"><a class=\"af nk\" href=\"https:\/\/www.comet.com\/\" target=\"_blank\" rel=\"noopener ugc nofollow\">Comet<\/a> is an experimentation platform for monitoring and tracking your Machine Learning experiments. You can also use Comet to build your reports, that show your experiments to your teammates or your clients. While building a report, you can use the built-in panels, or build your own, using the very powerful SDK provided by the online dashboard.<\/p>\n<p id=\"ee8d\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">In this article, I describe an overview of the Comet SDK, as well as a practical example, which shows you how to build a Comet Panel using the D3.js Javascript library.<\/p>\n<p id=\"ae78\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The article is organized as follows:<\/p>\n<ul class=\"\">\n<li id=\"e4d9\" class=\"nl nm fs be b gv nn no np gy nq nr ns nt og nv nw nx oh nz oa ob oi od oe of oj ok ol bj\" data-selectable-paragraph=\"\">Overview of the Comet SDK<\/li>\n<li id=\"3555\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\">The <code class=\"cw or os ot ou b\">Comet.Panel<\/code> class<\/li>\n<li id=\"1b42\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\">The <code class=\"cw or os ot ou b\">API<\/code> class<\/li>\n<li id=\"c4f6\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\">A practical example of using D3.js<\/li>\n<\/ul>\n<h2 id=\"dcbb\" class=\"ov ow fs be ox oy oz gx pa pb pc ha pd pe pf pg ph pi pj pk pl pm pn po pp pq bj\">Overview of the Comet SDK<\/h2>\n<p id=\"d0b9\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">Comet provides an online SDK to build custom panels. You can write your custom panels either in Python or in Javascript:<\/p>\n<ul class=\"\">\n<li id=\"e477\" class=\"nl nm fs be b gv nn no np gy nq nr ns nt og nv nw nx oh nz oa ob oi od oe of oj ok ol bj\" data-selectable-paragraph=\"\">The Python SDK supports the most popular libraries, including matplotlib and Pandas.<\/li>\n<li id=\"c14a\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\">The Javascript SDK permits you to include any library that is available on the Web.<\/li>\n<\/ul>\n<p id=\"4675\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">To access the Comet SDK, you can click on the <strong class=\"be pw\">+Add<\/strong> button, located in the top right part of your experiment dashboard, and then select <strong class=\"be pw\">New Panel, <\/strong>as shown in the following figure:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:568\/1*mNKaMjbVHarfW5hbQuZuMg.png\" alt=\"\" width=\"568\" height=\"532\"><\/figure><div class=\"mq mr px\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1136\/format:webp\/1*mNKaMjbVHarfW5hbQuZuMg.png 1136w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 568px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*mNKaMjbVHarfW5hbQuZuMg.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*mNKaMjbVHarfW5hbQuZuMg.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*mNKaMjbVHarfW5hbQuZuMg.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*mNKaMjbVHarfW5hbQuZuMg.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*mNKaMjbVHarfW5hbQuZuMg.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*mNKaMjbVHarfW5hbQuZuMg.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1136\/1*mNKaMjbVHarfW5hbQuZuMg.png 1136w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 568px\" data-testid=\"og\"><\/picture><\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"0fcd\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">A popup window opens. You can select the <strong class=\"be pw\">+Create New<\/strong> button to access the Comet SDK, which is shown in the following figure:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*EE84olko04EVArHXam6fbA.png\" alt=\"\" width=\"700\" height=\"318\"><\/figure><div class=\"mq mr py\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*EE84olko04EVArHXam6fbA.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*EE84olko04EVArHXam6fbA.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*EE84olko04EVArHXam6fbA.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*EE84olko04EVArHXam6fbA.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*EE84olko04EVArHXam6fbA.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*EE84olko04EVArHXam6fbA.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/format:webp\/1*EE84olko04EVArHXam6fbA.png 1400w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*EE84olko04EVArHXam6fbA.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*EE84olko04EVArHXam6fbA.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*EE84olko04EVArHXam6fbA.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*EE84olko04EVArHXam6fbA.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*EE84olko04EVArHXam6fbA.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*EE84olko04EVArHXam6fbA.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/1*EE84olko04EVArHXam6fbA.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\"><\/picture><\/div>\n<\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"5586\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">In the top right part of the screen, you can select your preferred language, either Python or Javascript. In this article, I focus on Javascript, but a similar approach can be followed in Python.<\/p>\n<p id=\"abc5\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">If you select Javascript as the main language, you can see that the code on the left changes. The editor provides different tabs, which you can use to configure your panel, as shown in the following figure:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*NW1b9MH47FUioBx6bfekJw.png\" alt=\"\" width=\"700\" height=\"76\"><\/figure><div class=\"mq mr pz\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/format:webp\/1*NW1b9MH47FUioBx6bfekJw.png 1400w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*NW1b9MH47FUioBx6bfekJw.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*NW1b9MH47FUioBx6bfekJw.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*NW1b9MH47FUioBx6bfekJw.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*NW1b9MH47FUioBx6bfekJw.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*NW1b9MH47FUioBx6bfekJw.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*NW1b9MH47FUioBx6bfekJw.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/1*NW1b9MH47FUioBx6bfekJw.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\"><\/picture><\/div>\n<\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"1bd3\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Under the <strong class=\"be pw\">HTML<\/strong> tab, you can configure your HTML code, including the containers which will contain your graphs. Under the <strong class=\"be pw\">Resources<\/strong> tab, you can add your preferred Javascript libraries, simply by adding their URLs, as shown in the following figure:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*W6qotgdPNtcK4MEKNRyF5Q.png\" alt=\"\" width=\"700\" height=\"479\"><\/figure><div class=\"mq mr qa\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/format:webp\/1*W6qotgdPNtcK4MEKNRyF5Q.png 1400w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*W6qotgdPNtcK4MEKNRyF5Q.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*W6qotgdPNtcK4MEKNRyF5Q.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*W6qotgdPNtcK4MEKNRyF5Q.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*W6qotgdPNtcK4MEKNRyF5Q.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*W6qotgdPNtcK4MEKNRyF5Q.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*W6qotgdPNtcK4MEKNRyF5Q.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/1*W6qotgdPNtcK4MEKNRyF5Q.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\"><\/picture><\/div>\n<\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"2c81\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The Comet SDK already provides the <strong class=\"be pw\">Plotly.js <\/strong>library. However, you can disable it, simply by clicking on the corresponding button.<\/p>\n<h2 id=\"b5f3\" class=\"ov ow fs be ox oy oz gx pa pb pc ha pd pe pf pg ph pi pj pk pl pm pn po pp pq bj\">The Comet.Panel class<\/h2>\n<p id=\"5965\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">To build a custom Panel in Javascript, you need to create a class, which extends the <code class=\"cw or os ot ou b\">Comet.Panel<\/code> class, as follows:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"8f94\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">class MyPanel extends Comet.Panel {\n   async draw(experimentKeys, projectId);\n}<\/span><\/pre>\n<p id=\"3f96\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">This class must implement at least the <code class=\"cw or os ot ou b\">draw()<\/code> method, which draws the Panel. This method receives as input the list of experiment keys and the project id. If you want to deal with a specific experiment, you can use the <code class=\"cw or os ot ou b\">drawOne()<\/code> method, which receives as input a single experiment.<\/p>\n<p id=\"407c\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The Panel can also receive as input some parametric options, which can be changed dynamically without changing the code. In this case, you need to also define an additional method, named <code class=\"cw or os ot ou b\">setup()<\/code>, which contains the default values for the options:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"5ed7\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">setup(){\n  this.options.myparameter = &lt;MY_DEFAULT_VALUE&gt;;<\/span><span id=\"6158\" class=\"qf ow fs ou b ii qj qh l jb qi\" data-selectable-paragraph=\"\">}<\/span><\/pre>\n<p id=\"b513\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">All the options you define will be available under the <strong class=\"be pw\">Options<\/strong> tab when you will add the Panel to your project.<\/p>\n<p id=\"b185\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">For more details on the methods provided by the <code class=\"cw or os ot ou b\">Comet.Panel<\/code> you can read the <a class=\"af nk\" href=\"https:\/\/www.comet.com\/docs\/javascript-sdk\/getting-started\/\" target=\"_blank\" rel=\"noopener ugc nofollow\">Comet official documentation<\/a>.<\/p>\n<p id=\"e0c7\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Once you create the Panel, you can add it to your project, by clicking <strong class=\"be pw\">+Add<\/strong>\u2192<strong class=\"be pw\">New Panel<\/strong> \u2192<strong class=\"be pw\">Workspace<\/strong> \u2192&lt;YOUR_PANEL&gt;.<\/p>\n<h2 id=\"7f33\" class=\"ov ow fs be ox oy oz gx pa pb pc ha pd pe pf pg ph pi pj pk pl pm pn po pp pq bj\">The API class<\/h2>\n<p id=\"7e4c\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">Within a Panel, you can access all the objects logged in Comet through the <code class=\"cw or os ot ou b\">API<\/code> class. The <code class=\"cw or os ot ou b\">Comet.Panel<\/code> provides an <code class=\"cw or os ot ou b\">API<\/code> object, which you can use to access all the Comet experiments.<\/p>\n<p id=\"360a\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">For example, you can access the experiment name, given its key, as follows:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"24e8\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">const name = this.api.<strong class=\"ou gc\">experimentName<\/strong>(experimentKey)<\/span><\/pre>\n<p id=\"9217\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">and you can get a specific asset through the <code class=\"cw or os ot ou b\">this.api.experimentAssetByName()<\/code> method.<\/p>\n<p id=\"5373\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">For more details on the methods provided by the API class, you can refer to the <a class=\"af nk\" href=\"https:\/\/www.comet.com\/docs\/javascript-sdk\/getting-started\/#javascript-api\" target=\"_blank\" rel=\"noopener ugc nofollow\">Comet official documentation<\/a>.<\/p>\n<h2 id=\"66d4\" class=\"ov ow fs be ox oy oz gx pa pb pc ha pd pe pf pg ph pi pj pk pl pm pn po pp pq bj\">A practical example using D3.js<\/h2>\n<p id=\"cc7b\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">We can now implement a practical example, which draws the following graph within a Comet Panel:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*QE1L4LSKZRWf18LoQx5tUQ.png\" alt=\"\" width=\"700\" height=\"639\"><\/figure><div class=\"mq mr qk\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/format:webp\/1*QE1L4LSKZRWf18LoQx5tUQ.png 1400w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*QE1L4LSKZRWf18LoQx5tUQ.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*QE1L4LSKZRWf18LoQx5tUQ.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*QE1L4LSKZRWf18LoQx5tUQ.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*QE1L4LSKZRWf18LoQx5tUQ.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*QE1L4LSKZRWf18LoQx5tUQ.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*QE1L4LSKZRWf18LoQx5tUQ.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/1*QE1L4LSKZRWf18LoQx5tUQ.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\"><\/picture><\/div>\n<\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"649e\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The example uses a dataset provided by the Stockholm International Peace Research Institute, containing the <em class=\"ql\">number of weapons exported by the top 50 largest exporters in 2017.<\/em> You can download the dataset <a class=\"af nk\" href=\"https:\/\/raw.githubusercontent.com\/holtzy\/data_to_viz\/master\/Example_dataset\/7_OneCatOneNum_header.csv\" target=\"_blank\" rel=\"noopener ugc nofollow\">from this link<\/a>.<\/p>\n<p id=\"5be5\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The idea is to build a Comet experiment, which logs the dataset as an asset, retrieves it from the Comet Panel, and uses it to build the graph.<\/p>\n<p id=\"aee7\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The example is organized into two parts:<\/p>\n<ul class=\"\">\n<li id=\"b67d\" class=\"nl nm fs be b gv nn no np gy nq nr ns nt og nv nw nx oh nz oa ob oi od oe of oj ok ol bj\" data-selectable-paragraph=\"\">Log the dataset in Comet<\/li>\n<li id=\"d8f4\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\">Build the Panel using the Comet SDK and D3.js<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"fl fm fn fo fp\">\n<div class=\"ab ca\">\n<div class=\"ch bg ex ey ez fa\">\n<blockquote class=\"qu\"><p id=\"8cfc\" class=\"qv qw fs be qx qy qz ra rb rc rd of dw\" data-selectable-paragraph=\"\"><a class=\"af nk\" href=\"https:\/\/www.comet.com\/site\/\" target=\"_blank\" rel=\"noopener ugc nofollow\">Comet is free for students and start-ups<\/a> \u2014 try Panels today to visualize your work and collaborate across your team.<\/p><\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"fl fm fn fo fp\">\n<div class=\"ab ca\">\n<div class=\"ch bg ex ey ez fa\">\n<h2 id=\"8748\" class=\"qf ow fs be ox re rf rg pa rh ri rj pd nt rk rl rm nx rn ro rp ob rq rr rs fy bj\" data-selectable-paragraph=\"\">Log the dataset in Comet<\/h2>\n<p id=\"f1bf\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">Firstly, I load the dataset as a Pandas dataframe:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"ded1\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">import pandas as pd<\/span><span id=\"fa96\" class=\"qf ow fs ou b ii qj qh l jb qi\" data-selectable-paragraph=\"\">df = pd.read_csv('<a class=\"af nk\" href=\"https:\/\/raw.githubusercontent.com\/holtzy\/data_to_viz\/master\/Example_dataset\/7_OneCatOneNum_header.csv'\" target=\"_blank\" rel=\"noopener ugc nofollow\">https:\/\/raw.githubusercontent.com\/holtzy\/data_to_viz\/master\/Example_dataset\/7_OneCatOneNum_header.csv'<\/a>)<\/span><\/pre>\n<p id=\"eba0\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Here is a snapshot of the dataset:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:376\/1*erBzIxNW5InW82zO-NU-CA.png\" alt=\"\" width=\"376\" height=\"358\"><\/figure><div class=\"mq mr rt\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:752\/format:webp\/1*erBzIxNW5InW82zO-NU-CA.png 752w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 376px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*erBzIxNW5InW82zO-NU-CA.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*erBzIxNW5InW82zO-NU-CA.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*erBzIxNW5InW82zO-NU-CA.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*erBzIxNW5InW82zO-NU-CA.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*erBzIxNW5InW82zO-NU-CA.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*erBzIxNW5InW82zO-NU-CA.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:752\/1*erBzIxNW5InW82zO-NU-CA.png 752w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 376px\" data-testid=\"og\"><\/picture><\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"f1ef\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Then, I build a Comet experiment:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"4dac\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">from comet_ml import Experiment<\/span><span id=\"57cf\" class=\"qf ow fs ou b ii qj qh l jb qi\" data-selectable-paragraph=\"\">experiment = Experiment(project_name=\"d3-example\")<\/span><\/pre>\n<p id=\"8e8d\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">and I log the dataframe in Comet:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"2cc9\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">experiment.log_table('data.csv', tabular_data=df)<\/span><\/pre>\n<p id=\"1d90\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">I run the experiment. Once it is completed, I can see the data.csv file under the <strong class=\"be pw\">Assets &amp; Artifacts<\/strong> section of the Comet experiment, as shown in the following figure:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*n5moNe7GAzHAxRrLj-TdmQ.png\" alt=\"\" width=\"700\" height=\"560\"><\/figure><div class=\"mq mr ru\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/format:webp\/1*n5moNe7GAzHAxRrLj-TdmQ.png 1400w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*n5moNe7GAzHAxRrLj-TdmQ.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*n5moNe7GAzHAxRrLj-TdmQ.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*n5moNe7GAzHAxRrLj-TdmQ.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*n5moNe7GAzHAxRrLj-TdmQ.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*n5moNe7GAzHAxRrLj-TdmQ.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*n5moNe7GAzHAxRrLj-TdmQ.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/1*n5moNe7GAzHAxRrLj-TdmQ.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\"><\/picture><\/div>\n<\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<h2 id=\"6618\" class=\"qf ow fs be ox re rf rg pa rh ri rj pd nt rk rl rm nx rn ro rp ob rq rr rs fy bj\" data-selectable-paragraph=\"\">Build the Panel using the Comet SDK and D3.js<\/h2>\n<p id=\"71ed\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">I access the Comet SDK and I select Javascript as the programming language. I configure the Resources sections with these two URLs:<\/p>\n<ul class=\"\">\n<li id=\"6b49\" class=\"nl nm fs be b gv nn no np gy nq nr ns nt og nv nw nx oh nz oa ob oi od oe of oj ok ol bj\" data-selectable-paragraph=\"\"><a class=\"af nk\" href=\"https:\/\/d3js.org\/d3.v5.min.js\" target=\"_blank\" rel=\"noopener ugc nofollow\">https:\/\/d3js.org\/d3.v5.min.js<\/a><\/li>\n<li id=\"a9c2\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\"><a class=\"af nk\" href=\"https:\/\/rawgit.com\/susielu\/d3-annotation\/master\/d3-annotation.min.js\" target=\"_blank\" rel=\"noopener ugc nofollow\">https:\/\/rawgit.com\/susielu\/d3-annotation\/master\/d3-annotation.min.js<\/a><\/li>\n<\/ul>\n<p id=\"2e5c\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The second URL permits you to add annotations to a D3 graph.<\/p>\n<p id=\"a217\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Now I configure the HTML tab, with the following container:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"4523\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">&lt;div id=\"bar\"&gt;&lt;\/div&gt;<\/span><\/pre>\n<p id=\"6a76\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">I\u2019m ready to write my Panel:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"a120\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">class MyPanel extends Comet.Panel {\n  setup() {}\n  async drawGraph(data_string){}\n  async draw(experimentKeys, projectId) {}\n}<\/span><\/pre>\n<p id=\"66b3\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The class defines 3 methods:<\/p>\n<ul class=\"\">\n<li id=\"4fbd\" class=\"nl nm fs be b gv nn no np gy nq nr ns nt og nv nw nx oh nz oa ob oi od oe of oj ok ol bj\" data-selectable-paragraph=\"\"><code class=\"cw or os ot ou b\">setup()<\/code> \u2014 to configure options<\/li>\n<li id=\"fd56\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\"><code class=\"cw or os ot ou b\">drawGraph()<\/code> \u2014 an async method that will draw the D3 graph<\/li>\n<li id=\"94f6\" class=\"nl nm fs be b gv om no np gy on nr ns nt oo nv nw nx op nz oa ob oq od oe of oj ok ol bj\" data-selectable-paragraph=\"\"><code class=\"cw or os ot ou b\">draw()<\/code> \u2014 the default Comet.Panel method to build a graph<\/li>\n<\/ul>\n<p id=\"69da\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The setup method defines the options:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"b4f7\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\"><strong class=\"ou gc\">setup() <\/strong>{\n    this.options = {\n      width : 460,\n      height : 400,\n    };\n  }<\/span><\/pre>\n<p id=\"6bfb\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">I consider the graph width and height as default options.<\/p>\n<p id=\"26b0\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The <code class=\"cw or os ot ou b\">draw()<\/code> method retrieves for each experiment the associated asset through the <code class=\"cw or os ot ou b\">experimentAssetByName()<\/code>. Note the use of the await keyword to wait until data is ready. Then it calls the <code class=\"cw or os ot ou b\">drawGraph()<\/code> method to draw the D3 graph. The <code class=\"cw or os ot ou b\">experimentAssetByName()<\/code> method returns the asset as a string, so I need to convert it to an object processable by D3 within the <code class=\"cw or os ot ou b\">drawGraph()<\/code>method.<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"5047\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">async draw(experimentKeys, projectId) {\n    experimentKeys.forEach(async experimentKey =&gt; {\n       const data = await this.api.experimentAssetByName(experimentKey,\n                   'data.csv');\n\n         this.drawGraph(data);\n\n   });\n  }<\/span><\/pre>\n<p id=\"0953\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Within the drawGraph() method, firstly, I define margins:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"e11d\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">var margin = {top: 20, right: 30, bottom: 40, left: 90},\n    width = this.options.width - margin.left - margin.right,\n    height = this.options.height - margin.top - margin.bottom;<\/span><\/pre>\n<p id=\"9759\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Then, I retrieve the div from the HTML and I append to it an SVG object:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"592c\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">var svg = d3.select(\"#bar\")\n  .append(\"svg\")\n    .attr(\"width\", width + margin.left + margin.right)\n    .attr(\"height\", height + margin.top + margin.bottom)\n  .append(\"g\")\n    .attr(\"transform\",\n          \"translate(\" + margin.left + \",\" + margin.top + \")\");<\/span><\/pre>\n<p id=\"b224\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Now, I convert the data passed as a string to object, by calling the <code class=\"cw or os ot ou b\">d3.Parse()<\/code>function. I also apply a preprocessing function, which organizes data:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"80c7\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">var data = await d3.csvParse(data_string, function(d) {\n\n  return {Country: d.Country, Value: +d.Value};\n});<\/span><\/pre>\n<p id=\"76f4\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">I order the data:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"a1d1\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">data.sort(function(x, y){return d3.descending(x.Value, y.Value);})<\/span><\/pre>\n<p id=\"b35f\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">I add the two axes:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"c0fe\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">var x = d3.scaleLinear()\n    .domain([0, 13000])\n    .range([ 0, width]);\n  svg.append(\"g\")\n    .attr(\"transform\", \"translate(0,\" + height + \")\")\n    .call(d3.axisBottom(x))\n    .selectAll(\"text\")\n      .attr(\"transform\", \"translate(-10,0)rotate(-45)\")\n      .style(\"text-anchor\", \"end\");<\/span><span id=\"4b59\" class=\"qf ow fs ou b ii qj qh l jb qi\" data-selectable-paragraph=\"\">\/\/ Y axis\n  var y = d3.scaleBand()\n    .range([ 0, height ])\n    .domain(data.map(function(d) { return d.Country; }))\n    .padding(.1);\n  svg.append(\"g\")\n    .call(d3.axisLeft(y))<\/span><\/pre>\n<p id=\"79e5\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">and the bars:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"a754\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">svg.selectAll(\"myRect\")\n    .data(data)\n    .enter()\n    .append(\"rect\")\n    .attr(\"x\", x(50) )\n    .attr(\"y\", function(d) { return y(d.Country); })\n    .attr(\"width\", function(d) { return x(d.Value); })\n    .attr(\"height\", y.bandwidth() )\n    .attr(\"fill\", function(d){ if (d.Country == 'France') return \"#000000\" ; else return \"#a3a3c2\"})<\/span><\/pre>\n<p id=\"f4fa\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Finally, I add the annotations:<\/p>\n<pre class=\"mt mu mv mw mx qb ou qc qd ax qe bj\"><span id=\"64b6\" class=\"qf ow fs ou b ii qg qh l jb qi\" data-selectable-paragraph=\"\">const annotations = [\n    {\n    note: {\n      label: \"Thanks to its marketing policy, in 2021 France has reached the third position.\",\n      title: \"France product sales\",\n      wrap: 200,  \/\/ try something smaller to see text split in several lines\n      padding: 10   \/\/ More = text lower\n\n    },\n    color: [\"#000000\"],\n    x: x(2500),\n    y: 100,\n    dy: 100,\n    dx: 100\n  }\n]<\/span><span id=\"97a6\" class=\"qf ow fs ou b ii qj qh l jb qi\" data-selectable-paragraph=\"\">\/\/ Add annotation to the chart\nconst makeAnnotations = d3.annotation()\n  .annotations(annotations)<\/span><span id=\"76c3\" class=\"qf ow fs ou b ii qj qh l jb qi\" data-selectable-paragraph=\"\">svg.append(\"g\")\n  .call(makeAnnotations)<\/span><\/pre>\n<p id=\"dae6\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">The following graph shows the result in the Comet SDK:<\/p>\n<figure class=\"mt mu mv mw mx my mq mr paragraph-image\">\n<div class=\"mz na ee nb bg nc\" tabindex=\"0\" role=\"button\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"bg nd ne c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*rKV19GY2ZCWrL0MyaKMPmw.png\" alt=\"\" width=\"700\" height=\"316\"><\/figure><div class=\"mq mr rv\"><picture><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/format:webp\/1*rKV19GY2ZCWrL0MyaKMPmw.png 1400w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\"><source srcset=\"https:\/\/miro.medium.com\/v2\/resize:fit:640\/1*rKV19GY2ZCWrL0MyaKMPmw.png 640w, https:\/\/miro.medium.com\/v2\/resize:fit:720\/1*rKV19GY2ZCWrL0MyaKMPmw.png 720w, https:\/\/miro.medium.com\/v2\/resize:fit:750\/1*rKV19GY2ZCWrL0MyaKMPmw.png 750w, https:\/\/miro.medium.com\/v2\/resize:fit:786\/1*rKV19GY2ZCWrL0MyaKMPmw.png 786w, https:\/\/miro.medium.com\/v2\/resize:fit:828\/1*rKV19GY2ZCWrL0MyaKMPmw.png 828w, https:\/\/miro.medium.com\/v2\/resize:fit:1100\/1*rKV19GY2ZCWrL0MyaKMPmw.png 1100w, https:\/\/miro.medium.com\/v2\/resize:fit:1400\/1*rKV19GY2ZCWrL0MyaKMPmw.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\"><\/picture><\/div>\n<\/div>\n<figcaption class=\"nf ng nh mq mr ni nj be b bf z dw\" data-selectable-paragraph=\"\">Image by Author<\/figcaption>\n<\/figure>\n<p data-selectable-paragraph=\"\">\n<\/p><p id=\"b672\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Now, you can save the Panel and add it to your project.<\/p>\n<h1 id=\"4a85\" class=\"ov ow fs be ox oy oz gx pa pb pc ha pd pe pf pg ph pi pj pk pl pm pn po pp pq bj\" data-selectable-paragraph=\"\">Summary<\/h1>\n<p id=\"e9fc\" class=\"pw-post-body-paragraph nl nm fs be b gv pr no np gy ps nr ns nt pt nv nw nx pu nz oa ob pv od oe of fl bj\" data-selectable-paragraph=\"\">Congratulations! You have just learned how to integrate D3.js charts in the Comet SDK! After an initial configuration, you can write your Javascript code as you usually do in Javascript!<\/p>\n<p id=\"4284\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">You can access the live example used in this article directly in Comet at <a class=\"af nk\" href=\"https:\/\/www.comet.com\/embedded\/?instanceId=ps0Xshv7dDWno0573QC7FZlmn&amp;projectId=f76a135beff3455283adf0e55deb9971&amp;templateId=xPiZ4qbGE7ZD3FFc1vqKdENEQ&amp;viewId=new\" target=\"_blank\" rel=\"noopener ugc nofollow\">this link<\/a>.<\/p>\n<p id=\"8283\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Comet is a very powerful platform, which can be used for different purposes. For example, you can <a class=\"af nk\" href=\"https:\/\/heartbeat.comet.ml\/how-to-compare-two-or-more-experiments-in-comet-4888ac3aa53e\" target=\"_blank\" rel=\"noopener ugc nofollow\">compare two or more experiments in Comet<\/a> or use the <a class=\"af nk\" href=\"https:\/\/heartbeat.comet.ml\/how-to-use-the-comet-registry-to-track-your-machine-learning-models-4b18e7f61500\" target=\"_blank\" rel=\"noopener ugc nofollow\">Comet Registry to track your Machine Learning models<\/a>.<\/p>\n<p id=\"5312\" class=\"pw-post-body-paragraph nl nm fs be b gv nn no np gy nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of fl bj\" data-selectable-paragraph=\"\">Happy coding! Happy Comet!<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Photo by Carlos Muza on Unsplash Comet is an experimentation platform for monitoring and tracking your Machine Learning experiments. You can also use Comet to build your reports, that show your experiments to your teammates or your clients. While building a report, you can use the built-in panels, or build your own, using the very [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"customer_name":"","customer_description":"","customer_industry":"","customer_technologies":"","customer_logo":"","footnotes":""},"categories":[9,7],"tags":[],"coauthors":[132],"class_list":["post-8068","post","type-post","status-publish","format-standard","hentry","category-product","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Integrate D3.js Graphs in a Comet Panel - Comet<\/title>\n<meta name=\"description\" content=\"Get an overview of the Comet SDK, as well as a practical example that shows how to build a Comet Panel using the D3.js Javascript library.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate D3.js Graphs in a Comet Panel\" \/>\n<meta property=\"og:description\" content=\"Get an overview of the Comet SDK, as well as a practical example that shows how to build a Comet Panel using the D3.js Javascript library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel\" \/>\n<meta property=\"og:site_name\" content=\"Comet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cometdotml\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-02T17:19:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T17:04:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl\" \/>\n<meta name=\"author\" content=\"Angelica Lo Duca\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Cometml\" \/>\n<meta name=\"twitter:site\" content=\"@Cometml\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angelica Lo Duca\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Integrate D3.js Graphs in a Comet Panel - Comet","description":"Get an overview of the Comet SDK, as well as a practical example that shows how to build a Comet Panel using the D3.js Javascript library.","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:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel","og_locale":"en_US","og_type":"article","og_title":"How to Integrate D3.js Graphs in a Comet Panel","og_description":"Get an overview of the Comet SDK, as well as a practical example that shows how to build a Comet Panel using the D3.js Javascript library.","og_url":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel","og_site_name":"Comet","article_publisher":"https:\/\/www.facebook.com\/cometdotml","article_published_time":"2023-11-02T17:19:55+00:00","article_modified_time":"2025-04-24T17:04:57+00:00","og_image":[{"url":"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl","type":"","width":"","height":""}],"author":"Angelica Lo Duca","twitter_card":"summary_large_image","twitter_creator":"@Cometml","twitter_site":"@Cometml","twitter_misc":{"Written by":"Angelica Lo Duca","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#article","isPartOf":{"@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel\/"},"author":{"name":"Team Comet Digital","@id":"https:\/\/www.comet.com\/site\/#\/schema\/person\/6266601170c60a7a82b3e0043fbe8ddf"},"headline":"How to Integrate D3.js Graphs in a Comet Panel","datePublished":"2023-11-02T17:19:55+00:00","dateModified":"2025-04-24T17:04:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel\/"},"wordCount":1174,"publisher":{"@id":"https:\/\/www.comet.com\/site\/#organization"},"image":{"@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#primaryimage"},"thumbnailUrl":"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl","articleSection":["Product","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel\/","url":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel","name":"How to Integrate D3.js Graphs in a Comet Panel - Comet","isPartOf":{"@id":"https:\/\/www.comet.com\/site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#primaryimage"},"image":{"@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#primaryimage"},"thumbnailUrl":"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl","datePublished":"2023-11-02T17:19:55+00:00","dateModified":"2025-04-24T17:04:57+00:00","description":"Get an overview of the Comet SDK, as well as a practical example that shows how to build a Comet Panel using the D3.js Javascript library.","breadcrumb":{"@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#primaryimage","url":"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl","contentUrl":"https:\/\/miro.medium.com\/v2\/resize:fit:700\/0*hX4gL3djQhvCkbzl"},{"@type":"BreadcrumbList","@id":"https:\/\/www.comet.com\/site\/blog\/how-to-integrate-d3-js-graphs-in-a-comet-panel#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.comet.com\/site\/"},{"@type":"ListItem","position":2,"name":"How to Integrate D3.js Graphs in a Comet Panel"}]},{"@type":"WebSite","@id":"https:\/\/www.comet.com\/site\/#website","url":"https:\/\/www.comet.com\/site\/","name":"Comet","description":"Build Better Models Faster","publisher":{"@id":"https:\/\/www.comet.com\/site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.comet.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.comet.com\/site\/#organization","name":"Comet ML, Inc.","alternateName":"Comet","url":"https:\/\/www.comet.com\/site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.comet.com\/site\/#\/schema\/logo\/image\/","url":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2025\/01\/logo_comet_square.png","contentUrl":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2025\/01\/logo_comet_square.png","width":310,"height":310,"caption":"Comet ML, Inc."},"image":{"@id":"https:\/\/www.comet.com\/site\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/cometdotml","https:\/\/x.com\/Cometml","https:\/\/www.youtube.com\/channel\/UCmN63HKvfXSCS-UwVwmK8Hw"]},{"@type":"Person","@id":"https:\/\/www.comet.com\/site\/#\/schema\/person\/6266601170c60a7a82b3e0043fbe8ddf","name":"Team Comet Digital","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.comet.com\/site\/#\/schema\/person\/image\/4f0c0a8cc7c0e87c636ff6a420a6647c","url":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2023\/08\/Screen-Shot-2023-08-12-at-8.58.50-AM-96x96.png","contentUrl":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2023\/08\/Screen-Shot-2023-08-12-at-8.58.50-AM-96x96.png","caption":"Team Comet Digital"},"sameAs":["https:\/\/www.comet.ml\/"],"url":"https:\/\/www.comet.com\/site\/blog\/author\/teamcometdigital\/"}]}},"_links":{"self":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts\/8068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/comments?post=8068"}],"version-history":[{"count":1,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts\/8068\/revisions"}],"predecessor-version":[{"id":15474,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts\/8068\/revisions\/15474"}],"wp:attachment":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/media?parent=8068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/categories?post=8068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/tags?post=8068"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/coauthors?post=8068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}