2f:T3545,d3chart2 = { const data = [ { Title: "Avatar", "US Gross": 760167650, "Worldwide Gross": 2767891499 }, { Title: "Titanic", "US Gross": 600788188, "Worldwide Gross": 1842879955 }, { Title: "The Dark Knight", "US Gross": 533345358, "Worldwide Gross": 1022345358 }, { Title: "Star Wars Ep. IV: A New Hope", "US Gross": 460998007, "Worldwide Gross": 797900000 }, { Title: "Shrek 2", "US Gross": 441226247, "Worldwide Gross": 919838758 }, { Title: "ET: The Extra-Terrestrial", "US Gross": 435110554, "Worldwide Gross": 792910554 }, { Title: "Star Wars Ep. I: The Phantom Menace", "US Gross": 431088297, "Worldwide Gross": 924288297 }, { Title: "Pirates of the Caribbean: Dead Man's Chest", "US Gross": 423315812, "Worldwide Gross": 1065659812 }, { Title: "Toy Story 3", "US Gross": 410640665, "Worldwide Gross": 1046340665 }, { Title: "Spider-Man", "US Gross": 403706375, "Worldwide Gross": 821708551 } ]; const margin = { top: 80, right: 100, bottom: 280, left: 80 }; const chartWidth = 900; const chartHeight = 600; let currentSort = 'US'; let stackedView = false; let currentData = [...data].sort((a, b) => b["US Gross"] - a["US Gross"]); let selectedMovie = null; const formatValue = (d) => { if (d >= 1e9) return `$${(d / 1e9).toFixed(1)}B`; return `$${(d / 1e6).toFixed(0)}M`; }; const formatPercent = (part, total) => { return `${((part / total) * 100).toFixed(1)}%`; }; // Create container with controls const container = document.createElement('div'); container.style.cssText = 'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1000px; margin: 0 auto;'; // Create controls const controls = document.createElement('div'); controls.style.cssText = 'margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center;'; const buttonStyle = 'padding: 8px 16px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.2s;'; const activeStyle = 'padding: 8px 16px; border: 1px solid #4a90e2; background: #4a90e2; color: white; border-radius: 4px; cursor: pointer; font-size: 13px;'; const sortUSBtn = document.createElement('button'); sortUSBtn.textContent = 'Sort by US Gross'; sortUSBtn.style.cssText = activeStyle; sortUSBtn.id = 'sortUS'; const sortWorldwideBtn = document.createElement('button'); sortWorldwideBtn.textContent = 'Sort by Worldwide Gross'; sortWorldwideBtn.style.cssText = buttonStyle; sortWorldwideBtn.id = 'sortWorldwide'; const sortTitleBtn = document.createElement('button'); sortTitleBtn.textContent = 'Sort by Title'; sortTitleBtn.style.cssText = buttonStyle; sortTitleBtn.id = 'sortTitle'; const toggleViewBtn = document.createElement('button'); toggleViewBtn.textContent = 'Show Worldwide Only'; toggleViewBtn.style.cssText = buttonStyle; toggleViewBtn.id = 'toggleView'; controls.appendChild(sortUSBtn); controls.appendChild(sortWorldwideBtn); controls.appendChild(sortTitleBtn); controls.appendChild(toggleViewBtn); // Create tooltip const tooltip = d3.select('body').append('div') .style('position', 'absolute') .style('background', 'white') .style('border', '1px solid #ddd') .style('border-radius', '4px') .style('padding', '12px') .style('pointer-events', 'none') .style('opacity', 0) .style('font-size', '13px') .style('box-shadow', '0 4px 8px rgba(0,0,0,0.15)') .style('max-width', '250px'); // Create SVG const svg = d3.create('svg') .attr('viewBox', [0, 0, chartWidth, chartHeight]) .attr('width', chartWidth) .attr('height', chartHeight) .attr('style', 'max-width: 100%; height: auto;'); // Create scales const x = d3.scaleBand() .range([margin.left, chartWidth - margin.right]) .padding(0.3); const y = d3.scaleLinear() .range([chartHeight - margin.bottom, margin.top]); // Create axes groups const xAxisGroup = svg.append('g') .attr('transform', `translate(0,${chartHeight - margin.bottom})`); const yAxisGroup = svg.append('g') .attr('transform', `translate(${margin.left},0)`); // Grid lines const grid = svg.append('g') .attr('class', 'grid') .attr('transform', `translate(${margin.left},0)`); // Bar groups const worldwideGroup = svg.append('g'); const usGroup = svg.append('g'); // Labels const title = svg.append('text') .attr('x', chartWidth / 2) .attr('y', 30) .attr('text-anchor', 'middle') .style('font-size', '18px') .style('font-weight', 'bold'); const subtitle = svg.append('text') .attr('x', chartWidth / 2) .attr('y', 50) .attr('text-anchor', 'middle') .style('font-size', '14px') .style('fill', '#666'); svg.append('text') .attr('x', chartWidth / 2) .attr('y', chartHeight - 20) .attr('text-anchor', 'middle') .style('font-size', '14px') .text('Movie Title'); svg.append('text') .attr('transform', 'rotate(-90)') .attr('x', -chartHeight / 2) .attr('y', 20) .attr('text-anchor', 'middle') .style('font-size', '14px') .text('Gross Revenue'); svg.append('text') .attr('x', chartWidth / 2) .attr('y', chartHeight - 5) .attr('text-anchor', 'middle') .style('font-size', '11px') .style('fill', '#666') .text('Bar chart showing the top 10 movies by US gross revenue with their worldwide gross comparison. Data from Vega. Visualization by: Terence Chen'); // Legend const legend = svg.append('g') .attr('transform', `translate(${chartWidth - 180}, 30)`); legend.append('rect') .attr('width', 15) .attr('height', 15) .attr('fill', 'orange'); legend.append('text') .attr('x', 20) .attr('y', 12) .style('font-size', '12px') .text('Worldwide Gross'); legend.append('rect') .attr('y', 20) .attr('width', 15) .attr('height', 15) .attr('fill', 'steelblue'); legend.append('text') .attr('x', 20) .attr('y', 32) .style('font-size', '12px') .text('US Gross'); function updateChart(animate = true) { const duration = animate ? 750 : 0; // Update scales x.domain(currentData.map(d => d.Title)); y.domain([0, d3.max(currentData, d => d["Worldwide Gross"])]).nice(); // Update grid grid.transition().duration(duration) .call(d3.axisLeft(y) .tickSize(-chartWidth + margin.left + margin.right) .tickFormat('') ); grid.selectAll('line') .style('stroke', '#e0e0e0') .style('stroke-opacity', 0.7); grid.select('.domain').remove(); // Update axes xAxisGroup.transition().duration(duration) .call(d3.axisBottom(x).tickSizeOuter(0)); xAxisGroup.selectAll('text') .attr('transform', 'rotate(-60)') .style('text-anchor', 'end') .style('font-size', '11px'); yAxisGroup.transition().duration(duration) .call(d3.axisLeft(y).tickFormat(formatValue)); // Update bars if (stackedView) { // Stacked view - show only worldwide bars const worldwideBars = worldwideGroup .selectAll('rect') .data(currentData, d => d.Title); worldwideBars.exit() .transition().duration(duration) .attr('height', 0) .attr('y', y(0)) .remove(); worldwideBars.enter() .append('rect') .attr('fill', 'orange') .attr('x', d => x(d.Title)) .attr('y', y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .style('cursor', 'pointer') .style('transition', 'opacity 0.2s') .on('click', handleBarClick) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut) .merge(worldwideBars) .transition().duration(duration) .attr('x', d => x(d.Title)) .attr('y', d => y(d["Worldwide Gross"])) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d["Worldwide Gross"])); // Hide US bars usGroup.selectAll('rect') .transition().duration(duration) .attr('height', 0) .attr('y', y(0)) .remove(); } else { // Overlapping view const worldwideBars = worldwideGroup .selectAll('rect') .data(currentData, d => d.Title); worldwideBars.exit() .transition().duration(duration) .attr('height', 0) .attr('y', y(0)) .remove(); worldwideBars.enter() .append('rect') .attr('fill', 'orange') .attr('x', d => x(d.Title)) .attr('y', y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .style('cursor', 'pointer') .style('transition', 'opacity 0.2s') .on('click', handleBarClick) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut) .merge(worldwideBars) .transition().duration(duration) .attr('x', d => x(d.Title)) .attr('y', d => y(d["Worldwide Gross"])) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d["Worldwide Gross"])); const usBars = usGroup .selectAll('rect') .data(currentData, d => d.Title); usBars.exit() .transition().duration(duration) .attr('height', 0) .attr('y', y(0)) .remove(); usBars.enter() .append('rect') .attr('fill', 'steelblue') .attr('x', d => x(d.Title)) .attr('y', y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .style('cursor', 'pointer') .style('transition', 'opacity 0.2s') .on('click', handleBarClick) .on('mouseover', handleMouseOver) .on('mousemove', handleMouseMove) .on('mouseout', handleMouseOut) .merge(usBars) .transition().duration(duration) .attr('x', d => x(d.Title)) .attr('y', d => y(d["US Gross"])) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d["US Gross"])); } // Update title const sortText = currentSort === 'US' ? 'US Gross' : currentSort === 'Worldwide' ? 'Worldwide Gross' : 'Title'; title.text(`Top 10 Movies by ${sortText}`); subtitle.text(stackedView ? 'Worldwide Gross Revenue' : 'US Gross vs Worldwide Gross Comparison'); } function handleBarClick(event, d) { selectedMovie = selectedMovie === d.Title ? null : d.Title; svg.selectAll('rect') .style('stroke', e => e.Title === selectedMovie ? '#333' : 'none') .style('stroke-width', e => e.Title === selectedMovie ? '2' : '0') .style('opacity', e => { if (!selectedMovie) return 1; return e.Title === selectedMovie ? 1 : 0.3; }); } function handleMouseOver(event, d) { if (!selectedMovie || selectedMovie === d.Title) { d3.select(event.currentTarget).style('opacity', 0.8); } } function handleMouseMove(event, d) { const international = d["Worldwide Gross"] - d["US Gross"]; const usPercent = formatPercent(d["US Gross"], d["Worldwide Gross"]); const intPercent = formatPercent(international, d["Worldwide Gross"]); tooltip.style('opacity', 1) .html(` ${d.Title}

US Gross: ${formatValue(d["US Gross"])} (${usPercent})

International: ${formatValue(international)} (${intPercent})

Worldwide Total: ${formatValue(d["Worldwide Gross"])}

`) .style('left', (event.pageX + 10) + 'px') .style('top', (event.pageY - 28) + 'px'); } function handleMouseOut(event, d) { if (!selectedMovie || selectedMovie === d.Title) { d3.select(event.currentTarget).style('opacity', null); } tooltip.style('opacity', 0); } function updateButtons(activeBtn) { [sortUSBtn, sortWorldwideBtn, sortTitleBtn].forEach(btn => { btn.style.cssText = buttonStyle; }); activeBtn.style.cssText = activeStyle; } // Button handlers sortUSBtn.addEventListener('click', function() { currentSort = 'US'; currentData = [...data].sort((a, b) => b["US Gross"] - a["US Gross"]); updateChart(); updateButtons(this); }); sortWorldwideBtn.addEventListener('click', function() { currentSort = 'Worldwide'; currentData = [...data].sort((a, b) => b["Worldwide Gross"] - a["Worldwide Gross"]); updateChart(); updateButtons(this); }); sortTitleBtn.addEventListener('click', function() { currentSort = 'Title'; currentData = [...data].sort((a, b) => a.Title.localeCompare(b.Title)); updateChart(); updateButtons(this); }); toggleViewBtn.addEventListener('click', function() { stackedView = !stackedView; this.textContent = stackedView ? 'Show Comparison' : 'Show Worldwide Only'; updateChart(); }); // Initial render updateChart(false); // Assemble container container.appendChild(controls); container.appendChild(svg.node()); return container; }30:[] 2d:{"title":"Subproject: Top 10 Movies by US Gross Revenue","cells":[{"id":0,"value":"# Subproject: Top 10 Movies by US Gross Revenue\n\nThis notebook contains the visualization that is a revised version of the alpha visualization from the [Project Prototypes](https://observablehq.com/d/7dce9760f55a9475) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"## Bar Plot\n\nThis visualization created in D3.js is the revised version of the Top 10 Movies by US Gross Revenue bar plot found here: https://observablehq.com/d/7dce9760f55a9475","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"import {filteredMovies} from \"caa07ad98b53d325\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"## Revisions Explained\n\nA new interactivity has been implemented such that there are multiple buttons for sorting the bars and filtering the blue and orange bars in order to improve the user's interaction with the visualization. ","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"## Data Source\n\nThis section contains information on the data source used by this notebook.\n\n- The Movies dataset can be found officially on the [vega-dataset Github page](https://github.com/vega/vega-datasets/blob/master/SOURCES.md#moviesjson).\n- The dataset can also be found on the [Observable Plot Test Data Notebook](https://observablehq.com/@observablehq/plot-test-data). ","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}