2b:null 2c:["$","title",null,{"children":"Day 16: #30DayChartChallenge. Family Guy TV Show | Roman Sverdan | Observable"}] 31:T705,chart = { const svg = d3 .create("svg") .style("width", width + "px") .style("height", height + "px") .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); const simulation = d3 .forceSimulation(director) .force("charge", d3.forceManyBody().strength(90)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("forceY", d3.forceY(height / 2).strength(0.1)) .force( "collision", d3.forceCollide().radius((d) => radius(d.episodes) + 2) ) .on("tick", ticked); function ticked() { svg .selectAll("circle") .data(director) .join("circle") .attr("r", (d) => radius(d.episodes)) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .style("fill", (d) => colorScale(d.imdbAvg)) .style("fill-opacity", "0.5") .style("stroke", "#333") .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut); svg .selectAll("text") .data(director) .join("text") .text((d) => (d.episodes > 15 ? d.director : "")) .style("text-anchor", "middle") .style("fill", "#333") .style("font-family", "Arial") .style("font-size", 12) .attr("x", (data) => data.x) .attr("y", (data) => data.y); } function nodeMouseOver(event, d) { let x = event.pageX + 18; let y = event.pageY; x > width - 200 ? (x = x - 218) : x; toolTip .style("left", x + "px") .style("top", y + 2 + "px") .style("display", "block") .html( `${d.director}
Episodes: ${d.episodes}
IMDb Average: ${d.imdbAvg}` ); } function nodeMouseOut(event, d) { toolTip.style("display", "none"); } return svg.node(); }32:[{"id":"c831ad4b46c1d946d1b32cb6c83a8723767fd75a2adb01bcc381166e47d2160c7c6f5de70cdc11fb8b5e8708aa57641c55329bd109884a17007818f009bad269","href":"https://static.observableusercontent.com/files/c831ad4b46c1d946d1b32cb6c83a8723767fd75a2adb01bcc381166e47d2160c7c6f5de70cdc11fb8b5e8708aa57641c55329bd109884a17007818f009bad269","name":"Family Guy Dataset.csv","type":"text/csv","lastModified":1681668136198.378,"size":475006}] 2f:{"id":"b1843a8b6da3991b","slug":"30daychartchallenge-day-16","title":"Day 16: #30DayChartChallenge. Family Guy TV Show","thumbnail":"be36384fe41fb114303967a619336344ead2efc9214160267ab300a34e15db32","access_level":"public","create_time":"$D2023-04-16T18:01:46.723Z","update_time":"$D2023-04-18T18:34:09.833Z","view_time":null,"first_public_time":"$D2023-04-16T18:01:46.723Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":81,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null}],"members":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 16: #30DayChartChallenge. Family Guy TV Show","cells":[{"id":0,"value":"# Day 16: #30DayChartChallenge. Family Guy TV Show","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"### Total number of episodes and average IMDb Rating by each director\n\nData source: Kaggle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"Legend(d3.scaleSequential([6.3, 8.4], colors), {\n title: \"IMDb Average Rating\",\n ticks: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"colors = [\"yellow\", \"green\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"colorScale = d3\n .scaleSequential()\n .domain(d3.extent(director, (d) => d.imdbAvg))\n .interpolator(d3.interpolateRgb(colors[0], colors[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"radius = d3\n .scaleLinear() // instead of scaleLinear()\n .domain([0, d3.max(director, (d) => d.episodes)])\n .range([0, 100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"csv = FileAttachment(\"Family Guy Dataset.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"director = {\n let res = {};\n csv.forEach((el) => {\n if (!res[el[\"Director\"]]) {\n res[el[\"Director\"]] = [1, el[\"IMDb Rating\"]];\n } else {\n res[el[\"Director\"]][0] += 1;\n res[el[\"Director\"]][1] += el[\"IMDb Rating\"];\n }\n });\n return Object.entries(res)\n .map((el) => {\n return {\n director: el[0],\n episodes: el[1][0],\n imdbAvg: (el[1][1] / el[1][0]).toFixed(2)\n };\n })\n .sort((a, b) => b.episodes - a.episodes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import { Legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"