31:T2209,chart = { const containerWidth = 1152; const containerHeight = 450; // total height including margins const margin = { top: 40, right: 40, bottom: 40, left: 50 }; // define margins and calculate width and height const chartWidth = containerWidth - margin.left - margin.right; // chart width after margin-left and margin-right const chartHeight = containerHeight - margin.top - margin.bottom; // chart height after margin-top and margin-bottom // create and configure svg element const svg = d3 .create("svg") .attr("viewBox", [0, 0, containerWidth, containerHeight]) .attr("width", containerWidth) .attr("height", containerHeight) .attr("style", "max-width: 100%; height: auto;") .attr("style", "background-color : #1e1e1e"); // dark mode background // create a group element to hold the chart content, adjusting for margins const chartGroup = svg .append("g") .attr("class", "chart-container") .attr("transform", `translate(${margin.left}, ${margin.top})`); // assuming chartHeaderGroup is the container in which Heading and logos will be added const chartHeaderGroup = chartGroup .append("g") .attr("class", "chart-header-container"); // logo list const logos = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Tata_Consultancy_Services_Logo.svg/250px-Tata_Consultancy_Services_Logo.svg.png", // TCS "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Tata_Motors_Logo.svg/220px-Tata_Motors_Logo.svg.png", // Tata Motors "https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Logo_of_Titan_Company%2C_May_2018.svg/200px-Logo_of_Titan_Company%2C_May_2018.svg.png", // Titan "https://www.zudio.com/cdn/shop/files/logo_360x.png?v=1613519896", // Trent "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Tata_Steel_Logo.svg/250px-Tata_Steel_Logo.svg.png", // Tata Steel "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Tata_Power_Logo.svg/800px-Tata_Power_Logo.svg.png", // Tata Power "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Air_India_2023.svg/270px-Air_India_2023.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Taj_Hotels_logo.svg/100px-Taj_Hotels_logo.svg.png" ]; // add heading text within SVG chartHeaderGroup .append("text") .attr("x", chartWidth / 2) // center horizontally in the chart area .attr("y", 0) // position the heading near the top .attr("text-anchor", "middle") .text("A Tribute to Visionary Leadership") .attr("font-size", "24px") .attr("fill", "#ffffff") .attr("font-family", "Arial, sans-serif"); // bind data to images using .data() and .join() chartHeaderGroup .selectAll("image.logos-header") .data(logos) .join("image") .attr("class", "logos-header") .attr("xlink:href", (d) => d) .attr("x", (d, i) => 40 + i * 120) // dynamically position based on index .attr("y", 10) .attr("width", 100) .attr("height", 50); const prismPoints = "400,100 470,300 330,300"; // colors of the spectrum (red to violet) const colors = [ "#FF4500", "#FFA500", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8B00FF" ]; // qualities of Mr. Ratan Tata const labels = [ "Visionary", "Philanthropist", "Innovative", "Resilient", "Ethical", "Inspirational", "Compassionate" ]; // start and end points of the rays before hitting the prism const rays = colors.map((color, i) => ({ color, startX: 100, startY: 100 + i * 30, endX: 400, endY: 200, label: labels[i] // use the updated labels })); // incoming rays group const incomingRaysGroup = chartGroup .append("g") .attr("class", "incoming-rays-container"); // dotted line (additional ray) incomingRaysGroup .append("line") .attr("x1", 100) .attr("y1", 350 - margin.bottom) // position below other rays .attr("x2", 100) // starting point of animation .attr("y2", 350 - margin.bottom) // starting point of animation .attr("stroke", "#00CED1") .attr("stroke-width", "2") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "5,5") .transition() .duration(5000) .attr("x2", 400) .attr("y2", 200); // add label for dotted line incomingRaysGroup .append("text") .attr("class", "label") .attr("x", 90) .attr("y", 355 - margin.bottom) .attr("text-anchor", "end") .text("Many Others") .attr("font-family", "Arial, sans-serif") .attr("opacity", 0) .attr("font-size", "12px") .attr("fill", "#cccccc") .transition() .duration(2000) .attr("opacity", 1); // draw the rays with animation incomingRaysGroup .selectAll("line.incoming-rays") .data(rays) .join("line") .attr("class", "incoming-rays") .attr("x1", (d) => d.startX) .attr("y1", (d) => d.startY) .attr("x2", (d) => d.startX) // starting point of animation .attr("y2", (d) => d.startY) // starting point of animation .attr("stroke", (d) => d.color) .attr("stroke-width", "2.5") // slightly thinner for crisp lines .attr("stroke-linecap", "round") .transition() .duration(5000) .attr("x2", (d) => d.endX) // animate to the end position .attr("y2", (d) => d.endY); // add labels to the rays incomingRaysGroup .selectAll("text.incoming-rays-label") .data(rays) .join("text") .attr("class", "incoming-rays-label") .attr("x", (d) => d.startX - 10) .attr("y", (d) => d.startY + 5) .attr("text-anchor", "end") .text((d) => d.label) .attr("font-family", "Arial, sans-serif") .attr("opacity", 0) .attr("font-size", "12px") .attr("fill", "#cccccc") .transition() .duration(2000) .attr("opacity", 1); // prism group const prismGroup = chartGroup.append("g").attr("class", "prism-container"); // define a gradient for the glass effect const gradient = svg .append("defs") .append("linearGradient") .attr("id", "glassGradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "100%"); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", "rgba(255, 255, 255, 0.3)"); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", "rgba(200, 200, 255, 0.8)"); // draw the prism with a glass-like appearance prismGroup .append("polygon") .attr("points", prismPoints) .attr("fill", "url(#glassGradient)") // apply gradient for glass effect .attr("stroke", "#3C78BB") .attr("stroke-width", "2"); // add smaller text inside the bottom of the prism prismGroup .append("text") .attr("x", 400) // center horizontally inside the prism .attr("y", 275) // position towards the bottom of the prism .attr("text-anchor", "middle") .text("Glass Prism") .attr("font-family", "Arial, sans-serif") .attr("font-size", "14px") .attr("fill", "white") .attr("opacity", 0.7); // outgoing rays group const outgoingRaysGroup = chartGroup .append("g") .attr("class", "outgoing-rays-container"); // white light emerging from the prism with animation outgoingRaysGroup .append("line") .attr("x1", 400) .attr("y1", 200) .attr("x2", 400) // start at the prism's edge .attr("y2", 200) .attr("stroke", "white") .attr("stroke-width", "3") .attr("stroke-linecap", "round") .transition() .delay(5000) // delay until the colored rays reach the prism .duration(5000) .attr("x2", 650); // extend to the final white light position // add label for white light outgoingRaysGroup .append("text") .attr("x", 640) .attr("y", 280) .attr("text-anchor", "start") .attr("opacity", 0) // start as invisible .text("Shri. Ratan Tata (1937 to Forever)") .attr("font-family", "Arial, sans-serif") .attr("font-size", "12px") .attr("fill", "#cccccc") .transition() .delay(10000) // wait for 10000ms before appearing .duration(1000) .attr("opacity", 1); // append the image to the group and set initial properties const image = outgoingRaysGroup .append("image") .attr( "xlink:href", "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Ratan_Tata_photo.jpg/160px-Ratan_Tata_photo.jpg" ) .attr("x", 660) .attr("y", 110) .attr("width", 150) .attr("height", 150) .attr("opacity", 0); // start with image invisible // trigger the transition to fade in the image image .transition() .delay(10000) // wait for 10000ms before appearing .duration(1000) .attr("opacity", 1); return svg.node(); }32:[] 2f:{"title":"Spectrum of Shri. Ratan Tata's Life","cells":[{"id":213,"value":"

Spectrum of Shri. Ratan Tata's Life

Chart Type: Miscellaneous (Line Chart), Tech Stack: D3.js, SVG

Data Sources: Miscellaneous

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

Mr. Ratan Tata, a visionary leader, shaped the Tata Group globally with innovation and ethics. Known for humility, he prioritized people and social causes, leaving a legacy of impact and inspiration.

","pinned":false,"hidden":false,"mode":"html"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}