31:T24ab,chart = { // Container dimensions (including margins) const containerWidth = 1152; const containerHeight = 850; const margin = { top: 0, right: 0, bottom: 0, left: 0 }; // Calculate chart area dimensions const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; // Calculate centerX and centerY const centerX = chartWidth / 2; const centerY = chartHeight / 2; // Define innerRadius and outerRadius const innerRadius = 180; const outerRadius = 350; const maxTime = 1200; // in sec // By default selectedValue and currentDataField let selectedValue = "avgVisitDuration"; let currentDataField = "avgVisitDuration"; // Create bar scale const barScale = d3 .scaleLinear() .domain([0, d3.max(chartData, (d) => d[currentDataField])]) .range([innerRadius, outerRadius]); // Create angle scale const angleScale = d3 .scaleBand() .domain(chartData.map((d) => d.rank)) .range([0, 2 * Math.PI]) .padding(0.04); // Create SVG element and set viewBox for responsiveness const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) // allows responsiveness .attr("width", containerWidth) .attr("height", containerHeight) .attr( "style", "max-width: 100%; height: auto;background: linear-gradient(180deg, #1f1f1f 0%, #2e2e2e 100%)" ); // Create chart container within SVG, adjusted for margins const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${centerX},${centerY})`); // Add note to fotter of chart chartContainer .append("text") .attr("x", 0) .attr("y", outerRadius + 10) .attr("text-anchor", "middle") .attr("fill", "#ffff00") .attr("font-style", "Italic") .style("font-size", "14px").html(` *Avg. Visit Duration: Average time spent by users on the website per visit. *Pages / Visit: Average number of pages viewed per visit. *Bounce Rate: Percentage of visitors that view only one page before leaving. `); const maxDataValue = d3.max(chartData, (d) => d[currentDataField]); // Create filled bar with the help of line let barLine = chartContainer .selectAll(".filled-bar") .data(chartData) .join("line") .attr("class", "filled-bar") .attr("x1", (d) => Math.cos(angleScale(d.rank) - Math.PI / 2) * innerRadius) .attr("y1", (d) => Math.sin(angleScale(d.rank) - Math.PI / 2) * innerRadius) .attr("x2", (d) => Math.cos(angleScale(d.rank) - Math.PI / 2) * innerRadius) .attr("y2", (d) => Math.sin(angleScale(d.rank) - Math.PI / 2) * innerRadius) .attr("stroke", (d) => d[currentDataField] === maxDataValue ? "#00bfff" : "orange" ) .attr("stroke-width", (d) => d[currentDataField] === maxDataValue ? 10 : 6 ) .attr("stroke-linecap", "round") .transition() .duration(1000) .attr( "x2", (d) => Math.cos(angleScale(d.rank) - Math.PI / 2) * barScale(d[currentDataField]) ) .attr( "y2", (d) => Math.sin(angleScale(d.rank) - Math.PI / 2) * barScale(d[currentDataField]) ) .on("end", function () { d3.select(this.parentNode) .select(`.time-label[data-rank="${d3.select(this).datum().rank}"]`) .transition() .duration(300) .style("opacity", 1); }); // Create icon group chartContainer .selectAll(".icon-group") .data(chartData) .join("g") .attr("transform", (d) => { const angle = angleScale(d.rank) - Math.PI / 2; const radius = innerRadius - 25; return `translate(${Math.cos(angle) * radius}, ${ Math.sin(angle) * radius })`; }) .each(function (d) { const group = d3.select(this); group .append("image") .attr("x", -14) .attr("y", -14) .attr("width", 28) .attr("height", 28) .attr("xlink:href", d.icon); // Add title to it group.append("title").text(d.brand); }); // create radio button data const radioBtnData = [ { label: "Avg. Visit Duration", value: "avgVisitDuration", dataField: "avgVisitDuration", format: (seconds) => `${Math.floor(seconds / 60)}m ${seconds % 60}s` }, { label: "Pages / Visit", value: "pagesVisit", dataField: "pagesVisit", format: (value) => value.toFixed(2) }, { label: "Bounce Rate", value: "bounceRate", dataField: "bounceRate", format: (value) => value.toFixed(2) + "%" } ]; // Create radio container const radioBtnContainer = chartContainer .append("g") .attr("transform", `translate(0, 0)`); // Create radio button const radioButtons = radioBtnContainer .selectAll("g") .data(radioBtnData) .join("g") .attr( "transform", (d, i) => `translate(0, ${i * 40 - (radioBtnData.length * 10 - 10)})` ); radioButtons .append("circle") .attr("cx", -60) .attr("cy", 0) .attr("r", 8) .attr("cursor", "pointer") .style("fill", (d) => (d.value === selectedValue ? "#2c2c2c" : "white")) .style("stroke", "white") .style("stroke-width", 3) .on("click", (event, d) => { if (selectedValue === d.value) { return; } selectedValue = d.value; currentDataField = d.dataField; updateRadioButtons(); updateChart(); }); radioButtons .append("text") .attr("x", -40) .attr("y", 4) .style("font-size", "16px") .attr("fill", "#f0f8ff") .attr("font-weight", "600") .text((d) => d.label); // Update radio button color function updateRadioButtons() { radioButtons .select("circle") .style("fill", (d) => (d.value === selectedValue ? "#2c2c2c" : "white")); } // Add label to chart chartContainer .selectAll(".time-label") .data(chartData) .join("text") .attr("class", "time-label") .attr("data-rank", (d) => d.rank) .text((d) => radioBtnData .find((rd) => rd.value === selectedValue) .format(d[currentDataField]) ) .each(function (d) { const angle = angleScale(d.rank) - Math.PI / 2; let radius = barScale(d[currentDataField]) + 30; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; if (angle > -Math.PI / 2 && angle < Math.PI / 2) { d3.select(this) .attr("text-anchor", "start") .attr("x", x + 8); } else { d3.select(this) .attr("text-anchor", "end") .attr("x", x - 8); } if (angle > 0) { d3.select(this).attr("y", y + 5); } else { d3.select(this).attr("y", y - 5); } if (Math.abs(angle) > Math.PI / 3) { radius = radius + 5; const xAdjusted = Math.cos(angle) * radius; const yAdjusted = Math.sin(angle) * radius; d3.select(this).attr("x", xAdjusted).attr("y", yAdjusted); } }) .style("opacity", 0) .transition() .duration(300) .delay(1000) .style("opacity", 1); // Update chart in button click function updateChart() { const maxDataValue = d3.max(chartData, (d) => d[currentDataField]); const barScale = d3 .scaleLinear() .domain([0, maxDataValue]) .range([innerRadius, outerRadius]); chartContainer .selectAll(".filled-bar") .attr("stroke", (d) => d[currentDataField] === maxDataValue ? "#00bfff" : "orange" ) .attr("stroke-width", (d) => d[currentDataField] === maxDataValue ? 10 : 6 ) .transition() .duration(750) .attr( "x2", (d) => Math.cos(angleScale(d.rank) - Math.PI / 2) * barScale(d[currentDataField]) ) .attr( "y2", (d) => Math.sin(angleScale(d.rank) - Math.PI / 2) * barScale(d[currentDataField]) ); chartContainer .selectAll(".time-label") .text((d) => radioBtnData .find((rd) => rd.value === selectedValue) .format(d[currentDataField]) ) .each(function (d) { const angle = angleScale(d.rank) - Math.PI / 2; let radius = barScale(d[currentDataField]) + 30; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; if (angle > -Math.PI / 2 && angle < Math.PI / 2) { d3.select(this) .attr("text-anchor", "start") .attr("x", x + 8); } else { d3.select(this) .attr("text-anchor", "end") .attr("x", x - 8); } if (angle > 0) { d3.select(this).attr("y", y + 5); } else { d3.select(this).attr("y", y - 5); } if (Math.abs(angle) > Math.PI / 3) { radius = radius + 5; const xAdjusted = Math.cos(angle) * radius; const yAdjusted = Math.sin(angle) * radius; d3.select(this).attr("x", xAdjusted).attr("y", yAdjusted); } }) .style("opacity", 0) .transition() .duration(300) .delay(500) .style("opacity", 1); } return svg.node(); }32:T108d,chartData = [ { rank: 1, site: "https://www.google.com/", avgVisitDuration: 646, pagesVisit: 8.69, bounceRate: 27.83, icon: await FileAttachment("google.svg").url(), brand: "Google" }, { rank: 2, site: "https://www.youtube.com/", avgVisitDuration: 1247, pagesVisit: 13.55, bounceRate: 20.57, icon: await FileAttachment("youtube.svg").url(), brand: "YouTube" }, { rank: 3, site: "https://www.facebook.com/", avgVisitDuration: 659, pagesVisit: 13.42, bounceRate: 29.59, icon: await FileAttachment("facebook.svg").url(), brand: "Facebook" }, { rank: 4, site: "https://www.instagram.com/", avgVisitDuration: 521, pagesVisit: 13.33, bounceRate: 32.9, icon: await FileAttachment("instagram.svg").url(), brand: "Instagram" }, { rank: 5, site: "https://www.x.com/", avgVisitDuration: 757, pagesVisit: 12.9, bounceRate: 30.44, icon: await FileAttachment("x.svg").url(), brand: "X" }, { rank: 6, site: "https://www.whatsapp.com/", avgVisitDuration: 746, pagesVisit: 3.83, bounceRate: 55.76, icon: await FileAttachment("whatsapp.svg").url(), brand: "WhatsApp" }, { rank: 7, site: "https://www.chatgpt.com/", avgVisitDuration: 407, pagesVisit: 3.81, bounceRate: 30.94, icon: "https://www.chatgpt.com/favicon.ico", brand: "ChatGPT" }, { rank: 8, site: "https://www.wikipedia.org/", avgVisitDuration: 198, pagesVisit: 3.25, bounceRate: 53.42, icon: "https://www.wikipedia.org/favicon.ico", brand: "Wikipedia" }, { rank: 9, site: "https://www.reddit.com/", avgVisitDuration: 367, pagesVisit: 4.86, bounceRate: 42.66, icon: "https://www.reddit.com/favicon.ico", brand: "Reddit" }, { rank: 10, site: "https://www.yahoo.com/", avgVisitDuration: 463, pagesVisit: 5.51, bounceRate: 35.66, icon: "https://www.yahoo.com/favicon.ico", brand: "Yahoo" }, { rank: 11, site: "https://www.yahoo.co.jp/", avgVisitDuration: 534, pagesVisit: 7.34, bounceRate: 32.31, icon: "https://www.yahoo.co.jp/favicon.ico", brand: "Yahoo Japan" }, { rank: 12, site: "https://www.yandex.ru/", avgVisitDuration: 528, pagesVisit: 8.57, bounceRate: 26.95, icon: "https://www.yandex.ru/favicon.ico", brand: "Yandex" }, { rank: 13, site: "https://www.amazon.com/", avgVisitDuration: 351, pagesVisit: 8.94, bounceRate: 33.37, icon: "https://www.amazon.com/favicon.ico", brand: "Amazon" }, { rank: 14, site: "https://www.tiktok.com/", avgVisitDuration: 249, pagesVisit: 7.07, bounceRate: 42.38, icon: await FileAttachment("tiktok.svg").url(), brand: "TikTok" }, { rank: 15, site: "https://www.baidu.com/", avgVisitDuration: 335, pagesVisit: 8.55, bounceRate: 22.93, icon: "https://static-00.iconduck.com/assets.00/baidu-icon-2048x2048-zh4wgz4q.png", brand: "Baidu" }, { rank: 16, site: "https://www.microsoft.com/", avgVisitDuration: 136, pagesVisit: 2.68, bounceRate: 36.97, icon: "https://www.microsoft.com/content/dam/microsoft/final/en-us/microsoft-brand/icons/Icon_Copilot_64x64.svg", brand: "Microsoft 365" }, { rank: 17, site: "https://www.linkedin.com/", avgVisitDuration: 513, pagesVisit: 8.99, bounceRate: 23.47, icon: "https://www.linkedin.com/favicon.ico", brand: "LinkedIn" }, { rank: 18, site: "https://www.netflix.com/", avgVisitDuration: 427, pagesVisit: 4.22, bounceRate: 40.3, icon: "https://www.netflix.com/favicon.ico", brand: "Netflix" }, { rank: 19, site: "https://www.pornhub.com/", avgVisitDuration: 451, pagesVisit: 7.63, bounceRate: 26.61, icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi5N1k0fXXh1iPeSeD9HINj-MO3AA6CcJ9Dg&s", brand: "Pornhub" }, { rank: 20, site: "https://www.dzen.ru/", avgVisitDuration: 510, pagesVisit: 4.49, bounceRate: 36.49, icon: "https://www.dzen.ru/favicon.ico", brand: "Dzen" } ]33:[{"id":"3a20c87a224bbf92be5b9735915fdddc968542898bbf26effeb68408ab2185559287277e2ca07c58c8b81b8c5d00b57246803c732e2e0f743e22b792b798963c","href":"https://static.observableusercontent.com/files/3a20c87a224bbf92be5b9735915fdddc968542898bbf26effeb68408ab2185559287277e2ca07c58c8b81b8c5d00b57246803c732e2e0f743e22b792b798963c","name":"google.svg","type":"image/svg+xml","lastModified":1743699393990.862,"size":1049},{"id":"2edfd176c12953331b1c6e48400a043e637e2f4fe3f04ebee95ed3d201088a901caba55796151e9a37f95db52b7976ddd64e5faa2acbd53d13dec4cad7672f7d","href":"https://static.observableusercontent.com/files/2edfd176c12953331b1c6e48400a043e637e2f4fe3f04ebee95ed3d201088a901caba55796151e9a37f95db52b7976ddd64e5faa2acbd53d13dec4cad7672f7d","name":"youtube.svg","type":"image/svg+xml","lastModified":1743699626813.326,"size":805},{"id":"5fb7545b2e4ab00604f7c2ef1a1f38ed3146ef2080acf5844b9d1a82a1db0ea08f39f67e133b8162da66786e1efd54f0e55b3beeca2b5424ef633da9289ce740","href":"https://static.observableusercontent.com/files/5fb7545b2e4ab00604f7c2ef1a1f38ed3146ef2080acf5844b9d1a82a1db0ea08f39f67e133b8162da66786e1efd54f0e55b3beeca2b5424ef633da9289ce740","name":"facebook.svg","type":"image/svg+xml","lastModified":1743699778996.936,"size":893},{"id":"e7d81091b245220a7c959962a62e515f3f9da09328748222ee72bac80d6a1996aca38c9fbc247159ee7bb8fb4e9751804de9475a760d26790ef2d92925e3bc0d","href":"https://static.observableusercontent.com/files/e7d81091b245220a7c959962a62e515f3f9da09328748222ee72bac80d6a1996aca38c9fbc247159ee7bb8fb4e9751804de9475a760d26790ef2d92925e3bc0d","name":"instagram.svg","type":"image/svg+xml","lastModified":1743699884139.429,"size":4235},{"id":"0e00d4d05f120c9481bea4fb1412408f6c6619b58ff27ee424f3cb8a80348fb79a2045353fb05d5769e799436cbf7cd5e15b557fcf952d45fbd9ce403582536e","href":"https://static.observableusercontent.com/files/0e00d4d05f120c9481bea4fb1412408f6c6619b58ff27ee424f3cb8a80348fb79a2045353fb05d5769e799436cbf7cd5e15b557fcf952d45fbd9ce403582536e","name":"x.svg","type":"image/svg+xml","lastModified":1743700083091.613,"size":786},{"id":"a059e864832f3c439dbc1fe3676491966a86806d7003b5ebae95f1acb75554cdcb1da0c39ce01c758699d6705a0fe696045ec4c1ac8ccc29aa7ad3c106d20fc7","href":"https://static.observableusercontent.com/files/a059e864832f3c439dbc1fe3676491966a86806d7003b5ebae95f1acb75554cdcb1da0c39ce01c758699d6705a0fe696045ec4c1ac8ccc29aa7ad3c106d20fc7","name":"whatsapp.svg","type":"image/svg+xml","lastModified":1743700467593.166,"size":1071},{"id":"08973afdfc383416897ebe13488baafa675748cfdb75b45b41c60daec18739a2a7d38696960791686b45056a51f192eefa1b47d69b7b42b0e60789b7865d93c9","href":"https://static.observableusercontent.com/files/08973afdfc383416897ebe13488baafa675748cfdb75b45b41c60daec18739a2a7d38696960791686b45056a51f192eefa1b47d69b7b42b0e60789b7865d93c9","name":"tiktok.svg","type":"image/svg+xml","lastModified":1743702010728.33,"size":907},{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744274936856.058,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744274940822.056,"size":2966}] 2f:{"title":"Top Most Visited Websites Worldwide","cells":[{"id":23,"value":"

Top Most Visited Websites Worldwide

Chart Type: Radial Bar Chart, Tech Stack: D3.js, SVG

Data Sources: Similarweb

","pinned":false,"hidden":false,"mode":"html"},{"id":27,"value":"

As of February 2025, Similarweb's Top Websites Ranking highlights the world's most visited sites based on traffic and engagement. Rankings consider total visits, visit duration, pages per visit, and bounce rate.

","pinned":false,"hidden":false,"mode":"html"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"

Website Logo: UXWing

","pinned":false,"hidden":false,"mode":"html"},{"id":21,"value":"

\n#30DayChartChallenge (Edition 2025)

| Day-3: Comparison | Circular |

","pinned":false,"hidden":false,"mode":"html"},{"id":16,"value":"### CSS ","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":14,"value":"### Chart Data ","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"

\n \n $\"Observable$ \n \n \n $\"D3.js\"$ \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":253,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"*[Chart Inspiration](https://datavizproject.com/data-type/radical-histogram/) | [D3.js Docs.](https://d3js.org/getting-started) | [Observable Notebook Docs.](https://observablehq.com/documentation/notebooks/) | [SVG Docs.](https://developer.mozilla.org/en-US/docs/Web/SVG)* ","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"*The author utilized AI tools such as Gemini and ChatGPT as coding assistants during the development of this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"

⚠️ Disclaimer ⚠️

\n This project provides data visualizations for informational purposes only. While we aim for accuracy, the data may contain errors or omissions. It should not be used as financial, legal, or professional advice. We are not responsible for any decisions made based on this information. Use at your own discretion.\n

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}