2c:null 2d:["$","title",null,{"children":"Modern Family Episode Ratings | Deepali Kank | Observable"}] 32:T1f1e,chart = { // Process the data to get average ratings per season const seasonAverages = d3.rollup( data, (v) => ({ avgRating: d3.mean(v, (d) => d.rating), episodes: v.sort((a, b) => a.episode - b.episode) }), (d) => d.season ); const seasonAveragesArray = Array.from(seasonAverages, ([season, data]) => ({ season, ...data })).sort((a, b) => a.season - b.season); // Set up dimensions const width = 1000; const height = 800; const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const innerRadius = 120; const outerRadius = Math.min(width, height) / 2 - margin.top; // Create scales const x = d3 .scaleBand() .domain(seasonAveragesArray.map((d) => d.season)) .range([0, 2 * Math.PI]) .padding(0.1); const y = d3 .scaleRadial() .domain([0, d3.max(seasonAveragesArray, (d) => d.avgRating)]) .nice() .range([innerRadius, outerRadius]); // Create the SVG const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: Outfit;"); // Create gradient background const defs = svg.append("defs"); const gradient = defs .append("linearGradient") .attr("id", "background-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "100%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", "#F0F4F8"); gradient.append("stop").attr("offset", "100%").attr("stop-color", "#F0F4F8"); svg .append("rect") .attr("width", width) .attr("height", height) .attr("x", -width / 2) .attr("y", -height / 2) .attr("fill", "url(#background-gradient)"); seasonAveragesArray.forEach((season) => { const pattern = defs .append("pattern") .attr("id", `season-${season.season}-pattern`) .attr("patternUnits", "userSpaceOnUse") .attr("width", "30%") .attr("height", "30%"); const numRows = Math.ceil(Math.sqrt(season.episodes.length)); const numCols = Math.ceil(season.episodes.length / numRows); const imageWidth = 40 / numCols; const imageHeight = 40 / numRows; pattern .selectAll("image") .data(season.episodes) .join("image") .attr("x", (d, i) => (i % numCols) * imageWidth + "%") .attr("y", (d, i) => Math.floor(i / numCols) * imageHeight + "%") .attr("width", imageWidth + "%") .attr("height", imageHeight + "%") .attr("preserveAspectRatio", "xMidYMid slice") .attr("xlink:href", (d) => d.image_link); }); // Add bars with image patterns svg .append("g") .selectAll("path") .data(seasonAveragesArray) .join("path") .attr("fill", (d) => `url(#season-${d.season}-pattern)`) .attr( "d", d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => y(d.avgRating)) .startAngle((d) => x(d.season)) .endAngle((d) => x(d.season) + x.bandwidth()) .padAngle(0.01) .padRadius(innerRadius) ); // Add radial axis const yAxis = svg.append("g").attr("text-anchor", "middle"); const yTick = yAxis.selectAll("g").data(y.ticks(5)).join("g"); yTick.append("circle").attr("fill", "none").attr("r", y); yTick .append("text") .attr("y", (d) => -y(d)) .attr("dy", "0.35em") .text(y.tickFormat(5, "s")) .style("font-size", "12px") .style("font-weight", "bold") .style("fill", "#4A5568"); // Add title to the center svg .append("text") .attr("text-anchor", "middle") .style("font-family", "Playfair Display") .style("font-size", "50px") .attr("dy", "-0.9em") .append("tspan") .style("fill", "black") .text("Modern") .attr("x", 0) .attr("dy", "-0.5em") .append("tspan") .style("fill", "#ce412d") .text("Family") .attr("x", 0) .attr("dy", "1.2em"); // Add title to the center svg .append("text") .attr("text-anchor", "middle") .style("font-family", "Outfit") .style("font-size", "12px") .attr("dy", "32em") .append("tspan") .style("fill", "black") .text( "Data Source: https://www.kaggle.com/datasets/rprkh15/modern-family-dataset" ) .append("tspan") .attr("x", 0) .attr("dy", "1.2em") .text("Graphic: Deepali Kank"); // Create tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background-color", "rgba(255, 255, 255, 0.95)") .style("border", "1px solid #E2E8F0") .style("border-radius", "8px") .style("box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)") .style("padding", "12px") .style("font-family", "Outfit") .style("font-size", "14px") .style("pointer-events", "none") .style("transition", "opacity 0.3s ease"); // Function to create the mini area chart in the tooltip function createMiniAreaChart(season) { const seasonData = data .filter((d) => d.season === season) .sort((a, b) => a.episode - b.episode); const tipWidth = 200; const tipHeight = 120; const tipMargin = { top: 10, right: 10, bottom: 20, left: 30 }; const x_tip = d3 .scaleLinear() .domain([1, d3.max(seasonData, (d) => d.episode)]) .range([tipMargin.left, tipWidth - tipMargin.right]); const y_tip = d3 .scaleLinear() .domain([0, 10]) .range([tipHeight - tipMargin.bottom, tipMargin.top]); const area_tip = d3 .area() .x((d) => x_tip(d.episode)) .y0(y_tip(0)) .y1((d) => y_tip(d.rating)) .curve(d3.curveCatmullRom); const tipSVG = d3 .create("svg") .attr("width", tipWidth) .attr("height", tipHeight); // Create gradient for area chart const areaGradient = tipSVG .append("defs") .append("linearGradient") .attr("id", "area-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); areaGradient .append("stop") .attr("offset", "0%") .attr("stop-color", "#f2b19d"); areaGradient .append("stop") .attr("offset", "100%") .attr("stop-color", "#e77450"); tipSVG .append("path") .datum(seasonData) .attr("fill", "url(#area-gradient)") .attr("stroke", "#d94310") .attr("stroke-width", 1.5) .attr("d", area_tip); // Add axes tipSVG .append("g") .attr("transform", `translate(0,${tipHeight - tipMargin.bottom})`) .call(d3.axisBottom(x_tip).ticks(5).tickFormat(d3.format("d"))) .style("font-family", "Outfit") .style("font-size", "10px") .style("color", "#4A5568"); tipSVG .append("g") .attr("transform", `translate(${tipMargin.left},0)`) .call(d3.axisLeft(y_tip).ticks(3)) .style("font-family", "Outfit") .style("font-size", "10px") .style("color", "#4A5568"); return tipSVG.node().outerHTML; } // Add interactivity svg .selectAll("path") .on("mouseover", function (event, d) { d3.select(this).transition().duration(300).attr("opacity", 0.8); tooltip.transition().duration(300).style("opacity", 1); tooltip .html( `Season ${d.season}
Average Rating: ${d.avgRating.toFixed( 2 )}
Number of Episodes: ${ d.episodes.length }
${createMiniAreaChart(d.season)}` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 10 + "px"); }) .on("mouseout", function () { d3.select(this).transition().duration(300).attr("opacity", 1); tooltip.transition().duration(300).style("opacity", 0); }); return svg.node(); }33:[{"id":"90d540300dc796e3becf330b44c17382c4da6627f0953a62c77a13f90fd0cc8cc0cf906943cb86931ca4a44305b335d9321b7aecc5598acaaf9d23c6f6543fb3","href":"https://static.observableusercontent.com/files/90d540300dc796e3becf330b44c17382c4da6627f0953a62c77a13f90fd0cc8cc0cf906943cb86931ca4a44305b335d9321b7aecc5598acaaf9d23c6f6543fb3","name":"df.csv","type":"text/csv","lastModified":1720495416797.825,"size":98055}] 30:{"id":"ddf24060f1acb0d1","slug":null,"title":"Modern Family Episode Ratings","thumbnail":"1292cd288e9032e12488d4dbce4769a82c9450e29a0e2f24eeb0a24307c18589","access_level":"public","create_time":"$D2024-07-09T03:16:07.156Z","update_time":"$D2026-07-14T06:17:43.157Z","view_time":null,"first_public_time":"$D2024-07-10T09:13:55.549Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Modern Family Episode Ratings","cells":[{"id":0,"value":"\n\n\n\n\nModern Family Episode Ratings: A Seasonal Journey\n\n\n\n

Modern Family Episode Ratings

Modern Family is an American sitcom television series created by Christopher Lloyd and Steven Levitan for ABC. It aired for eleven seasons and 250 episodes, from September 23, 2009 to April 8, 2020. The series follows the lives of three diverse family set-ups living in suburban Los Angeles, who are interrelated through their patriarch, Jay Pritchett.

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = await FileAttachment(\"df.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":102,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 31:"$30:body"