2b:null 2c:["$","title",null,{"children":"Bob Ross Paintings. | Urmila | Observable"}] 31:T886,chart = { const tooltip = d3.select("body") .append("div") .attr("class","tooltip") .style("visibility","hidden") const svg = d3.select(DOM.svg(width,height)) .attr("viewBox",[0,0,width,height]) .style("background-color","#7b5c98") svg.append("text") .attr("x",width/2) .attr("y",60) .text("Bob Ross Paintings.") .style("text-anchor","middle") .style("font-weight","bold") .style("font-size","2.5em") .style("fill","#dba296") svg.append("g") .call(xAxis) .attr("stroke","#dba296") svg.selectAll("circle") .data(simulation.nodes()) .enter() .append("a") .attr("xlink:href",d=>d.youtube_src) .attr("target","_blank") .append("circle") .attr("cx",d=>d.x) .attr("cy",d=>d.y) .attr("fill","transparent") .attr("stroke","#dba296") .attr("stroke-width",2) .attr("r",radius) .on("mousemove",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",3) tooltip.transition() .duration(200) .style("visibility","visible") tooltip.html("

"+d.painting_title+"

"+"

") .style("transform","translateY(-55%)") .style("left",(event.x)-103+"px") .style("top",(event.y)-150+"px") }) .on("mouseout",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",2) tooltip.transition().style("visibility","hidden") }) svg.append("text") .attr("x",width/2) .attr("y",height-12) .text("Number of colours used") .style("text-anchor","middle") .style("font-weight","bold") .style("font-size","1.5em") .style("fill","#dba296") return svg.node() }32:[{"id":"08216f1406302121eff9d2cdbb51256fa88a51c653a3f0268010edab479e02c71bec0dcd7674a405da7c16a42c9a483f98c0ad6a07a675b87fa2b8e14988b00f","href":"https://static.observableusercontent.com/files/08216f1406302121eff9d2cdbb51256fa88a51c653a3f0268010edab479e02c71bec0dcd7674a405da7c16a42c9a483f98c0ad6a07a675b87fa2b8e14988b00f","name":"bob.csv","type":"text/csv","lastModified":1617979722675.876,"size":188021}] 2f:{"id":"89da4aadf245d424","slug":"bob-ross-paintings","title":"Bob Ross Paintings.","thumbnail":"f4345e8d5cce867166ec3959ebbf356a73bae3bed81d3d41c78812a288bd35c5","access_level":"public","create_time":"$D2021-04-09T06:16:33.721Z","update_time":"$D2021-06-21T14:37:17.989Z","view_time":null,"first_public_time":"$D2021-04-09T17:03:27.161Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":"starter_2024"},"version":210,"publish_version":210,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null}],"members":[{"type":"individual","id":"a8b59130ff113103","login":"urmilaj","name":"Urmila","avatar_url":"https://avatars-next.observableusercontent.com/7d3b6c22c4e6d80831981a8062d1fdd61bf018caa1adf68e501b87fb72430c51","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"043e5f95e13c0b1e","slug":"30daychartchallenge","title":"#30DayChartChallenge","owner":{"id":"700e8d2a68a68d16","login":"urmilaj","name":"Urmila"}},"type":"notebook","body":{"title":"Bob Ross Paintings.","cells":[{"id":0,"value":"html`

Bob Ross Paintings.

Week 2:Distributions. Day 9:Statistics.

#30daychartchallenge
Hover for more info and click on individual points to watch Bob Ross's painting tutorial.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"html`

Data Credit:\nJared Wilber. GitHub: Bob Ross Paintings.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"simulation = {\n const simulation = d3.forceSimulation(data)\n .force(\"x\",d3.forceX(d=>x(d.num_colors)).strength(1.8))\n .force(\"y\",d3.forceY(height/2))\n .force(\"collide\",d3.forceCollide(radius+padding).strength(2))\n \n for (let i = 0; i < 250; ++i) {\n simulation.tick();\n }\n \n return simulation\n }\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"padding = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"radius = 3.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.right})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data,d=>d.num_colors))\n .range([margin.top,width-margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"margin = ({top: 30, right: 60, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"data = FileAttachment(\"bob.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"