31:T28f5,chart = { const width = 600; const height = 600; const centerX = width / 2; const centerY = height / 2; const maxRadius = Math.min(width, height) / 2 - 40; // Create SVG const svg = d3.select(DOM.svg(width, height)) .style("background", "#fafafa"); // Create color wheel background const defs = svg.append("defs"); // Create radial gradient for saturation (center to edge) const radialGradient = defs.append("radialGradient") .attr("id", "saturationGradient") .attr("cx", "50%") .attr("cy", "50%") .attr("r", "50%"); radialGradient.append("stop") .attr("offset", "0%") .attr("stop-color", "white") .attr("stop-opacity", 1); radialGradient.append("stop") .attr("offset", "100%") .attr("stop-color", "white") .attr("stop-opacity", 0); // Draw color wheel segments const hueSegments = 360; // Number of hue segments for smooth gradient const angleStep = (2 * Math.PI) / hueSegments; for (let i = 0; i < hueSegments; i++) { const startAngle = i * angleStep; const endAngle = (i + 1) * angleStep; const hue = (i * 360) / hueSegments; // Create path for each hue segment const x1 = centerX + 20 * Math.cos(startAngle); const y1 = centerY + 20 * Math.sin(startAngle); const x2 = centerX + maxRadius * Math.cos(startAngle); const y2 = centerY + maxRadius * Math.sin(startAngle); const x3 = centerX + maxRadius * Math.cos(endAngle); const y3 = centerY + maxRadius * Math.sin(endAngle); const x4 = centerX + 20 * Math.cos(endAngle); const y4 = centerY + 20 * Math.sin(endAngle); const pathData = `M ${x1} ${y1} L ${x2} ${y2} A ${maxRadius} ${maxRadius} 0 0 1 ${x3} ${y3} L ${x4} ${y4} A 20 20 0 0 0 ${x1} ${y1} Z`; svg.append("path") .attr("d", pathData) .attr("fill", `hsl(${hue}, 100%, 50%)`) .attr("opacity", 0.3); } // Add white center circle to create the saturation effect svg.append("circle") .attr("cx", centerX) .attr("cy", centerY) .attr("r", maxRadius) .attr("fill", "url(#saturationGradient)") .attr("opacity", 0.8); // Create scales const radiusScale = d3.scaleLinear() .domain([0, 100]) // Saturation 0-100 .range([20, maxRadius]); // Min radius 20px to avoid center overlap const opacityScale = d3.scaleLinear() .domain([0, 255]) // Value 0-255 .range([0.3, 1]); // Opacity range // Helper function to convert polar to cartesian coordinates function polarToCartesian(hue, saturation) { // Convert hue to radians, starting from top (0° = top, clockwise) // Standard HSV: 0°=red, 120°=green, 240°=blue const angle = (hue) * (Math.PI / 180); // Remove the -90 offset to match color wheel const radius = radiusScale(saturation); return { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }; } // Draw reference circles for saturation levels const saturationLevels = [25, 50, 75, 100]; svg.selectAll(".reference-circle") .data(saturationLevels) .enter() .append("circle") .attr("class", "reference-circle") .attr("cx", centerX) .attr("cy", centerY) .attr("r", d => radiusScale(d)) .attr("fill", "none") .attr("stroke", "#ddd") .attr("stroke-width", 1) .attr("stroke-dasharray", "2,2"); // Add saturation labels svg.selectAll(".sat-label") .data(saturationLevels) .enter() .append("text") .attr("class", "sat-label") .attr("x", centerX + 5) .attr("y", d => centerY - radiusScale(d) + 4) .attr("font-size", "10px") .attr("font-family", "Arial, sans-serif") .attr("fill", "#666") .text(d => `${d}%`); // Draw hue reference lines (every 30 degrees) const hueLines = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]; svg.selectAll(".hue-line") .data(hueLines) .enter() .append("line") .attr("class", "hue-line") .attr("x1", centerX) .attr("y1", centerY) .attr("x2", d => { const angle = d * (Math.PI / 180); // Match the data point calculation return centerX + maxRadius * Math.cos(angle); }) .attr("y2", d => { const angle = d * (Math.PI / 180); // Match the data point calculation return centerY + maxRadius * Math.sin(angle); }) .attr("stroke", "#eee") .attr("stroke-width", 1); // Add hue labels svg.selectAll(".hue-label") .data(hueLines) .enter() .append("text") .attr("class", "hue-label") .attr("x", d => { const angle = d * (Math.PI / 180); // Match the data point calculation return centerX + (maxRadius + 15) * Math.cos(angle); }) .attr("y", d => { const angle = d * (Math.PI / 180); // Match the data point calculation return centerY + (maxRadius + 15) * Math.sin(angle) + 4; }) .attr("font-size", "10px") .attr("font-family", "Arial, sans-serif") .attr("fill", "#666") .attr("text-anchor", "middle") .text(d => `${d}°`); // Create tooltip const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("padding", "8px") .style("border-radius", "4px") .style("font-size", "12px") .style("font-family", "Arial, sans-serif") .style("pointer-events", "none") .style("opacity", 0) .style("z-index", 1000); // Draw data points with entrance animation const circles = svg.selectAll(".color-point") .data(filteredData) .enter() .append("circle") .attr("class", "color-point") .attr("cx", d => polarToCartesian(d.H, d.S).x) .attr("cy", d => polarToCartesian(d.H, d.S).y) .attr("r", 0) // Start with radius 0 .attr("fill", d => d.HEX) .attr("opacity", 0) // Start invisible .attr("stroke", "white") .attr("stroke-width", 1) .style("cursor", "pointer"); // Animate entrance - staggered appearance circles .transition() .duration(2000) .delay((d, i) => i * 50) // Stagger by 50ms per point .ease(d3.easeBounceOut) .attr("r", 4) .attr("opacity", d => opacityScale(d.V)); // Add subtle pulsing animation for high-value colors circles .filter(d => d.V > 200) // Only high brightness colors .transition() .duration(3000) .delay(2500) // Start after entrance animation .ease(d3.easeSinInOut) .attr("r", 6) .transition() .duration(3000) .ease(d3.easeSinInOut) .attr("r", 4) .on("end", function repeat() { d3.select(this) .transition() .duration(3000) .ease(d3.easeSinInOut) .attr("r", 6) .transition() .duration(3000) .ease(d3.easeSinInOut) .attr("r", 4) .on("end", repeat); }); // Add hover interactions with smooth animations circles .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .ease(d3.easeBackOut) .attr("r", 8) .attr("stroke-width", 3) .attr("stroke", "#fff") .style("filter", "drop-shadow(0px 0px 8px rgba(255,255,255,0.8))"); tooltip .style("opacity", 1) .html(` ${d.Artist}
Color: ${d.HEX}
Hue: ${d.H}°
Saturation: ${d.S}%
Value: ${d.V} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { d3.select(this) .transition() .duration(300) .ease(d3.easeBackOut) .attr("r", d => d.V > 200 ? 6 : 4) // Return to pulsing size if high value .attr("stroke-width", 1) .attr("stroke", "white") .style("filter", "none"); tooltip .transition() .duration(200) .style("opacity", 0); }); // Add animated title with fade-in svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-family", "Arial, sans-serif") .attr("font-weight", "bold") .attr("fill", "#333") .attr("opacity", 0) .text(`Color Palette Wheel - ${selectedArtist} (${filteredData.length} colors)`) .transition() .duration(1000) .delay(500) .attr("opacity", 1); // Add rotating highlight ring for visual interest const highlightRing = svg.append("circle") .attr("cx", centerX) .attr("cy", centerY) .attr("r", maxRadius + 10) .attr("fill", "none") .attr("stroke", "rgba(255, 255, 255, 0.3)") .attr("stroke-width", 2) .attr("stroke-dasharray", "10,5") .attr("opacity", 0); // Animate the highlight ring highlightRing .transition() .duration(1000) .delay(3000) .attr("opacity", 1) .transition() .duration(20000) .ease(d3.easeLinear) .attrTween("stroke-dashoffset", function() { return d3.interpolate(0, -100); }) .on("end", function repeat() { d3.select(this) .transition() .duration(20000) .ease(d3.easeLinear) .attrTween("stroke-dashoffset", function() { return d3.interpolate(0, -100); }) .on("end", repeat); }); // Add legend const legend = svg.append("g") .attr("transform", `translate(20, ${height - 80})`); legend.append("text") .attr("x", 0) .attr("y", 0) .attr("font-size", "12px") .attr("font-family", "Arial, sans-serif") .attr("font-weight", "bold") .attr("fill", "#333") .text("Legend:"); legend.append("text") .attr("x", 0) .attr("y", 15) .attr("font-size", "10px") .attr("font-family", "Arial, sans-serif") .attr("fill", "#666") .text("• Angle = Hue (0-360°)"); legend.append("text") .attr("x", 0) .attr("y", 27) .attr("font-size", "10px") .attr("font-family", "Arial, sans-serif") .attr("fill", "#666") .text("• Distance from center = Saturation"); legend.append("text") .attr("x", 0) .attr("y", 39) .attr("font-size", "10px") .attr("font-family", "Arial, sans-serif") .attr("fill", "#666") .text("• Opacity = Value/Brightness"); return svg.node(); }32:[{"id":"348ca5c1db00caeabda3bbd9cf91299456cce5cf9f972fb25edefc3e220b8f14ef25a8861ef6ac209f56fe77d102f06eeb2c333bc1ad882872f44bf4c3b1ec8c","href":"https://static.observableusercontent.com/files/348ca5c1db00caeabda3bbd9cf91299456cce5cf9f972fb25edefc3e220b8f14ef25a8861ef6ac209f56fe77d102f06eeb2c333bc1ad882872f44bf4c3b1ec8c","name":"1.pdf","type":"application/pdf","lastModified":1787325758641.116,"size":102470},{"id":"a010a9e1384dc7744f898224285b77585f4b863750507fbfb9a00b53372a69c95e3413250d1ddcb76c143ee3fd806be60e654d325b40ac9539e1e302543abf20","href":"https://static.observableusercontent.com/files/a010a9e1384dc7744f898224285b77585f4b863750507fbfb9a00b53372a69c95e3413250d1ddcb76c143ee3fd806be60e654d325b40ac9539e1e302543abf20","name":"impressionism_color_matrix_data.csv","type":"text/csv","lastModified":1756225517641.93,"size":13735}] 2f:{"title":"🎨 Re-Impressionism: Rediscovering Color through Data","cells":[{"id":0,"value":"# 🎨 Re-Impressionism: Rediscovering Color through Data\n\nWhen I first began this project, my goal was simple: to explore color in Impressionist paintings through a data lens and sharpen my visual storytelling skills. I never imagined it would evolve into a deeper inquiry about visibility, representation, and the way history is remembered through art.\n","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"await FileAttachment(\"impressionism_color_matrix_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"csvFile = FileAttachment(\"impressionism_color_matrix_data.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = {\n const rawData = await csvFile.csv(d => ({\n Artist: d.Artist,\n HEX: d.HEX,\n H: +d.H, // Convert to number (0-360)\n S: +d.S, // Convert to number (0-100) \n V: +d.V // Convert to number (0-255)\n }));\n \n // Add some validation\n return rawData.filter(d => \n d.HEX && \n !isNaN(d.H) && !isNaN(d.S) && !isNaN(d.V) &&\n d.H >= 0 && d.H <= 360 &&\n d.S >= 0 && d.S <= 100 &&\n d.V >= 0 && d.V <= 255\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"This project explores color palettes in Impressionist art through the lens of gender representation. \nThe methodology involved:\n- Extracting dominant colors from museum artworks\n- Mapping hue, saturation, and brightness on a polar color wheel\n- Comparing trends across male and female artists","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"viewof selectedArtist = Inputs.select(\n [\"All\", ...Array.from(new Set(data.map(d => d.Artist))).sort()],\n {\n label: \"Select Artist:\",\n value: \"All\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"filteredData = selectedArtist === \"All\" \n ? data \n : data.filter(d => d.Artist === selectedArtist)","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"Key Findings\n\n1. Male Artists Showed Greater Hue Spread\nArtists like Van Gogh and Renoir had a broader hue range—blues, greens, ochres, and violets—suggesting a more experimental approach to atmosphere and emotion.\n\n2. Female Artists Featured Delicate, Warm Palettes\nCassatt and Morisot's palettes leaned toward warm pastels and earth tones, reflecting domestic and observational subject matter within constrained physical and institutional environments.\n\n3. Palette Evolution Mirrors Philosophical Shifts\nEarlier works (e.g. Manet) leaned heavily into neutrals and subdued tones. By contrast, late-period Pissarro and Van Gogh embraced saturated contrasts, mirroring broader artistic, social, and political radicalism.\n\n4. Absence of Open Access for Women is the Data\nOne of the project’s most important observations is that institutional neglect continues digitally. Museums like The MET have limited Open Access for women Impressionists, making it harder to analyze or celebrate them.","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"impressionism_color_matrix_data = await FileAttachment(\"impressionism_color_matrix_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"pdfURL = FileAttachment(\"1.pdf\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"pdfjs = await import(\n \"https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.min.mjs\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"pdfjs.GlobalWorkerOptions.workerSrc =\n \"https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.worker.min.mjs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"pdfDocument = {\n const data = new Uint8Array(\n await FileAttachment(\"1.pdf\").arrayBuffer()\n );\n\n return pdfjs.getDocument({data}).promise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"pdfViewer = {\n const container = html`

`;\n\n for (let pageNumber = 1; pageNumber <= pdfDocument.numPages; pageNumber++) {\n const page = await pdfDocument.getPage(pageNumber);\n const viewport = page.getViewport({scale: 1.4});\n\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n\n canvas.width = viewport.width;\n canvas.height = viewport.height;\n canvas.style.maxWidth = \"100%\";\n canvas.style.height = \"auto\";\n canvas.style.background = \"white\";\n canvas.style.boxShadow = \"0 2px 8px rgba(0,0,0,0.15)\";\n\n await page.render({\n canvasContext: context,\n viewport\n }).promise;\n\n container.appendChild(canvas);\n }\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}