2c:null 2d:["$","title",null,{"children":"Conversation-Visualizer | Bruce Crock | Observable"}] 32:T8c5,function createConversationTable(conversation) { // Get the names of the participants var participants = conversation[0].participants; var statements = conversation[0].statements; //var participants =document.getElementById(conversation) // Create the table element var table = document.createElement("table"); // Create the table header with the participant names /* var headerRow = document.createElement("tr"); for (var i = 0; i < conversation[0].participants.length; i++) { var headerCell = document.createElement("th"); headerCell.innerHTML = conversation[0].participants[i].name; headerRow.appendChild(headerCell); } table.appendChild(headerRow); */ // place statements into the table, one statement at a time for (var i = 0; i < conversation[0].statements.length; i++) { var row = document.createElement("tr"); var cell = document.createElement("td"); var iDiv = document.createElement("div"); var whichparticipantId = Object.values(conversation[0].participants)[0] // .indexof(conversation[0].statements[i].participant) iDiv.id = "cell" + i; // iDiv.innerHTML = conversation[0].statements[i].participant + ": " + whichparticipantId + ": " + conversation[0].statements[i].text; iDiv.innerHTML = conversation[0].statements[i].participant + ": " + conversation[0].statements[i].text; //document.getElementsByTagName("cell" +i).appendChild(iDiv); cell.appendChild(iDiv) // cell.innerHTML = conversation[0].statements[i].text; row.appendChild(cell); table.appendChild(row); } /* nearly works for (var i = 0; i < conversation[0].participants.length; i++) { var row = document.createElement("tr"); for (var j = 1; j < conversation[0].statements.length-1; j++) { var cell = document.createElement("td"); cell.innerHTML = conversation[0].statements[j].text; row.appendChild(cell); } table.appendChild(row); } */ // Return the created table return table; // return conversation[0].participants[0]; } 33:T4aa,function createConversationTableV2(conversation) { // Get the names of the participants var statements = conversation[0]; // Create the table element var mytable = document.createElement("table"); mytable.style.width = "320px" mytable.style.class="wp-block-table" mytable.style.tableLayout="fixed" // mytable.style.border = '1px solid black'; for (var i = 0; i < conversation.length; i++) { var statement1 = conversation[i].B; var statement2 = conversation[i].C; var row = document.createElement("tr"); var cell = document.createElement("td"); // cell.style.width="100px"; var iDiv = document.createElement("div"); iDiv.id = "cell" + i + 0; iDiv.innerHTML = statement1; cell.appendChild(iDiv) row.appendChild(cell); var cell = document.createElement("td"); var iDiv = document.createElement("div"); iDiv.id = "cell" + i + 1; iDiv.innerHTML = statement2; cell.appendChild(iDiv) row.appendChild(cell); mytable.appendChild(row); } return mytable; } 34:T42d,twoShapeRed = { // first, we select our svg object //const svg = d3.select("svg") // now, we append a rect (rectangle) element to the SVG const rect = svg.append('rect') // finally, we style and position the rect rect .style('fill', 'red') // rect's fill color .attr('height', 50) // rect's height (in pixels) .attr('width', 50) // rect's width (in pixels) .attr('x', 10) // x position of the top-left corner .attr('y', 200) // y position of the top-left corner const desc= svg.append("text") desc .text("helloworld") // .attr("dy", ".35em") .attr('x', 5) // x position of the top-left corner .attr('y', 220) // y position of the top-left corner // .attr("text-anchor", "start") // .attr("alignment-baseline", "hanging") // .attr("font-size", '10px') .style("height", "60%") .style("margin", "5px") .style("margin-top", "0px") .style("font-size", "1em") .style("line-height", "130%") .style("overflow", "hidden") return svg }35:[{"id":"57e7a0d7cd4b00cbd3bf568b2703242325c5ebfa39637b4c5064533d2eb47abf614d869a4c687bf5fc1e84dd5234cc2fed84d92b3dbf009900dbf087849f333c","href":"https://static.observableusercontent.com/files/57e7a0d7cd4b00cbd3bf568b2703242325c5ebfa39637b4c5064533d2eb47abf614d869a4c687bf5fc1e84dd5234cc2fed84d92b3dbf009900dbf087849f333c","name":"FirstConvo.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1674418889446.446,"size":42697}] 30:{"id":"70028e7d4cb47ac3","slug":"conversation-visualizer","title":"Conversation-Visualizer","thumbnail":"da64a8fe669b0be3ac6d5c2973d3e0ade015f56c883daf848cd15337acc29940","access_level":"public","create_time":"$D2023-01-22T01:46:00.371Z","update_time":"$D2023-01-22T23:08:34.647Z","view_time":null,"first_public_time":"$D2023-01-22T01:46:00.371Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","bio":""},"version":525,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"bio":""}],"members":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Conversation-Visualizer","cells":[{"id":433,"value":"# Conversation-Visualizer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"This page is a work-in-progress. First we'll work on a simple display of a conversation between a human and ChatGPT. Next we'll work on some improved visualizations of the conversation so we can compare and contrast different conversations and use the comparisons to learn how to use the tool better. Then we'll work on extending for multi-threaded conversations which will can represent contributions of ideas to a conversation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"The following is a table showing the results of a json object which contains a conversation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"createConversationTable(conversation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"conversation = [ \n{\n\"participants\": [\n{\n\"name\": \"Alice\"\n},\n{\n\"name\": \"Bob\"\n}\n],\n\"statements\": [\n{\n\"participant\": \"Alice\",\n\"text\": \"Hello Bob, how are you today?\"\n},\n{\n\"participant\": \"Bob\",\n\"text\": \"I'm good, thanks for asking. How about you?\"\n},\n{\n\"participant\": \"Alice\",\n\"text\": \"I'm doing well too. Did you have a good weekend?\"\n},\n{\n\"participant\": \"Bob\",\n\"text\": \"I did, thanks. I went on a hike in the mountains.\"\n}\n]\n}\n];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"testing a javascript table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"viewof table = Inputs.table(conversationFromExcel)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"\n \n \n \n \n \n \n \n \n ${cars.slice(0, 5).map(car => htl.html`\n \n \n \n `)}\n \n

Name	Fuel economy	Year
${car[\"name\"]}	${car[\"economy (mpg)\"]} mpg	’${car[\"year\"]}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"testing the datatable object\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"firstCovoDatatable = conversationFromExcel","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"firstCovoDatatable","database":"$undefined"},{"id":454,"value":"The following is an example using the results of an attached spreadsheet, which is the input and output in my first attempt to use ChatGPT to help write the story about the Public Domain Collaboration Engine....","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"firstConvo = createConversationTableV2(conversationFromExcel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"conversationFromExcel = firstconvo.sheet(0, {\n headers: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"The next sections are where I am experimenting with writing graphics to an svg element for more advanced visualizations, but it is still very experimental and not functional","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"import {d3} from 'https://d3js.org/d3.v7.min.js';\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"oneShapeBlack = {\n \n // first, we select our svg object\n const svg = d3.select(\"svg\")\n \n // now, we append a rect (rectangle) element to the SVG\n const rect = svg.append('rect')\n \n // finally, we style and position the rect\n rect\n .style('fill', 'black') // rect's fill color\n .attr('height', 20) // rect's height (in pixels)\n .attr('width', 20) // rect's width (in pixels)\n .attr('x', 10) // x position of the top-left corner\n .attr('y', 10) // y position of the top-left corner\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":" mynodes = [\n {title: \"Node 1\", description: \"This is the first node\", size: 30},\n {title: \"Node 2\", description: \"This is the second node\", size: 40},\n {title: \"Node 3\", description: \"This is the third node\", size: 50},\n {title: \"Node 4\", description: \"This is the fourth node\", size: 60},\n {title: \"Node 5\", description: \"This is the fifth node\", size: 70}\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"svg = d3.select(\"svg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"svg1 = d3.select(\"svg1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"mychartBlue = {\n svg.selectAll(\"circle\")\n .data(mynodes)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", (d, i) => i*50 + 50)\n .attr(\"cy\", 100)\n .attr(\"r\", d => d.size)\n .style(\"fill\", \"blue\");\nreturn svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"mychart2 = {\n svg.selectAll(\"rect\")\n .data(mynodes)\n .enter()\n .append(\"rect\")\n .style('fill', 'green') // rect's fill color\n .attr('height', 20) // rect's height (in pixels)\n .attr('width', 20) // rect's width (in pixels)\n .attr('x', (d, i) => i*50 ) // x position of the top-left corner\n .attr('y', 300) // y position of the top-left corner\n .append(\"text\")\n .text(\"helloworld\")\n .attr(\"dy\", \".35em\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"alignment-baseline\", \"hanging\")\n .attr(\"font-size\", '10px')\n .attr(\"width\", d => d.size)\n .attr(\"height\", 50)\n \nreturn svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"This next example is where I am trying to use mermaid toolkit but my learning is that the length of the statements in my conversation will be too long.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"\nmessage=\"You are a world-renowned, beloved author\";\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"\nmermaid`sequenceDiagram\n\"Actor A\" ->> \"Actor B\": ${message}\n\"Actor B\" -->> \"Actor A\": response\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"firstconvo = FileAttachment(\"FirstConvo.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"