2d:null 2e:["$","title",null,{"children":"The Color of Water: Algorithmic Sea | Carlos de Oliveira Junior | Observable"}] 33:T5d1,wheel = { let arc2 = function(innerRadius, outerRadius, startAngle, endAngle) { return d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(startAngle) .endAngle(endAngle)(); } let arc3 = function(i, j, total){ } let innerRadius = 80; let midRadius = width / 3; let outterRadius = width / 2.5; let diffRadius = outterRadius - innerRadius; let barHeight = diffRadius / 12; const n = data.length; return html``; }34:T7b1,wheel2 = { let arc2 = function(innerRadius, outerRadius, startAngle, endAngle) { return d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(startAngle) .endAngle(endAngle)(); } // return d3.hsl("#ff0f01"); const cloneData = [...data]; let sortedData = cloneData.sort(function(group1, group2) { let c1 = d3.hsl(group1.aiColors[0]); let c2 = d3.hsl(group2.aiColors[0]); return c1.h - c2.h; }); let innerRadius = 80; let midRadius = width / 3; let outterRadius = width / 2.5; let diffRadius = outterRadius - innerRadius; let barHeight = diffRadius / 12; const n = sortedData.length; return html``; }35:T733,wheel3 = { let arc2 = function(innerRadius, outerRadius, startAngle, endAngle) { return d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(startAngle) .endAngle(endAngle)(); } // return d3.hsl("#ff0f01"); const cloneData = [...data]; let sortedData = cloneData.splice(0, 50); let innerRadius = 80; let midRadius = width / 3; let outterRadius = width / 2.5; let diffRadius = outterRadius - innerRadius; let barHeight = diffRadius / 12; const n = sortedData.length; return html``; }36:Ta69,authors = html`

Sarah Schorr is an American photographic artist, researcher, and educator. A captivation with light, water, and modes of embodied contemplation runs through her work. Schorr’s work has been widely exhibited with solo shows at esteemed spaces such as Yancey Richardson Gallery and Scalo Project Space in New York, NY. Her photographic art has been selected for juried group exhibitions by notable curators such as Elizabeth Avedon and Paula Tognarelli. Most recently, Schorr's image ebbtide received the director's prize at the Griffin Museum of Photography in Winchester, MA which will result in an exhibition and catalogue. In 2020, Schorr’s work was honored by the Julia Margaret Cameron Award for women photographers in the category of nude (first prize) as part of an exhibition at the Fotonostrum Gallery in Barcelona, Spain. Schorr received her BA in English Literature from Wesleyan University, her MFA in Photography, Video, and Related Media from the School of Visual Arts and her PhD in media studies at Aarhus University with a dissertation entitled, “Social Photography: Photographic Practices in the Context of Social Media”. She was selected for a (forthcoming) Terra Foundation fellowship and residency in Giverny, France for 2021.

Gabriel Pereira is a researcher PhD fellow at Aarhus University (Denmark). Previously, he was a visiting graduate student in Comparative Media Studies at MIT. His research focuses on critical studies of data, computer vision algorithms, and digital infrastructures, using both social scientific and artistic methodologies. Projects with Gabriel have been exhibited in the 33rd Sao Paulo Art Biennial, the Van Abbemuseum, IDFA DocLab, Itaú Cultural, aarea.co, and academic journals/conferences. He is a Researcher in Residence at the Center for Arts, Design, and Social Research (CAD+SR).

Vamoss is a creative coder and Technology Director at SuperUber since 2011. He integrates content, hardware, software, design and architecture to develop unique projects. Graduated in Design at ESPM-Rio, he works with interactive media since 2004, developing projects for new Media, Mobile and Web. He is now investigating the Creative Community in Brazil at the Master program in Creative Economics at ESPM-Rio, where by engaging the creative code community he intends to create a collaborative platform for sharing knowledge between the creative coders and society.

`;37:T545,data = Generators.observe(notify => { const socket = io("https://algorithmicsea.com", {transports: ['websocket', 'polling', 'flashsocket']}); socket.on('all', function (data) { let parsed = []; data.forEach((d, index) => { // let obj = {human: [], ai: []}; // if(d.colorchosen1) obj.human.push("#"+ d.colorchosen1); // if(d.colorchosen2) obj.human.push("#"+ d.colorchosen2); // if(d.gdata){ // let googleCloudVisionObj = JSON.parse(d.gdata); // googleCloudVisionObj.forEach(colObj => { // obj.ai.push(rgbToHex(colObj.color)); // }); // } let obj = {human:0, ai:0, id:index, humanColors:[], aiColors:[], aiPixelFractions:[], aiScores:[]}; if(d.colorchosen1) {obj.human++; obj.humanColors.push("#"+ d.colorchosen1);} if(d.colorchosen2) {obj.human++; obj.humanColors.push("#"+ d.colorchosen2);} if(d.gdata){ let googleCloudVisionObj = JSON.parse(d.gdata); //console.log(googleCloudVisionObj); googleCloudVisionObj.forEach(colObj => { obj.ai++; obj.aiColors.push(rgbToHex(colObj.color)); obj.aiScores.push(colObj.score); obj.aiPixelFractions.push(colObj.pixelFraction); }); } obj.total = obj.human + obj.ai; parsed.push(obj); }); notify(parsed); }); }) 38:[] 31:{"id":"fc3d225a66626c24","slug":"algorithmicsea-experiments","title":"The Color of Water: Algorithmic Sea","thumbnail":"cea8def93c34ca329aa285f3fe168413369dcb7f2e07035b76ade4071f738873","access_level":"public","create_time":"$D2021-01-12T12:14:08.263Z","update_time":"$D2021-06-29T12:28:30.278Z","view_time":null,"first_public_time":"$D2021-01-14T13:59:27.495Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7a7bb070c482138b","login":"vamoss","name":"Carlos de Oliveira Junior","avatar_url":"https://avatars-next.observableusercontent.com/94f23b53d15914777665f3dd2fd78f4cf6869369798d3c2ac08ebfd66825f20f","tier":"starter_2024"},"version":424,"publish_version":424,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c74e7e4992cbdef","login":"vamoss","name":"Carlos de Oliveira Junior","avatar_url":"https://avatars-next.observableusercontent.com/94f23b53d15914777665f3dd2fd78f4cf6869369798d3c2ac08ebfd66825f20f","tier":null}],"members":[{"type":"individual","id":"6c74e7e4992cbdef","login":"vamoss","name":"Carlos de Oliveira Junior","avatar_url":"https://avatars-next.observableusercontent.com/94f23b53d15914777665f3dd2fd78f4cf6869369798d3c2ac08ebfd66825f20f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"The Color of Water: Algorithmic Sea","cells":[{"id":90,"value":"intro = html`

The Color of Water: Algorithmic Sea

Transparent. Translucent. Opaque. Reflective. What is the color of Water?

\n\n

In this installation, water is a reflecting pool for both the human and computational understanding of color. Like water, these perceptions are always transforming.

\n\n

The web and physical installation The Color of Water: Algorithmic Sea explores the sociotechnical perception of color, especially how it is actualized through computer systems and their algorithms. The sea of colors shown in the installation is composed of a multitude of user generated colors. These colors undulate between the user and computer algorithmic processes.

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"latest = html`

The latest colors ordered vertically by time

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"allColors = {\n const w = Math.min(width, 2014);\n const h = width / data.length;\n const margin = 0\n \n const context = DOM.context2d(w + 20 + 1, data.length * h + (data.length - 1) * margin)\n data.forEach((obj, i) => {\n const colors = obj.humanColors.concat(obj.aiColors);\n colors.forEach((color, j) => {\n context.fillStyle = color\n context.beginPath();\n context.moveTo(j * w / colors.length, i * h + (i === 0 ? 0 : margin * i))\n context.lineTo(j * w / colors.length + w / colors.length + 1, i * h + (i === 0 ? 0 : margin * i))\n context.lineTo(j * w / colors.length + w / colors.length + 1, i * h + (i === 0 ? 0 : margin * i) + h)\n context.lineTo(j * w / colors.length, i * h + (i === 0 ? 0 : margin * i) + h )\n context.fill()\n })\n })\n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"colorWheel = html`

Color Whell: Work in progress

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"chart = {\n const svg = d3.select(DOM.svg(width, width))\n .attr(\"viewBox\", `${-width / 2} ${-width / 2} ${width} ${width}`)\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"font\", \"10px sans-serif\");\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(d3.stack().keys(columns)(data))\n .join(\"g\")\n .attr(\"fill\", d => z(d.key))\n .selectAll(\"path\")\n .data(d => d)\n .join(\"path\")\n .attr(\"d\", arc);\n\n // svg.append(\"g\")\n // .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(legend);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function rgbToHex(color){\n return \"#\" + ((1 << 24) + (color.red << 16) + (color.green << 8) + color.blue).toString(16).slice(1) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"columns = [\"human\", \"ai\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"arc = d3.arc()\n .innerRadius(d => y(d[0]))\n .outerRadius(d => y(d[1]))\n .startAngle(d => x(d.data.id))\n .endAngle(d => x(d.data.id) + x.bandwidth())\n .padAngle(0.01)\n .padRadius(innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.id))\n .range([0, 2 * Math.PI])\n .align(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"// This scale maintains area proportionality of radial bars\ny = d3.scaleRadial()\n .domain([0, d3.max(data, d => d.total)])\n .range([innerRadius, outerRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"z = d3.scaleOrdinal()\n .domain(columns)\n .range([\"#98abc5\", \"#8a89a6\", \"#7b6888\", \"#6b486b\", \"#a05d56\", \"#d0743c\", \"#ff8c00\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"xAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `\n rotate(${((x(d.id) + x.bandwidth() / 2) * 180 / Math.PI - 90)})\n translate(${outerRadius+40},0)\n `)\n .call(g => g.append(\"line\")\n .attr(\"x2\", -5)\n .attr(\"stroke\", \"#000\"))\n .call(g => g.append(\"text\")\n .style(\"font-size\", \"5px\")\n .attr(\"transform\", d => (x(d.id) + x.bandwidth() / 2 + Math.PI / 2) % (2 * Math.PI) < Math.PI\n ? \"rotate(90)translate(0,16)\"\n : \"rotate(-90)translate(0,-9)\")\n .text(d => d.id)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"yAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .call(g => g.append(\"text\")\n .attr(\"y\", d => -y(y.ticks(5).pop()))\n .attr(\"dy\", \"-1em\")\n .text(\"Population\"))\n .call(g => g.selectAll(\"g\")\n .data(y.ticks(5).slice(1))\n .join(\"g\")\n .attr(\"fill\", \"none\")\n .call(g => g.append(\"circle\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.5)\n .attr(\"r\", y))\n .call(g => g.append(\"text\")\n .attr(\"y\", d => -y(d))\n .attr(\"dy\", \"0.35em\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 5)\n .text(y.tickFormat(5, \"s\"))\n .clone(true)\n .attr(\"fill\", \"#000\")\n .attr(\"stroke\", \"none\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"legend = g => g.append(\"g\")\n .selectAll(\"g\")\n .data(columns.reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(-40,${(i - (columns.length - 1) / 2) * 20})`)\n .call(g => g.append(\"rect\")\n .attr(\"width\", 18)\n .attr(\"height\", 18)\n .attr(\"fill\", z))\n .call(g => g.append(\"text\")\n .attr(\"x\", 24)\n .attr(\"y\", 9)\n .attr(\"dy\", \"0.35em\")\n .text(d => d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"innerRadius = 180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"outerRadius = width / 2 - 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"io = require('socket.io-client@3.0.3/dist/socket.io.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"