25:["$","title",null,{"children":"D3 Excercises | Visualização | Observable"}] 49:T64e,{ // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when the cell is rerun const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); const svgContainer = d3.create('svg') .attr('width', 200) .attr('height', 200) .style('background-color', 'whitesmoke'); svgContainer.selectAll('circle') // Copy the code you wrote earlier to create the circles .data(circle_pos_data_clone) .join('circle') .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', 5) .attr('fill', 'blue') .call(d3.drag() .subject((event, d) => ({x: xScale(d.x), y: yScale(d.y)})) .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded) ); // Callback functions for the drag function dragStarted() { d3.select(this).attr('stroke', 'red'); // set stroke attr to red } function dragged(event, d) { // event.x is in pixel space, d.x need to be in data space. d.x = xScale.invert(event.x); //Convert the event.x to data space and set d.x d.y = yScale.invert(event.y); //Convert the event.y to data space and set d.y d3.select(this) .attr("cx", xScale(d.x)) //set the position of the circle by converting d.x back to pixel space .attr("cy", yScale(d.y)); //set the position of the circle by converting d.y back to pixel space } function dragEnded() { d3.select(this).attr('stroke', null); //set stroke attr to null } return svgContainer.node(); }4a:T91c,{ // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); // Add an id to circle_position_data circle_pos_data_clone.forEach( (d, i) => d.id = i ); const svgContainer = d3.create('svg') .attr('width', 200) .attr('height', 200) .style('background-color', 'whitesmoke'); const circleGroups = svgContainer.selectAll('circle') .data(circle_pos_data_clone) .join('g') //join a element here. // Create lime green circles of radius 8 and positions based on data circleGroups.append('circle') .attr('class', 'greenCircle') .attr('id', d => 'circle_border' + d.id) .attr('r', 8) .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('fill', 'limegreen') // Create blue circles of radius 5 and positions based on data circleGroups.append('circle') .attr('class', 'blueCircle') .attr('r', 5) .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('fill', 'blue') .call(d3.drag() .subject((event, d) => ({x: xScale(d.x), y: yScale(d.y)})) .on('start',dragStarted) .on('drag',dragged) .on('end',dragEnded) ) // Callback functions for the drag function dragStarted(event, d) { // Set color of outer circle stroke to red using d3.select() -- selecting on #circle_border + d.id d3.select('#circle_border' + d.id).attr('stroke', 'red'); } function dragged(event, d) { // Set d.x and d.y based on event.x and event.y as before d.x = xScale.invert(event.x); d.y = yScale.invert(event.y); // Update the position of the blue circle d3.select(this) .attr("cx", xScale(d.x)) .attr("cy", yScale(d.y)); // Update the position of the green circle -- select based on #circle_border + d.id d3.select('#circle_border' + d.id) .attr("cx", xScale(d.x)) .attr("cy", yScale(d.y)); } function dragEnded(event, d) { d3.select('#circle_border' + d.id).attr('stroke', null); //set stroke attr to null } return svgContainer.node(); }4b:Teb0,{ // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when the cell is rerun const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); // Add an id to circle_position_data circle_pos_data_clone.forEach( (d, i) => d.id = i ); // Hold circle size as part of circle position data circle_pos_data_clone.forEach( (d, i) => d.size = 5 ); // Can't directly interact with svg -- have to rerun cell before interacting to get the right thing to happen. const svgContainer = d3.create('svg') // Copy the container code you set up earlier. .attr('width', 200) .attr('height', 200) .style('background-color', 'whitesmoke'); const circleGroups = svgContainer.selectAll('circle') .data(circle_pos_data_clone) .join('g') // Create lime green circles of radius 8 and positions based on data circleGroups.append('circle') .attr('class', 'greenCircle') // Change id so we don't select prev. border circles in drag selection .attr('id', d => 'circle_green' + d.id) .attr('r', 8) .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('fill', 'limegreen') .call(d3.drag() .subject(function(event,d) { return {x: event.x, y: event.y}; }) .on('start', resizeDragStarted) .on('drag', resizeDragged) .on('end', resizeDragEnded) ) // Create blue circles of radius 5 and positions based on data circleGroups.append('circle') .attr('class', 'blueCircle') .attr('id', d => 'circle_blue' + d.id) .attr('r', 5) .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('fill', 'blue') .call(d3.drag() .subject((event, d) => ({x: xScale(d.x), y: yScale(d.y)})) .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded) ) //Callbacks for the resizeDrag function resizeDragStarted(event, d) { //Add blue stroke to outter edge of green circle d3.select(this).attr('stroke', 'blue'); } function resizeDragged(event, d) { // Compute distance between event.x, event.y and d.x,d.y in pixel space. // Use the Math.sqrt function and the power operator '**' const distFromCircleCenter = Math.sqrt((xScale(d.x)-event.x)**2 + (yScale(d.y)-event.y)**2) d.size = distFromCircleCenter; // Set distance as the new radius of the blue circles d3.select('#circle_blue' + d.id) .attr("r", distFromCircleCenter) // Set distance + 3 as the new radius of the green circles d3.select(this) .attr("r", distFromCircleCenter + 3); } function resizeDragEnded(event, d) { // Remove the blue stroke from outter edge of the green circle d3.select(this).attr('stroke', null); } // Callback functions for the movement drag function dragStarted(event, d) { // Set color of outer circle stroke to red using d3.select() -- selecting on #circle_border + d.id d3.select('#circle_green' + d.id).attr('stroke', 'red'); } function dragged(event, d) { // Set d.x and d.y based on event.x and event.y as before d.x = xScale.invert(event.x); d.y = yScale.invert(event.y); // Update the position of the blue circle d3.select(this) .attr("cx", xScale(d.x)) .attr("cy", yScale(d.y)); // Update the position of the green circle -- select based on #circle_border + d.id d3.select('#circle_green' + d.id) .attr("cx", xScale(d.x)) .attr("cy", yScale(d.y)); } function dragEnded(event, d) { d3.select('#circle_green' + d.id).attr('stroke', null); //set stroke attr to null } return svgContainer.node(); }4c:[] 29:{"id":"6ec5d4f405f8ac2f","slug":null,"title":"D3 Excercises","thumbnail":"e98fbed81ef5574530af76b4d0d6a95bb2dc4b7fdc0a4f3f536af730ff012bbf","access_level":"public","create_time":"$D2023-04-13T14:14:37.410Z","update_time":"$D2023-04-13T15:06:26.315Z","view_time":null,"first_public_time":"$D2023-04-13T14:14:37.410Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ba46d53cd92022c6","login":"datavisbarrafas","name":"Visualização","avatar_url":"https://avatars-next.observableusercontent.com/91f6fa5dc6b1dbedd8f176d7af8c62b8883701f35fa480fe14c3fea0e52b8954","tier":"starter_2024","bio":"","following":false},"version":154,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03096d7517f4f329","login":"barrafas","name":"Tiago Barradas","avatar_url":"https://avatars-next.observableusercontent.com/e73be1a419e1adb4b0d05a0aeb1c2e537bfe4de32cb4fb75c44f237c757d4c1c","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"03096d7517f4f329","login":"barrafas","name":"Tiago Barradas","avatar_url":"https://avatars-next.observableusercontent.com/e73be1a419e1adb4b0d05a0aeb1c2e537bfe4de32cb4fb75c44f237c757d4c1c","tier":null,"role":"editor"},{"type":"team","id":"ba46d53cd92022c6","login":"datavisbarrafas","name":"Visualização","avatar_url":"https://avatars-next.observableusercontent.com/91f6fa5dc6b1dbedd8f176d7af8c62b8883701f35fa480fe14c3fea0e52b8954","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Excercises","cells":[{"id":0,"value":"# D3 Excercises\n\nExcercises to build up D3 skills.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3=require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"##

Exercise 1 (DONE)

\n\nUse HTML and SVG to create an SVG region of size 200 x 200 with a `background-color` style of `whitesmoke` and draw a blue circle of radius 20 with a center at (60,60).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"##

Exercise 2

\nMake the same SVG region and blue circle, but this time using D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"width = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n const svgContainer = d3.create('svg')\n //Set width and height attributes of svg here and set background-color style to 'whitesmoke'\n .attr('width', width)\n .attr('height', height)\n .style('background-color', 'whitesmoke');\n \n //Once you have the container, append a circle to it of radius 20, at position 60, 60 filled 'blue'\n svgContainer.append('circle')\n .attr('cx', 60)\n .attr('cy', 60)\n .attr('r', 20)\n .attr('fill', 'blue')\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"##

Exercise 3

\n\nUse [`d3.range()`](https://observablehq.com/@d3/d3-range) and JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to make an array of 5 (x,y) locations lying at random integer positions where x and y lie in the range [1, 5]. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"circle_position_data =\td3.range(5).map(function()\t{\t\n return {\t\n x:\tMath.round(Math.random()\t*\t4 + 1), //\tRandom\tx-pixel\tlocation \n y:\tMath.round(Math.random()\t*\t4\t+\t1)\t//\tRandom\ty-pixel location\n };\t\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Inspect the resulting data by clicking open the `circle_position_data` array or using the [`printTable()`](https://observablehq.com/@uwdata/data-utilities#printTable) utility we've already imported into this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"Now use D3 to draw blue circles of radius=5 according to the (x,y) location data in the `circle_position_data` array. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"{\n // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun\n const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); \n \n const svgContainer = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('background-color', 'whitesmoke');\n \n svgContainer.selectAll('circle')\n .data(circle_pos_data_clone)\n .join('circle')\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('r', 5)\n .attr('fill', 'blue')\n //selectAll 'circle' elements\n //bind to data\n //join 'circle' elements\n //set 'r' attr of circles.\n //set 'cx' attr of circles based on d.x\n //set 'cy' attr of circles based on d.x\n //set 'fill' attr of circles to blue\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"##

Exercise 4

\nIt is awkward to have all the points bunched together in the top left corner of the SVG. Use [`d3.scaleLinear()`](https://observablehq.com/@d3/d3-scalelinear) to construct a `xScale()` and `yScale()`functions map the domain [0,5] to the fill width and height to the range [5, 195]. But remember to reverse the y-Axis in the scale function so that the origin is in the bottom left corner rather than the top left corner of the SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"yScale = d3.scaleLinear()\n .domain([0, 5])\n .range([195,5])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"xScale = d3.scaleLinear()\n .domain([0, 5])\n .range([5,195])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Now draw the data with D3 using the scale function(s).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"{\n // Make a local copy of the data for this cell to work with. Will reset data to circle_position_data when cell is rerun\n const circle_pos_data_clone = JSON.parse(JSON.stringify(circle_position_data)); \n \n const svgContainer = d3.create('svg')\n .attr('width', 200)\n .attr('height', 200)\n .style('background-color', 'whitesmoke');\n \n svgContainer.selectAll('circle')\n .data(circle_pos_data_clone)\n .join('circle')\n .attr('cx', d => xScale(d.x))\n .attr('cy', d => yScale(d.y))\n .attr('r', 5)\n .attr('fill', 'blue')\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"##

Exercise 5

\n\nMake the circles draggable using [`d3.drag()`](https://observablehq.com/@d3/click-vs-drag?collection=@d3/d3-drag). As the circle is dragged set its outer edge to the color red. Remove the red stroke when the drag ends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"##

Exercise 6

\n\nAdd a larger 'lime' colored circle (of radius = 8) behind each of the blue circles and ensure the circles are dragged together. Red stroke should appear on outter edge of lime circle.\n\nOne strategy is to join a ``grouping element and then add two circles as children of the grouping element. Then modify the drag code so that dragging on the blue circles moves the lime green circles as well. One way to do this is to add a unique 'id' to each data item in the data table and then use this 'id' to create an 'id' for each of the lime green circles so we can select them using the 'id' and update their positions as we update the blue circles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"##

Exercise 7

\n\nAdd the ability to resize a circle when dragging the green border. Follow an approach similar to the one we used for adding dragging, but modify the drag function for the green circles to resize rather than translate. Also, put a blue stroke border on the green circle when resizing, but use a red stroke border on the green circle when translating.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null