30: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() }31:[{"id":"08216f1406302121eff9d2cdbb51256fa88a51c653a3f0268010edab479e02c71bec0dcd7674a405da7c16a42c9a483f98c0ad6a07a675b87fa2b8e14988b00f","href":"https://static.observableusercontent.com/files/08216f1406302121eff9d2cdbb51256fa88a51c653a3f0268010edab479e02c71bec0dcd7674a405da7c16a42c9a483f98c0ad6a07a675b87fa2b8e14988b00f","name":"bob.csv","type":"text/csv","lastModified":1617979722675.876,"size":188021}] 2e:{"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"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":31,"value":"padding = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"radius = 3.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.right})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":17,"value":"margin = ({top: 30, right: 60, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = FileAttachment(\"bob.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}