25:["$","title",null,{"children":"Simple D3 | Rebecca Williams | Observable"}] 49:T639,hover = { const svg = d3.create('svg') .attr('width', 300) .attr('height', 300) // a 10x10 matrix const data = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ].map(() => [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]) svg.selectAll('g') .data(data) .join('g') .attr('transform', (d,i) => `translate(0,${30 * i})`) .selectAll('rect') .data(d => d) .join('rect') .attr('x', (d,i) => 30 * i) .attr('height', 30) .attr('width', 30) .style('fill', '#4dbeff') // When the mouse moves over a rect, quickly fade its color to blue .on('mouseover', function(e, d) { d3.select(this) .transition() .duration(100) .style('fill', 'white') //d3.select('text').text(`x:${d3.mouse(this)[0]} y:${d3.mouse(this)[1]}`); }) // When the mouse leaves a rect, slowly fade its color back to orange //.on('mouseout', function(e, d) { // d3.select(this) // .transition() //.duration(2000) // .style('fill', '#4dbeff') // }) .on('click', function(e, d) { d3.select(this) .style('fill', 'red') }) //svg.selectAll('g').append("text").text("hello") svg.on('click', function () { var mouse = d3.mouse(this); svg .append("use") .attr("href", "#pointer") .attr("x", mouse[0]) .attr("y", mouse[1]) .attr("fill", "#039BE5") .attr("stroke", "#039BE5") .attr("stroke-width", "1px"); }); return svg.node() } 4a:[] 29:{"id":"9e53f278d06d9ffe","slug":null,"title":"Simple D3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-25T19:50:14.905Z","update_time":"$D2023-02-25T22:48:12.960Z","view_time":null,"first_public_time":"$D2023-02-25T19:50:14.905Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8b9227fee9925e85","login":"rmwillia","name":"Rebecca Williams","avatar_url":"https://avatars-next.observableusercontent.com/d2ce1f7b2ba260d452b563dc0abfd99dc06e2e7955f1e8c2e3d7d24f0843d61b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"eae57c97f099cc51","login":"rmwillia","name":"Rebecca Williams","avatar_url":"https://avatars-next.observableusercontent.com/d2ce1f7b2ba260d452b563dc0abfd99dc06e2e7955f1e8c2e3d7d24f0843d61b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"eae57c97f099cc51","login":"rmwillia","name":"Rebecca Williams","avatar_url":"https://avatars-next.observableusercontent.com/d2ce1f7b2ba260d452b563dc0abfd99dc06e2e7955f1e8c2e3d7d24f0843d61b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Simple D3","cells":[{"id":0,"value":"# Simple D3\n\nThe simplest starting point for working with D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"

\n\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"// D3.js is built on top of SVG, so it is very similar to the SVG example\n// Try to move your mouse over the circle above!\n\n{\n const height = 60\n const svg = d3.select(DOM.svg(width, height))\n \n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n svg.selectAll('rect')\n .data([{ x: 30, height: 30, width: 30, title: 'Details on demand!' }])\n .enter()\n .append('rect')\n .attr('x', (d,i) => 30 * i)\n .attr('height', 30)\n .attr('width', 30)\n .attr('fill', 'SteelBlue')\n // Append a title element inside the circle\n .append('title')\n // It can be multilined, but becareful with the indentation\n .text(d => `${d.title}\ncx: ${d.x}\nheight: ${d.height}\nwidth: ${d.width}`)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"p={\nvar svg = d3.create('svg')\n .attr('width', 600)\n .attr('height', 300)\n \n svg.selectAll('g')\n .on(\"click\", function () {\n var mouse = d3.mouse(this);\n \n var pointer = svg\n .append(\"use\")\n .attr(\"href\", \"#pointer\")\n .attr(\"transform\", \"translate(\" + mouse[0] + \",\" + mouse[1] + \")scale(0)\")\n .attr(\"fill\", \"#039BE5\")\n .attr(\"stroke\", \"#039BE5\")\n .attr(\"stroke-width\", \"1px\");\n \n pointer\n .transition()\n .duration(500)\n .attr(\"x\", mouse[0])\n .attr(\"y\", mouse[1])\n .attr(\"transform\", \"scale(1)\");\n });\nreturn svg.node()\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof greenLength = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null