30:Te97,chart = { // Clear previous SVG d3.select("svg").remove(); // Container dimensions (including margins) const containerWidth = 1152; const containerHeight = 500; const margin = { top: 10, right: 10, bottom: 10, left: 10 }; // Calculate chart area dimensions const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; // Create SVG element and set viewBox for responsiveness const svg = d3 .create("svg") .attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`) .attr("width", "100%") .attr("height", "containerHeight") .attr("style", "max-width: 100%; height: auto;") .attr("style", "background-color: #000000"); // Background color // Create chart container within SVG, adjusted for margins const chartContainer = svg .append("g") .attr("class", "g-chart-container") .attr("transform", `translate(${margin.left}, ${margin.top / 1.2})`); const numHearts = 500; const minSpacing = 45; const heartSizeRange = [0.3, 0.7]; const maxAttempts = 50000; // Heart Path const heartPath = `M 10 30 A 10 10 0 0 1 30 30 A 10 10 0 0 1 50 30 Q 50 50 30 65 Q 10 50 10 30 Z`; // Check heart overlapping let hearts = []; function isOverlapping(x, y, size) { return hearts.some((h) => { let dx = h.x - x; let dy = h.y - y; let distance = Math.sqrt(dx * dx + dy * dy); return distance < (h.size + size) * minSpacing; }); } let attempts = 0; while (hearts.length < numHearts && attempts < maxAttempts) { let size = Math.random() * (heartSizeRange[1] - heartSizeRange[0]) + heartSizeRange[0]; let x = Math.random() * containerWidth; let y = Math.random() * containerHeight; let rotation = Math.random() * 60 - 30; if (!isOverlapping(x, y, size)) { hearts.push({ x, y, size, opacity: Math.random() * 0.2 + 0.2, rotation }); } attempts++; } // Add Path (heart) chartContainer .append("g") .attr("class", "g-path-container") .selectAll("path") .data(hearts) .join("path") .attr("d", heartPath) .attr("fill", () => d3.interpolateRainbow(Math.random())) .attr("opacity", 0) .attr( "transform", (d) => `translate(${d.x},${d.y}) scale(${d.size}) rotate(${d.rotation}, 30, 50)` ) .attr("filter", "drop-shadow(2px 2px 4px rgba(0,0,0,0.2))") .transition() .delay((d, i) => i * 3) .duration(1000) .ease(d3.easeBackOut) .attr("opacity", (d) => d.opacity); // Add Text (I Love DataViz) chartContainer .append("g") .attr("class", "g-text-container") .attr( "transform", `translate(${containerWidth / 2}, ${containerHeight / 2})` ) .append("text") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("font-family", "'Dancing Script', cursive") .attr("font-size", "5rem") .attr("fill", "url(#textGradient)") .attr("opacity", 0) .attr("filter", "drop-shadow(3px 3px 6px rgba(255,0,0,0.4))") .transition() .duration(1000) .ease(d3.easeElasticOut) .attr("opacity", 1) .text("I ❤️ DataViz"); // Define Gradient for Text Fill const defs = svg.append("defs"); const gradient = defs .append("linearGradient") .attr("id", "textGradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", "#e9a6a6"); gradient.append("stop").attr("offset", "100%").attr("stop-color", "#e9a6a6"); return svg.node(); randomize() } 31:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744291194439.319,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744291196940.671,"size":2966}] 2e:{"title":"I Love DataViz","cells":[{"id":0,"value":"

I Love DataViz

Chart Type: Generative Art, Tech Stack: D3.js, SVG

Data Sources: Randomly Generated Data

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

I Love DataViz is a creative exploration of data-driven art. Each refresh generates a new, unique visual, turning random data into dynamic and engaging patterns.

","pinned":false,"hidden":false,"mode":"html"},{"id":131,"value":"viewof randomize = Inputs.button(\"❤️ Randomize ❤️\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":175,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":171,"value":"### References","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"*[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":148,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md"},{"id":168,"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":99,"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":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}