40:null 41:["$","title",null,{"children":"Land Guzzlers | Britney Hoang | Observable"}] 47:[] 45:{"id":"2a506c5b932be039","slug":null,"title":"Land Guzzlers","thumbnail":"73c5fce82054d5cffac39879b6c9ae4e172032f4f4fe3ac5c8bc116e630f8902","access_level":"public","create_time":"$D2023-04-11T19:48:56.395Z","update_time":"$D2023-04-11T21:19:13.864Z","view_time":null,"first_public_time":"$D2023-04-11T19:48:56.395Z","has_unpublished_edits":null,"fork":{"id":"f6b5881cdc7dc500","slug":"d3-dynamics-baby-steps","title":"D3 Dynamics baby steps","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8a1ce99fbad39052","login":"brithoang","name":"Britney Hoang","avatar_url":"https://avatars-next.observableusercontent.com/bd5eaf448c1bd2b3faae9fb9fbf4fe7b00c698cd81482c0ea226d832ceb1c917","tier":"starter_2024","bio":"","following":false},"version":229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc5899b2a389733","login":"brithoang","name":"Britney Hoang","avatar_url":"https://avatars-next.observableusercontent.com/bd5eaf448c1bd2b3faae9fb9fbf4fe7b00c698cd81482c0ea226d832ceb1c917","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dcc5899b2a389733","login":"brithoang","name":"Britney Hoang","avatar_url":"https://avatars-next.observableusercontent.com/bd5eaf448c1bd2b3faae9fb9fbf4fe7b00c698cd81482c0ea226d832ceb1c917","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Land Guzzlers","cells":[{"id":0,"value":"# Land Guzzlers\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mySVG4","database":"$undefined"},{"id":44,"value":"myRectangle = d3.select(mySVG4).select(\"rect\")\nmyRectangle.attr(\"width\",1.048 * 500) .attr(\"height\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"myRectangle.attr(\"width\", 250).attr(\"height\",150)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mySVG5","database":"$undefined"},{"id":67,"value":"myCircle = d3.select(mySVG5).select(\"circle\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"myCircle.attr(\"r\", 50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"^^ other objects behave the same. See this circle and change it's radius r attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"myCircle.style(\"fill\",\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"^^ or style properties like fill color. (stroke, stroke-width, and any other too.) \nAll properties are mutable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mySVG6","database":"$undefined"},{"id":90,"value":"myRectangle2 = d3.select(mySVG6).select(\"rect\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"myRectangle2.attr(\"x\", 500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"myRectangle2.attr(\"x\", 50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"^^ we can change the object's location using the x or y attributes. Try clicking Play/Run Cell, back and forth, on the two cells just above. Each will set the location of the rectangle, and it jumps into each position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mySVG7","database":"$undefined"},{"id":113,"value":"myRectangle3 = d3.select(mySVG7).select(\"rect\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"myRectangle3.transition().duration(1000).attr(\"x\", 500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"myRectangle3.transition().duration(1000).attr(\"x\", 50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"myRectangle3.transition().ease(d3.easeLinear).duration(1000).attr(\"x\", 500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"myRectangle3.transition().ease(d3.easeBounce).duration(1000).attr(\"x\", 50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"^^ but we can also animate it, using a .transition() with a .duration() of 1000 miliseconds, and even with an .ease function to control how it interpolates. Click Run on the cells just above, animating back and forth on two positions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mySVG8","database":"$undefined"},{"id":148,"value":"myCircle2 = d3.select(mySVG8).select(\"circle\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"myCircle2.transition().duration(1000).attr(\"cx\", 500).attr(\"r\", 150).style(\"fill\",\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"myCircle2.transition().duration(1000).attr(\"cx\", 50).attr(\"r\", 20).style(\"fill\",\"yellow\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mySVG9","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 46:"$45:body"