2f:Tccf,addTooltips(Plot.plot({ height: 650, width: 1000, marginLeft:30, marginRight:30, marginBottom:90, style: {backgroundColor:"black", fontFamily:"Open Sans"}, color: {type:'categorical', range: ['#D9695F', '#658C5A', '#F2BE5C','#5C4673', '#72A5B8']}, x: {domain:[63,97]}, y: {domain:[0.5,5.5]}, marks: [ //customize x axis Plot.axisX({fontSize:14, tickSize:0, ticks: [70, 75,80,85,90,95],color:"white", label:"Episode Rating\n(out of 100)",labelAnchor:"center", labelOffset:75}), Plot.axisY({tickSize:0, ticks: [1,2,3,4,5], textAnchor:"start", fontSize:16, fontWeight:'bold', color:"white", text: ["Jodie Whitaker","Christopher Eccleston","Peter Capaldi","Matt Smith","David Tennant"]}), Plot.axisY({tickSize:0, ticks: [1,2,3,4,5], textAnchor:"start", fontSize:14, dy:20, color:"white", text: ["Thirteenth Doctor","Ninth Doctor","Twelfth Doctor","Eleventh Doctor","Tenth Doctor"]}), //episode dots Plot.dot(doctor_who, {x: d => d.rating + (Math.random()*0.2-0.15), y: d => d.doctor_index + (Math.random()*0.4-0.2), title: d=> 'S' + d.season_number + 'E' + d.episode_number + '\n' + d.episode_title, fill:"doctor", stroke:"black", strokeWidth:0.5, r:8, opacity:.6}), //mean for all episodes - vertical line Plot.ruleX(doctor_who,{x: avg_rating, strokeWidth:2, stroke:"white"}), //mean for all episodes - annotation Plot.text(["Overall Avg: "+ avg_rating.toFixed(1)], {x:d => avg_rating, y:d => 4.5, rotate:-90, dx:-12, fontSize:15, fill:"white"}), //mean by doctor - horizontal lines Plot.ruleY(doctor_who, Plot.groupY({x2:"mean"}, {y:"doctor_index",x:"rating", x1: avg_rating, stroke:"white", strokeWidth:2.2})), //mean by doctor - annotation Plot.text(["Avg Rating\nper Doctor"], {x:d => 78, y:d => 2.5, fontSize:12, fill:"white"}), //mean by doctor - rating text Plot.arrow([{x1: 78, x2: 81.6, y1:2.7, y2:3, bend:20}], {x1:"x1",x2:"x2",y1:"y1",y2:"y2", stroke:"white", bend:25}), Plot.arrow([{x1: 78, x2: 81.2, y1:2.3, y2:2, bend:20}], {x1:"x1",x2:"x2",y1:"y1",y2:"y2", stroke:"white", bend:-20}), Plot.text(doctor_who, Plot.groupY({x: "mean", text: (D) => d3.mean(D).toFixed(1)}, {x: "rating", y: "doctor_index", text:"rating", fill:"white", dy:42, fontSize:18})), //mean by doctor - background dot Plot.dot(doctor_who, Plot.groupY({x: "mean"}, {x: "rating", y: "doctor_index", r:(55/2)*1.07, fill:"white"})), //mean by doctor - image Plot.image(doctor_who, Plot.groupY({x: "mean", src: "first"}, {x: "rating", y: "doctor_index", width:55, src:"image"})) ] }), //tooltip highlight {fill:"white", "stroke-width": "3px", stroke: "white", color:"black"} )30:[{"id":"b063987ee022f2b549e54c455bdd3220124008d757d91f4cceca390bc56d437f8c6d456ba275691c884194ea2dd13b32d2ac98d4b7011954bfdf33c06a19a912","href":"https://static.observableusercontent.com/files/b063987ee022f2b549e54c455bdd3220124008d757d91f4cceca390bc56d437f8c6d456ba275691c884194ea2dd13b32d2ac98d4b7011954bfdf33c06a19a912","name":"doctor-who.png","type":"image/png","lastModified":1686409086941.545,"size":406223},{"id":"4a93fcff2f6e19556ecaecdf7819cf7af4bb5baa5ee13bc8ddfa9d320f68a0ea41852945bc6a5a964643c16c267c4defbc7914abc097c377dc6319395a98f2c2","href":"https://static.observableusercontent.com/files/4a93fcff2f6e19556ecaecdf7819cf7af4bb5baa5ee13bc8ddfa9d320f68a0ea41852945bc6a5a964643c16c267c4defbc7914abc097c377dc6319395a98f2c2","name":"doctor_who.csv","type":"text/csv","lastModified":1686409086941.545,"size":13987}] 2d:{"title":"Doctor Who was The Best?","cells":[{"id":334,"value":"# Doctor Who was The Best?\n\nObservable Plot recreation of my Doctor Who jitter-pop ggplot for #TidyTuesday. I first came across this jitter-pop plot style from **Cédric Scherer**, this plot is largely inspired by his [blog](https://www.cedricscherer.com/2019/08/05/a-ggplot2-tutorial-for-beautiful-plotting-in-r/).","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"

Doctor Who was The Best?

\n Ratings by Episode and Doctor for the popular TV series, Doctor Who\n

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":21,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"# Comparison with ggplot version\nHere is the original for comparison, it was created with R ggplot2. Code available on my [GitHub](https://github.com/tashapiro/TidyTuesday/blob/master/2021/W48/doctor_who.R).","pinned":false,"hidden":false,"mode":"md"},{"id":491,"value":"doctorWho = FileAttachment(\"doctor-who.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"## Additional Wrangling","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"avg_rating = d3.mean(doctor_who, d => d.rating)","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"function getImage(doctorName) {\n var base_url = 'https://raw.githubusercontent.com/tashapiro/TidyTuesday/master/2021/W48/images/'\n var replacedName = doctorName.split(' ').join('_');\n return base_url + replacedName + '.png';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"## Tooltip Import from Mike Freeman","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"# Import Data","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"This dataset was part of [TidyTuesday](https://github.com/rfordatascience/tidytuesday/blob/2c49e2a88ecf499aa26b7c2404bfa3fb21bd219d/data/2021/2021-11-23/imdb.csv#L2), courtesy the R package, datardis. ","pinned":false,"hidden":false,"mode":"md"},{"id":256,"value":"episodes = await FileAttachment(\"doctor_who.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"## SQL Query\nModify data with SQL query - map Doctors to seasons. Add in URL for Doctor images. Filter out episodes with no rating or that aren't part of a season (e.g. holiday specials).","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"select a. *, \n 'https://raw.githubusercontent.com/tashapiro/TidyTuesday/master/2021/W48/images/' || replace(doctor,' ','_') || '.png' as image\n FROM(\n select * \n,case \n when season_number=1 then 'Christopher Eccleston'\n when season_number<5 then 'David Tennant'\n when season_number<8 then 'Matt Smith'\n when season_number<11 then 'Peter Capaldi'\n when season_number>=11 then 'Jodie Whitaker'\n end as doctor\n ,case \n when season_number=1 then 2\n when season_number<5 then 5\n when season_number<8 then 4\n when season_number<11 then 3\n when season_number>=11 then 1\n end as doctor_index\n ,case \n when season_number=1 then 'Ninth Doctor'\n when season_number<5 then 'Tenth Doctor'\n when season_number<8 then 'Eleventh Doctor'\n when season_number<11 then 'Twelfth Doctor'\n when season_number>=11 then 'Thirteenth Doctor'\n end as doctor_number\nfrom episodes\nwhere season_number>=1 and season_number<14\nand rating <> 'NaN'\n) a","pinned":true,"hidden":false,"mode":"sql","output":"doctor_who","database":"var:episodes"}],"files":"$W30","stdlib":"1","titling":"auto"}