3f:null 40:["$","title",null,{"children":"Movies Dataset Exploration | javascript1 | Observable"}] 46:T1162,chart3 = { // Specify the chart’s dimensions. const width = 928; const height = width; const padding = 28; const selectedGenres = [ 'Comedy', 'Action', 'Drama' ]; // 过滤出这些 genre 的数据 const scamtrdata = movies.filter(d => selectedGenres.includes(d.genre)); const columns = ['year', 'grosslog', 'numtheaters', 'score', 'profitlog'] const size = (width - (columns.length + 1) * padding) / columns.length + padding; // Define the horizontal scales (one for each row). const x = columns.map(c => d3.scaleLinear() .domain(d3.extent(scamtrdata, d => d[c])) .rangeRound([padding / 2, size - padding / 2])) // Define the companion vertical scales (one for each column). const y = x.map(x => x.copy().range([size - padding / 2, padding / 2])); // Define the horizontal axis (it will be applied separately for each column). const axisx = d3.axisBottom() .ticks(6) .tickSize(size * columns.length); const xAxis = g => g.selectAll("g").data(x).join("g") .attr("transform", (d, i) => `translate(${i * size},0)`) .each(function(d) { return d3.select(this).call(axisx.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const color = d3.scaleOrdinal() .domain(selectedGenres) .range(d3.schemeCategory10); // Define the vertical axis (it will be applied separately for each row). const axisy = d3.axisLeft() .ticks(6) .tickSize(-size * columns.length); const yAxis = g => g.selectAll("g").data(y).join("g") .attr("transform", (d, i) => `translate(0,${i * size})`) .each(function(d) { return d3.select(this).call(axisy.scale(d)); }) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")); const svg = d3.create("svg") .attr("width", width) .attr("height", height + 30) .attr("viewBox", [-padding, -30, width, height + 30]); svg.append("style") .text(`circle.hidden { fill: #000; fill-opacity: 1; r: 1px; }`); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const cell = svg.append("g") .selectAll("g") .data(d3.cross(d3.range(columns.length), d3.range(columns.length))) .join("g") .attr("transform", ([i, j]) => `translate(${i * size},${j * size})`); cell.append("rect") .attr("fill", "none") .attr("stroke", "#aaa") .attr("x", padding / 2 + 0.5) .attr("y", padding / 2 + 0.5) .attr("width", size - padding) .attr("height", size - padding); cell.each(function([i, j]) { d3.select(this).selectAll("circle") .data(scamtrdata.filter(d => !isNaN(d[columns[i]]) && !isNaN(d[columns[j]]))) .join("circle") .attr("cx", d => x[i](d[columns[i]])) .attr("cy", d => y[j](d[columns[j]])) .attr("fill", d => { // Debugging to ensure genre is correctly assigned console.log('Genre:', d.genre, 'Color:', color(d.genre)); return color(d.genre); // Ensure colors match });; }); const circle = cell.selectAll("circle") .attr("r", 3.5) .attr("fill-opacity", 0.7) .attr("fill", d => color(d.genre)); // Ignore this line if you don't need the brushing behavior. cell.call(brush, circle, svg, {padding, size, x, y, columns}); svg.append("g") .style("font", "bold 10px sans-serif") .style("pointer-events", "none") .selectAll("text") .data(columns) .join("text") .attr("transform", (d, i) => `translate(${i * size},${i * size})`) .attr("x", padding) .attr("y", padding) .attr("dy", ".71em") .text(d => d); svg.property("value", []) // Add legend at the top left corner const legend = svg.append('g') .attr('transform', `translate(10, -30)`); // 调整到左上角，可以根据需要调整这个位置 const legendItem = legend.selectAll('g') .data(selectedGenres) .join('g') .attr('transform', (d, i) => `translate(${i * 100}, 0)`); // 每个图例项之间间隔100像素 legendItem.append('rect') .attr('width', 12) .attr('height', 12) .attr('fill', d => color(d)); legendItem.append('text') .attr('x', 16) .attr('y', 10) .text(d => d) .style('font', '12px sans-serif'); return Object.assign(svg.node(), {scales: {color}}); }47:T528,function brush(cell, circle, svg, {padding, size, x, y, columns}) { const brush = d3.brush() .extent([[padding / 2, padding / 2], [size - padding / 2, size - padding / 2]]) .on("start", brushstarted) .on("brush", brushed) .on("end", brushended); cell.call(brush); let brushCell; // Clear the previously-active brush, if any. function brushstarted() { if (brushCell !== this) { d3.select(brushCell).call(brush.move, null); brushCell = this; } } // Highlight the selected circles. function brushed({selection}, [i, j]) { let selected = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; circle.classed("hidden", d => x0 > x[i](d[columns[i]]) || x1 < x[i](d[columns[i]]) || y0 > y[j](d[columns[j]]) || y1 < y[j](d[columns[j]])); selected = filteredData.filter( d => x0 < x[i](d[columns[i]]) && x1 > x[i](d[columns[i]]) && y0 < y[j](d[columns[j]]) && y1 > y[j](d[columns[j]])); } svg.property("value", selected).dispatch("input"); } // If the brush is empty, select all circles. function brushended({selection}) { if (selection) return; svg.property("value", []).dispatch("input"); circle.classed("hidden", false); } }48:Tca4,viewof barchart1 = { const studioProfit = Array.from( d3.rollup( movies.filter(d => d.studio && !isNaN(d.profit)), // 过滤无效数据 v => d3.sum(v, d => d.profit), // 计算总利润 d => d.studio // 按studio分组 ), ([studio, profit]) => ({ studio, profit, log_profit: Math.log10(profit) }) // 转换为对象数组 ).sort((a, b) => b.profit - a.profit); // 按利润降序排序 // 定义尺寸参数 const width = 800; const height = 700; const margin = { top: 40, right: 20, bottom: 120, left: 60 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // 创建SVG容器 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#f8f9fa"); // 定义比例尺 const x = d3.scaleBand() .domain(studioProfit.map(d => d.studio)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(studioProfit, d => d.log_profit) ]) .nice() .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(studioProfit.map(d => d.studio)) .range(d3.schemeTableau10); // 使用Tableau配色方案 // 绘制条形 svg.selectAll("rect") .data(studioProfit) .join("rect") .attr("x", d => x(d.studio)) .attr("y", d => y(d.log_profit)) .attr("width", x.bandwidth()) .attr("height", d => innerHeight - y(d.log_profit) + 37) .attr("fill", d => color(d.studio)) .attr("rx", 3) // 圆角 .transition() // 添加加载动画 .duration(800) .ease(d3.easeCubicOut) // 添加X轴 svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-0.8em") .attr("dy", "0.15em") .attr("transform", "rotate(-45)"); // 旋转标签 svg.append("text") .attr("transform", `translate(${width / 2},${height - margin.bottom + 110})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Movie Studios"); // 添加Y轴 svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, "~s")) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", -45) .attr("x", -innerHeight/2) .style("text-anchor", "middle") .text("Log(Total Profit) ($)"); // 添加标题 svg.append("text") .attr("x", width/2) .attr("y", 30) .style("text-anchor", "middle") .style("font-size", "18px") .text("Profit by Movie Studio"); // 添加数值标签（可选） svg.selectAll(".bar-label") .data(studioProfit) .join("text") .attr("class", "bar-label") .text(d => d3.format("(.2s")(d.log_profit)) // 格式化为$1.2M .attr("x", d => x(d.studio) + x.bandwidth()/2) .attr("y", d => y(d.log_profit) - 5) .style("text-anchor", "middle") .style("font-size", "10px") .style("fill", "#333"); return svg.node(); }49:Tc85,viewof barchart2 = { const genreGross = Array.from( d3.rollup( movies.filter(d => d.genre && !isNaN(d.gross)), // 过滤无效数据 v => d3.sum(v, d => d.gross), // 计算总利润 d => d.genre // 按genre分组 ), ([genre, gross]) => ({ genre, gross, log_gross: Math.log10(gross) }) // 转换为对象数组 ).sort((a, b) => b.gross - a.gross); // 按利润降序排序 // 定义尺寸参数 const width = 800; const height = 700; const margin = { top: 40, right: 20, bottom: 120, left: 60 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // 创建SVG容器 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#f8f9fa"); // 定义比例尺 const x = d3.scaleBand() .domain(genreGross.map(d => d.genre)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(genreGross, d => d.log_gross) ]) .nice() .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(genreGross.map(d => d.genre)) .range(d3.schemeTableau10); // 使用Tableau配色方案 // 绘制条形 svg.selectAll("rect") .data(genreGross) .join("rect") .attr("x", d => x(d.genre)) .attr("y", d => y(d.log_gross)) .attr("width", x.bandwidth()) .attr("height", d => innerHeight - y(d.log_gross) + 37) .attr("fill", d => color(d.genre)) .attr("rx", 3) // 圆角 .transition() // 添加加载动画 .duration(800) .ease(d3.easeCubicOut) // 添加X轴 svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-0.8em") .attr("dy", "0.15em") .attr("transform", "rotate(-45)"); // 旋转标签 svg.append("text") .attr("transform", `translate(${width / 2},${height - margin.bottom + 80})`) .style("text-anchor", "middle") .style("font-size", "14px") .text("Genres"); // 添加Y轴 svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, "~s")) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", -45) .attr("x", -innerHeight/2) .style("text-anchor", "middle") .text("Log(Total Worldwide Gross) (M$)"); // 添加标题 svg.append("text") .attr("x", width/2) .attr("y", 30) .style("text-anchor", "middle") .style("font-size", "18px") .text("Worldwide Gross by Genre"); // 添加数值标签（可选） svg.selectAll(".bar-label") .data(genreGross) .join("text") .attr("class", "bar-label") .text(d => d3.format("(.2s")(d.log_gross)) // 格式化为$1.2M .attr("x", d => x(d.genre) + x.bandwidth()/2) .attr("y", d => y(d.log_gross) - 5) .style("text-anchor", "middle") .style("font-size", "10px") .style("fill", "#333"); return svg.node(); }4a:T1454,viewof BubbleChart1 = { // 定义可视化参数 const width = 800; const height = 600; const center = { x: width / 2, y: height / 2 }; // 定义比例尺 const color = d3.scaleOrdinal() .domain(selectedGenres2) .range(d3.schemeCategory10.concat(d3.schemeSet3)); const radius = d3.scaleSqrt() .domain(d3.extent(topMovies, d => d.profitlog)) .range([5, 60]); // 气泡大小范围 // 创建 SVG 容器 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#f8f9fa"); // 力导向布局定义 const simulation = d3.forceSimulation(topMovies) .force("charge", d3.forceManyBody().strength(12)) // 节点间排斥力 .force("center", d3.forceCenter(center.x, center.y)) // 向中心聚集的力 .force("collision", d3.forceCollide().radius(d => radius(d.profitlog) + 2)) // 碰撞检测 .on("tick", updateChart); // 绘制气泡 const nodes = svg.selectAll("circle") .data(topMovies) .join("circle") .attr("r", d => radius(d.profitlog)) .attr("fill", d => color(d.genre)) .attr("stroke", "#333") .attr("stroke-width", 1) .attr("opacity", 0.8) .call(drag(simulation)); // 允许拖拽交互 // 添加标签（可选） const labels = svg.selectAll("text") .data(topMovies) .join("text") .text(d => d.film) .style("font-size", "10px") .style("pointer-events", "none") .style("visibility", "hidden"); // 默认隐藏标签 // 力导向布局更新函数 function updateChart() { nodes .attr("cx", d => d.x) .attr("cy", d => d.y); labels .attr("x", d => d.x) .attr("y", d => d.y + 5); } // 拖拽交互函数 function drag(simulation) { function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } // 添加交互提示（鼠标悬停显示标签） nodes .on("mouseover", function(event, d) { tooltip .style("visibility", "visible") .html(`${d.film}
Year: ${d.year}
Genre: ${d.genre}
Gross: $${d3.format(",")(d.gross)}M
Score: ${d.score}
Profit: ${d.profit}%`); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); // Add legend at the top right side const legend = svg.append("g") .attr("class", "legend-group") .attr("transform", `translate(${width - 120}, 0)`); // 右侧定位 /* 颜色图例 - 电影类型 */ const colorLegend = legend.append("g") .attr("class", "color-legend"); colorLegend.selectAll("rect") .data(selectedGenres2) // 获取所有电影类型 .join("rect") .attr("x", 0) .attr("y", (d, i) => 30+ i * 25) // 纵向排列 .attr("width", 18) .attr("height", 18) .attr("fill", color) .html(``); colorLegend.selectAll("text") .data(color.domain()) .join("text") .attr("x", 24) .attr("y", (d, i) => i * 25 + 42) .text(d => d) .style("font-size", "12px") .style("alignment-baseline", "middle"); /* 大小图例 - gross value */ const sizeValues = [ d3.min(topMovies, d => d.profitlog), d3.median(topMovies, d => d.profitlog), d3.max(topMovies, d => d.profitlog) ]; const sizeLegend = legend.append("g") .attr("class", "size-legend") .attr("transform", "translate(0, 350)"); // 下移避免重叠 sizeLegend.selectAll("circle") .data(sizeValues) .join("circle") .attr("cx", 30) .attr("cy", (d, i) => 80+i * 40) .attr("r", d => radius(d)) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 1); sizeLegend.selectAll("text") .data(sizeValues) .join("text") .attr("x", 60) .attr("y", (d, i) => i * 40 + 84) .text(d => d3.format(",.0f")(d)) .style("font-size", "12px") .style("alignment-baseline", "middle"); // 添加图例标题 legend.append("text") .attr("x", 0) .attr("y", 20) .text("Genre") .style("font-weight", "bold") .style("font-size", "14px"); legend.append("text") .attr("x", 0) .attr("y", 410) .text("Profit_log") .style("font-weight", "bold") .style("font-size", "14px"); // 点击颜色图例过滤类型 colorLegend.selectAll("rect") .on("click", function(event, genre) { const isActive = d3.select(this).classed("active"); d3.select(this).classed("active", !isActive); nodes.style("opacity", d => !isActive && d.genre !== genre ? 0.2 : 1 ); }); // 输出图表 return svg.node(); }4b:T144d,viewof BubbleChart2 = { // 定义可视化参数 const width = 928; const height = 700; const center = { x: width / 2, y: height / 2 }; // 定义比例尺 const color = d3.scaleOrdinal() .domain(selectedGenres1) .range(d3.schemeCategory10.concat(d3.schemeSet3)); const radius = d3.scaleSqrt() .domain(d3.extent(topMovies1, d => d.grosslog)) .range([5, 40]); // 气泡大小范围 // 创建 SVG 容器 const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#f8f9fa"); // 力导向布局定义 const simulation = d3.forceSimulation(topMovies1) .force("charge", d3.forceManyBody().strength(10)) // 节点间排斥力 .force("center", d3.forceCenter(center.x, center.y)) // 向中心聚集的力 .force("collision", d3.forceCollide().radius(d => radius(d.grosslog) + 2)) // 碰撞检测 .on("tick", updateChart); // 绘制气泡 const nodes = svg.selectAll("circle") .data(topMovies1) .join("circle") .attr("r", d => radius(d.grosslog)) .attr("fill", d => color(d.genre)) .attr("stroke", "#333") .attr("stroke-width", 1) .attr("opacity", 0.8) .call(drag(simulation)); // 允许拖拽交互 // 添加标签（可选） const labels = svg.selectAll("text") .data(topMovies1) .join("text") .text(d => d.film) .style("font-size", "10px") .style("pointer-events", "none") .style("visibility", "hidden"); // 默认隐藏标签 // 力导向布局更新函数 function updateChart() { nodes .attr("cx", d => d.x) .attr("cy", d => d.y); labels .attr("x", d => d.x) .attr("y", d => d.y + 5); } // 拖拽交互函数 function drag(simulation) { function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } // 添加交互提示（鼠标悬停显示标签） nodes .on("mouseover", function(event, d) { tooltip .style("visibility", "visible") .html(`${d.film}
Year: ${d.year}
Genre: ${d.genre}
Gross: $${d3.format(",")(d.gross)}M
Score: ${d.score}
Profit: ${d.profit}%`); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); // Add legend at the top right side const legend = svg.append("g") .attr("class", "legend-group") .attr("transform", `translate(${width - 120}, 0)`); // 右侧定位 /* 颜色图例 - 电影类型 */ const colorLegend = legend.append("g") .attr("class", "color-legend"); colorLegend.selectAll("rect") .data(selectedGenres1) // 获取所有电影类型 .join("rect") .attr("x", 0) .attr("y", (d, i) => 50+ i * 25) // 纵向排列 .attr("width", 18) .attr("height", 18) .attr("fill", color) .html(``); colorLegend.selectAll("text") .data(color.domain()) .join("text") .attr("x", 24) .attr("y", (d, i) => i * 25 + 62) .text(d => d) .style("font-size", "12px") .style("alignment-baseline", "middle"); /* 大小图例 - gross value */ const sizeValues = [ d3.min(topMovies1, d => d.grosslog), d3.median(topMovies1, d => d.grosslog), d3.max(topMovies1, d => d.grosslog) ]; const sizeLegend = legend.append("g") .attr("class", "size-legend") .attr("transform", "translate(0, 500)"); // 下移避免重叠 sizeLegend.selectAll("circle") .data(sizeValues) .join("circle") .attr("cx", 30) .attr("cy", (d, i) => i * 60) .attr("r", d => radius(d)) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 1); sizeLegend.selectAll("text") .data(sizeValues) .join("text") .attr("x", 60) .attr("y", (d, i) => i * 60 + 4) .text(d => d3.format(",.0f")(d)) .style("font-size", "12px") .style("alignment-baseline", "middle"); // 添加图例标题 legend.append("text") .attr("x", 0) .attr("y", 40) .text("Genre") .style("font-weight", "bold") .style("font-size", "14px"); legend.append("text") .attr("x", 0) .attr("y", 470) .text("Gross_log") .style("font-weight", "bold") .style("font-size", "14px"); // 点击颜色图例过滤类型 colorLegend.selectAll("rect") .on("click", function(event, genre) { const isActive = d3.select(this).classed("active"); d3.select(this).classed("active", !isActive); nodes.style("opacity", d => !isActive && d.genre !== genre ? 0.2 : 1 ); }); // 输出图表 return svg.node(); }4c:Tc96,viewof chart = { const width = 800; const height = 1000; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const margin = { top: 60, right: 40, bottom: 60, left: 100 }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const years = [...new Set(movies.map(d => d.year))].sort(); const genres = [...new Set(movies.map(d => d.genre))].sort(); const xScale = d3.scalePoint() .domain(years) .range([0, innerWidth]) .padding(1); const yScale = d3.scalePoint() .domain(genres) .range([innerHeight, 0]) .padding(1); const radiusScale = d3.scaleSqrt() .domain(d3.extent(movies, d => d.gross)) .range([3, 20]); const colorScale = d3.scaleLinear() .domain([d3.min(movies, d => d.score), (d3.min(movies, d => d.score) + d3.max(movies, d => d.score)) / 2, d3.max(movies, d => d.score)]) .range(["red", "white", "green"]); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Draw axes g.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); g.append("g") .call(d3.axisLeft(yScale)); // Group by year + genre const nested = d3.group(movies, d => d.year, d => d.genre); for (const [year, genreMap] of nested) { for (const [genre, items] of genreMap) { const x = xScale(+year); const y = yScale(genre); const spacing = 15; const totalWidth = (items.length - 1) * spacing; items.forEach((d, i) => { const offsetX = i * spacing - totalWidth / 2; g.append("circle") .attr("cx", x + offsetX) .attr("cy", y) .attr("r", radiusScale(d.gross)) .attr("fill", colorScale(d.score)) .attr("opacity", 0.8) .append("title") .text(`${d.film}\nYear: ${d.year}\nGenre: ${d.genre}\nGross: ${d.gross}\nScore: ${d.score}`); }); } } // Color legend const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "scoreGradient") .attr("x1", "0%") .attr("x2", "100%") .attr("y1", "0%") .attr("y2", "0%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", "red"); gradient.append("stop").attr("offset", "50%").attr("stop-color", "white"); gradient.append("stop").attr("offset", "100%").attr("stop-color", "green"); const legendWidth = 200; const legendHeight = 10; svg.append("rect") .attr("x", width / 2 - legendWidth / 2) .attr("y", 40) .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#scoreGradient)"); const legendScale = d3.scaleLinear() .domain(d3.extent(movies, d => d.score)) .range([width / 2 - legendWidth / 2, width / 2 + legendWidth / 2]); const legendAxis = d3.axisBottom(legendScale) .ticks(5); svg.append("g") .attr("transform", `translate(0, ${40 + legendHeight})`) .call(legendAxis); svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .text("Audience Score"); return svg.node(); } 4d:Tb57,viewof bubbleChart = { const width = 800; const height = 1000; const margin = { top: 20, right: 50, bottom: 60, left: 80 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const x = d3.scaleLinear() .domain([ d3.min(filteredData, d => d.year) - 0.5, d3.max(filteredData, d => d.year) + 0.5 ]) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(filteredData, d => d.grosslog)]) .range([height - margin.bottom, margin.top]); const size = d3.scaleSqrt() .domain([0, d3.max(filteredData, d => d.grosslog)]) .range([3, 40]); const color = d3.scaleDiverging() .domain([0, 50, 100]) .interpolator(d3.interpolateRgbBasis(["#ff0000", "#ffffff", "#00ff00"])); svg.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.grosslog)) .attr("r", d => size(d.grosslog)) .attr("fill", d => color(d.score)) .attr("opacity", 0.7) .attr("stroke", "#333") .on("mouseover", function(event, d) { tooltip .style("visibility", "visible") .html(`${d.film}
Year: ${d.year}
Genre: ${d.genre}
Gross: $${d3.format(",")(d.gross)}M
Score: ${d.score}
Profit: ${d.profit}%`); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format("d"))) .append("text") .attr("x", width / 2) .attr("y", 40) .attr("fill", "#000") .style("text-anchor", "middle") .text("Year"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d => `$${d3.format(".2s")(d)}`)) .append("text") .attr("transform", "rotate(-90)") .attr("y", -60) .attr("x", -height / 2) .attr("fill", "#000") .style("text-anchor", "middle") .text("Log(Worldwide Gross)"); const colorLegend = svg.append("g") .attr("transform", `translate(${width - 100}, 20)`); colorLegend.selectAll("rect") .data(d3.range(0, 101, 20)) .join("rect") .attr("x", 0) .attr("y", d => d * 1.5) .attr("width", 20) .attr("height", 20) .attr("fill", d => color(d)); colorLegend.selectAll("text") .data([0, 50, 100]) .join("text") .attr("x", 25) .attr("y", d => d * 1.5 + 10) .text(d => `${d}%`) .style("font-size", "12px"); return svg.node(); }4e:[{"id":"fc3ea475648bba4db6253d66d2c69bb34389767e716996221888dd3eba39dd6809e9ac89804039a779afc085198637973bf96846973b6ebe639f062f46eb7811","href":"https://static.observableusercontent.com/files/fc3ea475648bba4db6253d66d2c69bb34389767e716996221888dd3eba39dd6809e9ac89804039a779afc085198637973bf96846973b6ebe639f062f46eb7811","name":"movies@7.csv","type":"text/csv","lastModified":1744527906415.949,"size":66880}] 44:{"id":"4c650ae660a6e6b0","slug":"movies-dataset-exploration","title":"Movies Dataset Exploration","thumbnail":"3c8151c5966a4da7937949b5f72547ad88e0d779f8c0105635be5aac5edd5d59","access_level":"public","create_time":"$D2025-04-12T12:49:06.566Z","update_time":"$D2025-04-29T08:44:04.417Z","view_time":null,"first_public_time":"$D2025-04-29T08:45:28.521Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6c2e92468087a29d","login":"javascript1","name":"javascript1","avatar_url":"https://avatars-next.observableusercontent.com/d4e99ca930ca454e10d19f3e3b00e8c4ab60145250790ec2ca7415f962dfd9f5","tier":"starter_2024","bio":"","following":false},"version":707,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"001cc51ac49904b4","login":"huang-jiale","name":"#HUANG JIALE#","avatar_url":"https://avatars-next.observableusercontent.com/2fdd7a79640b9435ffe2696c6bb0683a7c82e7f3bd5c21c8e25529adebb8fde1","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"001cc51ac49904b4","login":"huang-jiale","name":"#HUANG JIALE#","avatar_url":"https://avatars-next.observableusercontent.com/2fdd7a79640b9435ffe2696c6bb0683a7c82e7f3bd5c21c8e25529adebb8fde1","tier":null,"role":"editor"},{"type":"team","id":"6c2e92468087a29d","login":"javascript1","name":"javascript1","avatar_url":"https://avatars-next.observableusercontent.com/d4e99ca930ca454e10d19f3e3b00e8c4ab60145250790ec2ca7415f962dfd9f5","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Movies Dataset Exploration","cells":[{"id":704,"value":"# Movies Dataset Exploration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"Movies = {\n const rawData = await FileAttachment(\"movies@7.csv\").csv({ typed: true });\n\n return rawData.map(d => ({\n film: d.film,\n year: +d.year,\n studio: d.studio,\n score: +d.score,\n genre: (d.genre || '').trim(), \n gross: +d.gross,\n numtheaters: +d.numtheaters,\n profit: +d.profit,\n grosslog: +d.gross_log,\n profitlog: +d.profit_log\n\n\n }));\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"moviescopy = movies","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"uniqueGenres = {\n const genres = [...new Set(movies.map(d => d.genre))]\n .filter(d => d != null && d.trim() !== \"\"); \n return genres.sort(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"genreOptions = [\"All\", ...uniqueGenres]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"filteredData = movies.filter(d => \n +d.year >= 2007 && \n +d.year <= yearRange &&\n (genreSelect === 'All' || d.genre === genreSelect)\n);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"background\", \"white\")\n .style(\"padding\", \"8px\")\n .style(\"border\", \"1px solid #ddd\")\n .style(\"border-radius\", \"4px\")\n .style(\"visibility\", \"hidden\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Movies Dataset Exploration\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"Team members: Huang Jiale, Liu Rui","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"selection = Generators.input(chart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"movies = {\n const rawData = await FileAttachment(\"movies@7.csv\").csv({ typed: true });\n\n return rawData.map(d => ({\n film: d.film,\n year: +d.year,\n studio: d.studio,\n score: +d.score,\n genre: (d.genre || '').trim(), \n gross: +d.gross,\n numtheaters: +d.numtheaters,\n profit: +d.profit,\n grosslog: +d.gross_log,\n profitlog: +d.profit_log\n\n\n }));\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"mostProfitableHollywoodStoriesUs2011 = await FileAttachment(\"movies@7.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"mostProfitableHollywoodStoriesUs2011","database":"$undefined"},{"id":362,"value":"# Brushable Scatterplot Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"// 取前200个高利润率电影\ntopMovies = {\n return Movies\n .sort((a, b) => b.profit - a.profit) // 按利润降序\n .slice(0, 200); // 取前200条\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"selectedGenres2 = {\n return Array.from(\n new Set(\n topMovies\n .map(movie => movie?.genre?.trim())\n .filter(genre => genre)\n )\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"# Bar Chart 1: Profitability by Studio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"# Bar Chart 2: Worldwide Gross by Genre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"# Bubble Chart 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"# Bubble Chart 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"# Bubble Chart 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"# Bubble Chart *\nx-axis: year (time); \n\ny-axis: worldwide gross (Q)\n\ncircle size: worldwide gross (Q); \n\ncircle color: audience score (Q)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"viewof yearRange = Inputs.range(\n [d3.min(movies, d => +d.year), d3.max(movies, d => +d.year)],\n {\n label: 'Year Range',\n step: 1,\n format: d3.format('d'),\n value: [2007, 2011] \n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"// Genre selection\nviewof genreSelect = Inputs.select(genreOptions, {\n label: \"Genre\", \n value: \"All\" \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"// 取前200个高票房电影\ntopMovies1 = {\n return Movies\n .sort((a, b) => b.gross - a.gross) // 按利润降序\n .slice(0, 200); // 取前200条\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"hideTooltip = () => {\n tooltip.style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"\nmoveTooltip = (event) => {\n tooltip\n .style(\"left\", event.pageX + 10 + \"px\")\n .style(\"top\", event.pageY + 10 + \"px\");\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"showTooltip = (event, d) => {\n tooltip\n .html(`\n ${d.film}
\n Year: ${d.year}
\n Profit: ${d.profit}%
\n Genre: ${d.genre}\n `)\n .style(\"visibility\", \"visible\");\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"selectedGenres1 = {\n return Array.from(\n new Set(\n topMovies1\n .map(movie => movie?.genre?.trim())\n .filter(genre => genre)\n )\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 45:"$44:body"