29:null 2a:["$","title",null,{"children":"Netflix Stock Price vs. Netflix Viewership | teland's Workspace | Observable"}] 2f:T1cde,chart = { const svg = d3.create("svg").attr("viewBox", [-5, 5, 1300, height]); const x_scale = d3 .scaleUtc() .domain(d3.extent(nflx, d => d.Date)) .range([margin.left, width - margin.right]); const y_scale = d3 .scaleLinear() // .domain(d3.extent(nflx, d => d.Close)) .domain([0, d3.max(nflx, d => d.Close)]) .range([height - margin.bottom, margin.top]); const customTimeFormat = d3.utcFormat("%b %Y"); // "%b" for abbreviated month, "%Y" for full year // Update the x-axis definition const xAxis = g => g.call(d3.axisBottom(x_scale).tickFormat(customTimeFormat)) // Apply the custom format .attr('transform', `translate(0, ${height - margin.bottom})`); const yAxis = g => g .call(d3.axisLeft(y_scale)) .attr('transform', `translate(${margin.left}, 0)`); const line = d3 .line() .defined(d => !isNaN(d.Close)) .x(d => x_scale(d.Date)) .y(d => y_scale(d.Close)); // New Y-Scale for Hours Viewed const maxHoursViewedWhenRankIsOne = d3.max(csv.filter(d => d.weekly_rank === "1" && d.category === categorySelect), d => parseFloat(d.weekly_hours_viewed)); const y_scale_hours = d3 .scaleLinear() .domain([0, maxHoursViewedWhenRankIsOne]) // Fixed upper limit based on Rank 1 .range([height - margin.bottom, margin.top]); // Line generator for Hours Viewed const lineHours = d3 .line() .defined(d => !isNaN(d.HoursViewed)) .x(d => x_scale(d.Date)) .y(d => y_scale_hours(d.HoursViewed)); // Append new path for Hours Viewed line svg .append("path") .datum(nflx) .attr("fill", "none") .attr("stroke", "red") // Different color for differentiation .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lineHours) .style("stroke-opacity", 0.5); // Right Y-Axis for Hours Viewed const yAxisRight = g => g .attr("transform", `translate(${width - margin.right}, 0)`) .call(d3.axisRight(y_scale_hours)); // Append the right Y-Axis svg.append("g").call(yAxisRight); svg .append("path") .datum(nflx) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // legend var legendData = [ { color: "black", label: "Stock Price" }, { color: "red", label: "Number of Hours Viewed" }, ]; var legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(" + (width - 250) + "," + 10 + ")"); // Adjust position as needed legendData.forEach(function(d, i) { var legendItem = legend.append("g") .attr("transform", "translate(0," + i * 20 + ")"); // Vertical spacing between items legendItem.append("rect") .attr("width", 10) .attr("height", 10) .style("fill", d.color); legendItem.append("text") .attr("x", 15) // Spacing between the square and text .attr("y", 10) // Align text with the square .text(d.label) .style("font", "14px TTBold") // Change font size and family .attr("alignment-baseline","middle"); }); // Interaction code const toolTip = createToolTip(svg, 160, 120); const marker = svg .append("circle") .attr("r", 4) .attr("cx", -100) .attr("fill", "blue") .attr("stroke", "blue"); const colorScale = d3.scaleOrdinal().range(d3.schemeCategory10); const bisect = d3.bisector(d => d.Date); const formatTime = d3.timeFormat("%Y-%m-%d"); let lookup = d3.extent(nflx, d => d.Date)[0]; const min_lookup = x_scale(d3.extent(nflx, d => d.Date)[0]); const max_lookup = x_scale(d3.extent(nflx, d => d.Date)[1]); const interactive_line = svg .append("line") .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("x1", x_scale(lookup)) .attr("x2", x_scale(lookup)); svg .append("rect") .attr("width", width) .attr("height", height) .style("opacity", 0) .on("mousemove", function(event) { event.preventDefault(); const m = d3.pointer(event, this); update(m); }); const markerHours = svg .append("circle") .attr("r", 4) .attr("cx", -100) .attr("fill", "#007bff") // Different color for the hours viewed marker .attr("stroke", "#007bff"); function update(m) { const date = x_scale.invert(m[0]); const i = bisect.right(nflx, date); if (i < nflx.length) { marker .attr("cx", x_scale(nflx[i].Date)) .attr("cy", y_scale(nflx[i].Close)); markerHours .attr("cx", x_scale(nflx[i].Date)) .attr("cy", y_scale_hours(nflx[i].HoursViewed)); let txt = ''; Object.keys(nflx[i]).forEach(el => { let value = nflx[i][el]; let formattedKey = el; // Convert the key to a readable format if (el === 'Close') { formattedKey = 'Stock Price'; // Replace 'Close' with 'Stock Price' } else { formattedKey = camelCaseToReadable(el); // Convert other keys to a readable format } // Formatting the date if (value instanceof Date) { value = `${value.getMonth() + 1}`.padStart(2, '0') + '/' + `${value.getDate()}`.padStart(2, '0') + '/' + value.getFullYear(); } // Rounding price values else if (['Open', 'High', 'Low', 'Close', 'AdjClose'].includes(el)) { value = `$${Math.round(value)}`; } // Formatting volume with commas else if (el === 'Volume') { value = value.toLocaleString(); } else if (el === 'HoursViewed') { value = value.toLocaleString(); } txt += `${formattedKey}: ${value}\n`; }); toolTip.update(m, txt); } lookup = new Date(date); if (m[0] < min_lookup) lookup = x_scale.invert(min_lookup); if (m[0] > max_lookup) lookup = x_scale.invert(max_lookup); interactive_line.attr("x1", x_scale(lookup)).attr("x2", x_scale(lookup)); } svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("text") .attr("transform", "translate(" + (width / 2) + " ," + 600 + ")") .style("text-anchor", "middle") .style("font", "14px TTBold") // Change font size and family .text("Date (Month / Year)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("y", -5) .attr("x", -(height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("font", "14px TTBold") // Change font size and family .text("NFLX Stock Price (USD)"); svg.append("text") .attr("transform", "rotate(-270)") // Rotate the text for vertical orientation .attr("x", height / 2) // Centering the text along the height of the SVG .attr("y", -1240) // Positioning the text to the left of the y-axis .attr("dy", "1em") // Adjust the distance from the axis .style("text-anchor", "middle") // Align the text .style("font", "14px TTBold") // Change font size and family .text("Hours Viewed"); // The title you want to display toolTip.hide = function() { this.style("display", "none"); }; svg.on('mouseleave', function() { toolTip.hide(); }); return svg.node(); }30:T47e,createToolTip = (svg, w = 150, h = 240) => { const toolTip = svg .append("g") .style("pointer-events", "none") .style("display", "none"); const rect = toolTip.append("rect") .style("fill", "white") .style("stroke", "black"); const text = toolTip.append("text").style("font", "16px sans-serif"); toolTip.update = function([x, y], toolTipText) { text.selectAll("tspan") .data(toolTipText.split(/\n/)) .join("tspan") .attr("x", 10) .attr("y", (_, i) => `${i * 1.1}em`) .text(d => d); const bbox = text.node().getBBox(); rect.attr("width", bbox.width + 20) // Adding padding .attr("height", bbox.height + 20) .attr("x", 0) // Adjusting the x position of the rectangle .attr("y", -bbox.height + 80); // Adjusting the y position of the rectangle const xPosition = x + bbox.width + 20 > width ? x - bbox.width - 20 : x; const yPosition = y + bbox.height + 20 > height ? y - bbox.height - 20 : y; toolTip .style("display", null) .attr("transform", `translate(${xPosition},${yPosition})`) .raise(); }; return toolTip; } 31:T173b,groupedChart = { replay; const style = ` `; if (groups === undefined || groups.length === 0) { // Create a new SVG element const svg = d3.select(DOM.svg(width, height)); // Append a text element to the SVG svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("font-family", "TTBold") .attr("font-size", "50px") .attr("fill", "black") .text("No categories selected! Please select one."); return svg.node(); } else { const nodes = pack().leaves(); const simulation = d3.forceSimulation(nodes) .force("x", d3.forceX(width / 2).strength(0.01)) .force("y", d3.forceY(clusterHeight / 2).strength(0.01)) .force("cluster", forceCluster()) .force("collide", forceCollide()); const svg = d3.select(DOM.svg(width, clusterHeight)); svg.html(style); const node = svg.append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r * 1) .attr("stroke", "black") .attr("stroke-width", "1") .attr("fill", d => getColorFromData(d)) .call(drag(simulation)) .on("mouseover", function(event, d) { showHoverText(svg, d); }) .on("mouseout", function() { hideHoverText(svg); }) node.transition() .delay((d, i) => Math.random() * 500) .duration(750) .attrTween("r", d => { const i = d3.interpolate(0, d.r * 1); return t => d.r = i(t); }); // legend const redLegendData = [ { label: 'TV (English)', color: redShades[2] }, { label: 'TV (Non-English)', color: redShades[3] }, { label: 'Films (English)', color: redShades[0] }, { label: 'Films (Non-English)', color: redShades[1] }, ]; const greenLegendData = [ { label: 'TV (English)', color: greenShades[2] }, { label: 'TV (Non-English)', color: greenShades[3] }, { label: 'Films (English)', color: greenShades[0] }, { label: 'Films (Non-English)', color: greenShades[1] }, ]; function countColorOccurrences(nodes, color) { return nodes.filter(d => d.data.Color === color).length; } // Determine the predominant color const redCount = countColorOccurrences(nodes, 'red'); const greenCount = countColorOccurrences(nodes, 'green'); const predominantColor = redCount >= greenCount ? 'red' : 'green'; // Function to create and update the legend function updateLegend(legendData) { const legend = svg.selectAll('.legend') .data([legendData]) .join('g') .attr('class', 'legend') .attr('transform', 'translate(x, y)'); // Set the position of the legend legend.selectAll('rect') .data(d => d) .join('rect') .attr('x', 0) .attr('y', (d, i) => i * 20) .attr('width', 18) .attr('height', 18) .style('fill', d => d.color); legend.selectAll('text') .data(d => d) .join('text') .attr('x', 24) .attr('y', (d, i) => i * 20 + 9) .attr('dy', '.35em') .text(d => d.label); } updateLegend(predominantColor === 'red' ? redLegendData : greenLegendData); const percentChange = nodes.length > 0 ? nodes[0].data.PercentChange : "0%"; const stockChangeText = predominantColor === 'red' ? `down ${percentChange}` : `up ${percentChange}`; const sentenceText = svg.append("text") .attr("x", width / 2) .attr("y", 30) // Adjust this value as needed for positioning .attr("text-anchor", "middle") .attr("font-family", "TTBold") .attr("font-size", "16px") .attr("stroke", "white") .attr("stroke-width", "0.25px") // .attr("fill", predominantColor === 'red' ? 'red' : 'green') .attr("fill", "black") .text(`Netflix Stock is ${stockChangeText} this week!`); const text = svg.select("g").selectAll("text.label") .data(nodes) .enter() .append("text") .attr("class", "label") .attr("fill", "white") .attr("pointer-events", "none") .attr("user-select", "none") .attr("text-anchor", "middle") .attr("x", d => d.x) .attr("y", d => d.y) .each(function(d) { const textElement = d3.select(this); const maxCharsPerLine = 15; // Adjust this value as needed const lines = splitText(d.data.ShowTitle, maxCharsPerLine); // Add ShowTitle lines.forEach((line, i) => { textElement.append("tspan") .attr("x", d.x) .attr("dy", i > 0 ? "1.2em" : "0.75em") // Adjust this value as needed .text(line); }); // Add HoursViewed below the ShowTitle textElement.append("tspan") .attr("x", d.x) .attr("dy", lines.length > 1 ? "2.4em" : "1em") // Adjust this value as needed // .text(d.data.HoursViewed.toLocaleString() + ' hrs'); adjustFontSize(this, d.r * 1.25); }); simulation.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); text .attr("x", d => d.x) .each(function(d) { // Adjust the position of each tspan within the text const textElement = d3.select(this); const tspans = textElement.selectAll("tspan"); tspans.each(function(d, i) { d3.select(this) .attr("x", d.x) .attr("dy", i > 0 ? "1.2em" : "1em"); // Adjust this value as needed }); }) .attr("y", d => d.y - 5); // Shift the entire text element up a bit if needed }); invalidation.then(() => simulation.stop()); return svg.node(); } }32:T486,function forceCollide() { const alpha = 0.4; // fixed for greater rigidity! const padding1 = 0; // separation between same-color nodes const padding2 = 0; // separation between different-color nodes let nodes; let maxRadius; function force() { const quadtree = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { const r = d.r + maxRadius; const nx1 = d.x - r, ny1 = d.y - r; const nx2 = d.x + r, ny2 = d.y + r; quadtree.visit((q, x1, y1, x2, y2) => { if (!q.length) do { if (q.data !== d) { const r = d.r + q.data.r + (d.data.group === q.data.data.group ? padding1 : padding2); let x = d.x - q.data.x, y = d.y - q.data.y, l = Math.hypot(x, y); if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l, d.y -= y *= l; q.data.x += x, q.data.y += y; } } } while (q = q.next); return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); } } force.initialize = _ => maxRadius = d3.max(nodes = _, d => d.r * 1.25) + Math.max(padding1, padding2); return force; }33:T9f2,barChart= { const svg = d3.create("svg").attr("viewBox", [-5, 5, 3000, 450]); const x_scale = d3 .scaleUtc() .domain(d3.extent(nflx, d => d.Date)) .range([margin.left, width - margin.right]); const y_scale = d3 .scaleLinear() // .domain(d3.extent(nflx, d => d.Close)) .domain([0, d3.max(nflx, d => d.Close)]) .range([height - margin.bottom, margin.top]); const customTimeFormat = d3.utcFormat("%b %Y"); // "%b" for abbreviated month, "%Y" for full year // Update the x-axis definition const xAxis = g => g.call(d3.axisBottom(x_scale).tickFormat(customTimeFormat)) // Apply the custom format .attr('transform', `translate(0, ${height - margin.bottom})`); const yAxis = g => g .call(d3.axisLeft(y_scale)) .attr('transform', `translate(${margin.left}, 0)`); const line = d3 .line() .defined(d => !isNaN(d.Close)) .x(d => x_scale(d.Date)) .y(d => y_scale(d.Close)); svg .append("path") .datum(nflx) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); const verticalLine = d3.line() .x(d => x_scale(d.date)) .y(d => y_scale(d.value - 175)); // Append the vertical line to the SVG svg .append("path") .datum([ { date: dateRunner, value: d3.min(nflx, d => d.Close) }, { date: dateRunner, value: d3.max(nflx, d => d.Close) + 700 } ]) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 5) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") .attr("d", verticalLine); svg.append("text") .attr("x", 55) // Adjust this to move the text left or right .attr("y", 450) // Adjust this to move the text up or down .style("text-anchor", "start") .style("font-size", "40") // Adjust font style as needed .text(change); // svg.append("g").call(xAxis); // svg.append("g").call(yAxis); // svg.append("text") // .attr("transform", "translate(" + (width / 2) + " ," + 600 + ")") // .style("text-anchor", "middle") // .style("font", "14px TTBold") // Change font size and family // .text("Date (Month / Year)"); // svg.append("text") // .attr("transform", "rotate(-90)") // .attr("y", -5) // .attr("x", -(height / 2)) // .attr("dy", "1em") // .style("text-anchor", "middle") // .style("font", "14px TTBold") // Change font size and family // .text("NFLX Stock Price (USD)"); return svg.node(); }34:T4a3,plot = tp .data(byBrand) // bars .hBar({ x: (d, i, s) => d[s]?.value || 0, y: (d, i, s) => d[s]?.overall_rank || 13, fill: d => Object.values(d)[0].category, // Using category from the new data structure fillOpacity: 0.6, fillScheme: tp.cat, duration: duration }) // names .text({ x: (d, i, s) => d[s]?.value || 0, y: (d, i, s) => d[s]?.overall_rank || 13, text: d => Object.values(d)[0].name, hAlign: 'start', xOffset: 5, fontSize: 12, duration: duration }) // date .text({ data: 1, x: 600000000, // Adjusted for larger value scale y: 9.9, text: (d, i, s) => new Date(s).toLocaleDateString(), // Formatting the date fontSize: 20, fillOpacity: 0.2, }) .state(new Date("2021-07-05").getTime()) // Setting initial state to a specific date .option({ width: 1100, height: 560, limits: [0, 650e+6, 0.5, 12.5], // Adjusted for larger value scale legendPosition: 'bottom-right', clip: true, xAxis: false, xTickLength: 0, xAxisPosition: 'top', xFormat: d3.format(","), xTitle: 'Hours Viewed', yClean: true, yReverse: true }) .plot() 35:T470,Choose from many filters to create your own Netflix Show. It will then output how NFLX stock would change one week after release. This is based on historical data, where percent change in stock price one week after a show/movie was released was taken into account for each variable (if it was a movie/tv show, type of film/tv show, cast, rating). If an actor was in multiple TV shows/movies, I took the average of the stock price change. The data is obviously not comprehensive - it assumes that all shows and films added to Netflix are weighted the same, regardless of how many people watched it (Netflix does not publish all viewing numbers, only top 10s). Also, many things can change NFLX stock like revenue, growth numbers, etc, but it still tells an interesting story and is fun to play with! Note that actor order matters! The person you put first is the most important, followed by second and third. A fun thing I like to do is see the highest possible stock price increase combinations.36:Tc7a,viewof category = select({ options: [ { label: "Action & Adventure", value: "Action & Adventure" }, { label: "Anime Features", value: "Anime Features" }, { label: "Anime Series", value: "Anime Series" }, { label: "British TV Shows", value: "British TV Shows" }, { label: "Children & Family Movies", value: "Children & Family Movies" }, { label: "Classic & Cult TV", value: "Classic & Cult TV" }, { label: "Classic Movies", value: "Classic Movies" }, { label: "Comedies", value: "Comedies" }, { label: "Crime TV Shows", value: "Crime TV Shows" }, { label: "Cult Movies", value: "Cult Movies" }, { label: "Documentaries", value: "Documentaries" }, { label: "Docuseries", value: "Docuseries" }, { label: "Dramas", value: "Dramas" }, { label: "Faith & Spirituality", value: "Faith & Spirituality" }, { label: "Horror Movies", value: "Horror Movies" }, { label: "Independent Movies", value: "Independent Movies" }, { label: "International Movies", value: "International Movies" }, { label: "International TV Shows", value: "International TV Shows" }, { label: "Kids' TV", value: "Kids' TV" }, { label: "Korean TV Shows", value: "Korean TV Shows" }, { label: "LGBTQ Movies", value: "LGBTQ Movies" }, { label: "Movies", value: "Movies" }, { label: "Music & Musicals", value: "Music & Musicals" }, { label: "Reality TV", value: "Reality TV" }, { label: "Romantic Movies", value: "Romantic Movies" }, { label: "Romantic TV Shows", value: "Romantic TV Shows" }, { label: "Sci-Fi & Fantasy", value: "Sci-Fi & Fantasy" }, { label: "Science & Nature TV", value: "Science & Nature TV" }, { label: "Spanish-Language TV Shows", value: "Spanish-Language TV Shows" }, { label: "Sports Movies", value: "Sports Movies" }, { label: "Stand-Up Comedy", value: "Stand-Up Comedy" }, { label: "Stand-Up Comedy & Talk Shows", value: "Stand-Up Comedy & Talk Shows" }, { label: "TV Action & Adventure", value: "TV Action & Adventure" }, { label: "TV Comedies", value: "TV Comedies" }, { label: "TV Dramas", value: "TV Dramas" }, { label: "TV Horror", value: "TV Horror" }, { label: "TV Mysteries", value: "TV Mysteries" }, { label: "TV Sci-Fi & Fantasy", value: "TV Sci-Fi & Fantasy" }, { label: "TV Shows", value: "TV Shows" }, { label: "TV Thrillers", value: "TV Thrillers" }, { label: "Teen TV Shows", value: "Teen TV Shows" }, { label: "Thrillers", value: "Thrillers" } ] }) 37:T7df,listInput = ({ input = defaultInput, min = 0, max = 0, value = null, defaultValue = '', } = {}) => { // This is a state variable that we will change as events occur on the input let values = value !== null ? value : new Array(Math.max(min, 1)).fill(defaultValue) // Templates const inputRow = (v, i) => html.fragment` changeValueAt(i, e.target.value)}> ${Object.keys(NISData.actor).map(actor => html``)} ` const footerRow = () => html.fragment` ` // Rerender Helpers const rerenderTbody = () => { const tbody = output.querySelector('tbody') tbody.innerHTML = '' tbody.appendChild(html.fragment`${values.map(inputRow)}`) } const rerenderTfoot = () => { const tfoot = output.querySelector('tfoot') tfoot.innerHTML = '' tfoot.appendChild(footerRow()) } const rerender = () => { rerenderTbody() rerenderTfoot() } // Event Dispatcher const dispatchInputEvent = () => { output.value = values output.dispatchEvent(new CustomEvent('input')) } // Event Handlers const addRow = () => { values.push(defaultValue) rerender() dispatchInputEvent() } const removeRow = removeIdx => { values = values.filter((_, i) => i !== removeIdx) rerender() dispatchInputEvent() } const changeValueAt = (i, value) => { values[i] = value rerender() dispatchInputEvent() } const output = html` ${values.map(inputRow)} ${footerRow()}

` output.value = values return output }38:T1506,zoomChartWORLD = { const style = ` `; const width = 1200; const height = 610; const zoomBool = false; if (zoomBool) { const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } let currentZoom = d3.zoomIdentity; svg.call(zoom); function zoomed(event) { currentZoom = event.transform; g.attr("transform", currentZoom); g.attr("stroke-width", 1 / currentZoom.k); } const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .on("click", reset); } const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) // .on("click", reset); const g = svg.append("g"); // let htmlString = ""; // Define the projection for the map var projection = d3.geoMercator(); var path = d3.geoPath().projection(projection); const tooltip = svg.append("g") .attr("id", "tooltip") .style("display", "none"); tooltip.style("pointer-events", "none"); tooltip.append("rect") .attr("id", "tooltip-rect") .attr("x", 0) .attr("y", 0) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("rx", 4) // rounded corners .attr("ry", 4); tooltip.append("text") .attr("id", "tooltip-text") .attr("x", 5) .attr("y", 15) .attr("font-size", "15px") // Increase font size for better readability .attr("font-family", "Arial") // Use a commonly available sans-serif font .attr("font-weight", "bold") // Adjust weight as per your liking .attr("fill", "black"); const tooltipWORLD = d3.select("body") .append("div") .attr("class", "svg-tooltip") .style("max-height", "auto") .style("max-width", "auto") .style("position", "absolute") .style("bottom", "10px") .style("right", "10px") .style("background-color", "#ffffff") .style("padding", "10px") .style("border", "1px solid") .style("border-radius", "10px") .style("visibility", "hidden") .style("overflow", "auto"); let htmlString = "" // Add the countries // Modify the mouseover and mouseout events g.selectAll("path") .data(topojson.feature(worldWORLD, worldWORLD.objects.countries).features) .enter().append("path") .attr("d", path) .on("mouseover", function (event, d) { // Create a formatted string with the company name and average rating const tooltipTextContent = generateHTML(d); // Set the text to measure its width const tooltipText = svg.select("#tooltip-text").html(tooltipTextContent); const bbox = tooltipText.node().getBBox(); // Get bounding box of text svg.select("#tooltip-rect") .attr("width", bbox.width + 10) // Add some padding .attr("height", bbox.height + 10); svg.select("#tooltip") .style("display", "block"); }) .on("mousemove", function(event, d) { d3.select(this).attr("fill", "turquoise"); const [x, y] = d3.pointer(event); if (zoomBool) { const tooltipX = (d3.zoomIdentity.x + x * d3.zoomIdentity.k); const tooltipY = (d3.zoomIdentity.y + y * d3.zoomIdentity.k); } svg.select("#tooltip") .attr("transform", `translate(${x}, ${y})`); }) .on("mouseout", function() { d3.select(this).attr("fill", "black"); svg.select("#tooltip") .style("display", "none"); }); // Add proportional circles g.selectAll("circle") .data(mergedDataWORLD.filter(d => d.properties.hour && d.properties.hour.Long != null && d.properties.hour.Lat != null)) // Filter out null values .enter() .append("circle") .style("stroke", "black") .style("stroke-width", 0.5) .style("fill", getChangeColor(logPercentChangeForWeekWORLD(dateWORLD, stockDataWORLD))) .style("pointer-events", "none") .style("opacity", "0.8") .attr("r", (d) => toRadiusWORLD(d) / 2) .attr("cx", (d) => projection([d.properties.hour.Long, d.properties.hour.Lat])[0]) .attr("cy", (d) => projection([d.properties.hour.Long, d.properties.hour.Lat])[1]) const legend = svg.append("g") .attr("class", "legend") .attr("transform", `translate(${width - 190}, ${height - 600})`); legend.append("circle") .attr("r", 5) .style("fill", "green") .style("stroke", "black") .style("stroke-width", 0.5); legend.append("text") .attr("x", 10) .attr("y", 5) .text("Stock Up") .attr("font-family", "Sans-serif") .attr("font-size", 12); legend.append("circle") .attr("r", 5) .attr("cy", 15) .style("fill", "red") .style("stroke", "black") .style("stroke-width", 0.5); legend.append("text") .attr("x", 10) .attr("y", 20) .text("Stock Down") .attr("font-family", "Sans-serif") .attr("font-size", 12); return svg.node(); } 39:T7f0,barChartWORLD= { const svg = d3.create("svg").attr("viewBox", [-5, 5, 3000, 450]); const x_scale = d3 .scaleUtc() .domain(d3.extent(nflxWORLD, d => d.Date)) .range([marginWORLD.left, widthWORLD - marginWORLD.right]); const y_scale = d3 .scaleLinear() // .domain(d3.extent(nflxWORLD, d => d.Close)) .domain([0, d3.max(nflxWORLD, d => d.Close)]) .range([heightWORLD - marginWORLD.bottom, marginWORLD.top]); const customTimeFormat = d3.utcFormat("%b %Y"); // "%b" for abbreviated month, "%Y" for full year // Update the x-axis definition const xAxis = g => g.call(d3.axisBottom(x_scale).tickFormat(customTimeFormat)) // Apply the custom format .attr('transform', `translate(0, ${heightWORLD - marginWORLD.bottom})`); const yAxis = g => g .call(d3.axisLeft(y_scale)) .attr('transform', `translate(${marginWORLD.left}, 0)`); const line = d3 .line() .defined(d => !isNaN(d.Close)) .x(d => x_scale(d.Date)) .y(d => y_scale(d.Close)); svg .append("path") .datum(nflxWORLD) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); const verticalLine = d3.line() .x(d => x_scale(d.date)) .y(d => y_scale(d.value - 175)); // Append the vertical line to the SVG svg .append("path") .datum([ { date: createDateFromString(addOneDay(dateWORLD)), value: d3.min(nflxWORLD, d => d.Close) }, { date: createDateFromString(addOneDay(dateWORLD)), value: d3.max(nflxWORLD, d => d.Close) + 700 } ]) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 5) .attr("d", verticalLine); svg.append("text") .attr("x", 55) // Adjust this to move the text left or right .attr("y", 450) // Adjust this to move the text up or down .style("text-anchor", "start") .style("font-size", "40") // Adjust font style as needed .text(changeWORLD); return svg.node(); }3a:T751,mergedDataWORLD = { let merged = []; for (var i = 0; i < countriesWORLD.features.length; i++) { let country = countriesWORLD.features[i]; // countries topojson data as main object let obj = Object.assign({}, country); //add population data for (var c = 0; c < populationDataWORLD.length; c++) { if (populationDataWORLD[c].name == country.properties.name) { obj.properties.population = populationDataWORLD[c].population; } } obj.properties.hour = null; //add hour data by country name for (var g = 0; g < newWorldDataWithTitlesWORLD.length; g++) { if (obj.properties.name == newWorldDataWithTitlesWORLD[g]["Country/Region"]) { // If hour data not yet assigned, assign it directly if (!obj.properties.hour) { obj.properties.hour = Object.assign({}, newWorldDataWithTitlesWORLD[g]); } else { // Aggregate data for countries with multiple provinces for (var key in newWorldDataWithTitlesWORLD[g]) { if (key != "Country/Region" && key != "Province/State" && !isNaN(newWorldDataWithTitlesWORLD[g][key])) { if (obj.properties.hour[key]) { obj.properties.hour[key] = parseInt(obj.properties.hour[key]) + parseInt(newWorldDataWithTitlesWORLD[g][key]); } else { obj.properties.hour[key] = parseInt(newWorldDataWithTitlesWORLD[g][key]); } } } } // Set lat/lon for the first entry of a country (avoiding provinces) if (!obj.properties.hour.Lat && newWorldDataWithTitlesWORLD[g]["Province/State"] == "") { obj.properties.hour.Lat = newWorldDataWithTitlesWORLD[g].Lat; obj.properties.hour.Long = newWorldDataWithTitlesWORLD[g].Long; } } } merged.push(obj); } return merged; } 3b:T8a6,function transformDataWithTitlesWORLD(viewData, populationData) { let transformedData = []; // Create a mapping of country names to population data let populationMap = new Map(); populationData.forEach(item => { populationMap.set(item["Country/Region"], item); }); viewData.forEach(item => { let date = new Date(item.Date); let formattedDate = `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear().toString().substr(-2)}`; // Check if the country is "United States" and rename it to "United States of America" let countryName = item.Country; // Find if the country object already exists in the array let countryObject = transformedData.find(obj => obj["Country/Region"] === countryName); // If the country object doesn't exist, create a new one if (!countryObject) { let populationInfo = populationMap.get(countryName) || {}; countryObject = { "Province/State": populationInfo["Province/State"] || "", "Country/Region": countryName, "Lat": populationInfo["Lat"] || "", "Long": populationInfo["Long"] || "", // Add other population data fields here if needed }; transformedData.push(countryObject); } // Add or update the date and hours viewed with title if (item.Category == "Films" && item.Country == countryName && item.WeeklyRank == 1) { if (!countryObject[formattedDate]) { countryObject[formattedDate] = {}; } countryObject[formattedDate].Films = { HoursViewed: item.HoursViewed.toString(), Title: item.Title, }; } if (item.Category == "TV" && item.Country == countryName && item.WeeklyRank == 1) { if (!countryObject[formattedDate]) { countryObject[formattedDate] = {}; } countryObject[formattedDate].TV = { HoursViewed: item.HoursViewed.toString(), Title: item.Title, }; }; }); function renameCountry(obj) { console.log(obj) obj[90]["Country/Region"] = "United States of America" obj[90]["Lat"] = "40.0" obj[90]["Long"] = "-100.0" return obj; } transformedData = renameCountry(transformedData) return transformedData; } 3c:[{"id":"fe13f7407533f0ae666238e6e1f9c2610b05d753277139ab3e05f5cb81d54ec7ac6bfa2bf11d28f056e66c7a2885183706b77b412802c92f98ca73be95081006","href":"https://static.observableusercontent.com/files/fe13f7407533f0ae666238e6e1f9c2610b05d753277139ab3e05f5cb81d54ec7ac6bfa2bf11d28f056e66c7a2885183706b77b412802c92f98ca73be95081006","name":"updated-all-weeks-countries.csv","type":"text/csv","lastModified":1700262583588.346,"size":6847558},{"id":"a18cdb0a32f1c4e792edf0b1642c6bc26b17ee14a269596383aeef6304fa67d215929ebe154ab10e09adbba7dd67ef4572eba05c70c38c7d22f5496343d94ad2","href":"https://static.observableusercontent.com/files/a18cdb0a32f1c4e792edf0b1642c6bc26b17ee14a269596383aeef6304fa67d215929ebe154ab10e09adbba7dd67ef4572eba05c70c38c7d22f5496343d94ad2","name":"earth.json","type":"application/json","lastModified":1700265190350.709,"size":1690480},{"id":"98d2b7c47a2974b1cf36aca39316ce97974d25dbe14586f2e9937493ce00dc29fff2eb9d23ac9285db54efd620e16f709263d8fa1b269ac3af114ee696145876","href":"https://static.observableusercontent.com/files/98d2b7c47a2974b1cf36aca39316ce97974d25dbe14586f2e9937493ce00dc29fff2eb9d23ac9285db54efd620e16f709263d8fa1b269ac3af114ee696145876","name":"updated_with_rank.csv","type":"text/csv","lastModified":1701302911777.087,"size":351850},{"id":"4069e75be758dc67e12a988e3ae370ffbe1ef639accca97f6835e666bebc982d9cebdce08a74e884d9a56375b5aaa3c92af3629b1e481313f6bcb75b66e57c59","href":"https://static.observableusercontent.com/files/4069e75be758dc67e12a988e3ae370ffbe1ef639accca97f6835e666bebc982d9cebdce08a74e884d9a56375b5aaa3c92af3629b1e481313f6bcb75b66e57c59","name":"nflx.json","type":"application/json","lastModified":1701763958435.171,"size":9675},{"id":"8c0b969b5c05f43bc2ed736203680dc129e1c6658f862057ca1467f2644c66bb5a572d6231733f2488a841300f20656f3787cc7e934d77fc445dc5b764ea1bc7","href":"https://static.observableusercontent.com/files/8c0b969b5c05f43bc2ed736203680dc129e1c6658f862057ca1467f2644c66bb5a572d6231733f2488a841300f20656f3787cc7e934d77fc445dc5b764ea1bc7","name":"FontsFree-Net-TTInterfaces-Bold.ttf","type":"font/ttf","lastModified":1699918488641.236,"size":285496},{"id":"7b8fd12cbb504e9e0c99bfbb99a660ec1328ee325aaa91afb9b3bd817654971d15b848bcc64edf45ed222025fec32ba1269cfb05bcbfb6c41078328fee53adbb","href":"https://static.observableusercontent.com/files/7b8fd12cbb504e9e0c99bfbb99a660ec1328ee325aaa91afb9b3bd817654971d15b848bcc64edf45ed222025fec32ba1269cfb05bcbfb6c41078328fee53adbb","name":"merged@1.json","type":"application/json","lastModified":1700158518608.049,"size":1058519},{"id":"380b0fb43ae267d4c4bb6148bfb5d9bcc0acf39eec1621a6a92e4b5d16a13f12ed0ab0a4924b7a5c3004a52614d5ce493ce7131b9d517f74ae0ace6a97ab1453","href":"https://static.observableusercontent.com/files/380b0fb43ae267d4c4bb6148bfb5d9bcc0acf39eec1621a6a92e4b5d16a13f12ed0ab0a4924b7a5c3004a52614d5ce493ce7131b9d517f74ae0ace6a97ab1453","name":"world_data_hours.csv","type":"text/csv","lastModified":1701679566089.145,"size":5859870},{"id":"368e27bccf844904904e8965d23af790214245c2ae4a1c4c7a27700cd6860d68ebb7f09e80bde3b29a6c883ce5175b264152474f56c9f09125344d6345466c9d","href":"https://static.observableusercontent.com/files/368e27bccf844904904e8965d23af790214245c2ae4a1c4c7a27700cd6860d68ebb7f09e80bde3b29a6c883ce5175b264152474f56c9f09125344d6345466c9d","name":"stock_data.csv","type":"text/csv","lastModified":1701680511458.455,"size":5002},{"id":"ea745aca2f9369a95f9cea841a5fa584d702929b564520204b13d24a5789a5c6aca1b63d9c50f6adba04880cdbb7a5ed6d90198c3812db498f42b27311a75b89","href":"https://static.observableusercontent.com/files/ea745aca2f9369a95f9cea841a5fa584d702929b564520204b13d24a5789a5c6aca1b63d9c50f6adba04880cdbb7a5ed6d90198c3812db498f42b27311a75b89","name":"all.json","type":"application/json","lastModified":1702197469460.305,"size":586855},{"id":"cda4855736c9752c96dae4da1587c9b16534930a60e0131676bf3fac73a3497f0e3aa03f4907c101ab22e7bd864f5d63168bb9f35c89849fd6b679b66e0d8c2e","href":"https://static.observableusercontent.com/files/cda4855736c9752c96dae4da1587c9b16534930a60e0131676bf3fac73a3497f0e3aa03f4907c101ab22e7bd864f5d63168bb9f35c89849fd6b679b66e0d8c2e","name":"updated_merged_all_weeks_global_nflx_formatted_percent_change.csv","type":"text/csv","lastModified":1699995416512.56,"size":345185},{"id":"1d3606e38ffe3c7dc74737635201784cd0f4e0612f258a306baa1d2ac8ef49f27add465df8ed983fb1db3ff1f77803b55ff0be55e8e2a760e298cdd5d7343367","href":"https://static.observableusercontent.com/files/1d3606e38ffe3c7dc74737635201784cd0f4e0612f258a306baa1d2ac8ef49f27add465df8ed983fb1db3ff1f77803b55ff0be55e8e2a760e298cdd5d7343367","name":"populationData@2.json","type":"application/json","lastModified":1701720808984.095,"size":22912},{"id":"f0c3d6ecf671b3bfdc8846fcceafd1bda65e049aad12057ca068a1aa9ce4fc16c8bd1e36e3eddf471d8eafa63ef32ca1206f960e4212cd0df6fe4d9a1f57a290","href":"https://static.observableusercontent.com/files/f0c3d6ecf671b3bfdc8846fcceafd1bda65e049aad12057ca068a1aa9ce4fc16c8bd1e36e3eddf471d8eafa63ef32ca1206f960e4212cd0df6fe4d9a1f57a290","name":"populationData (1).json","type":"application/json","lastModified":1701721475808.226,"size":22923},{"id":"e59d437ca8dfd5bdc24751d55e50960805986575341b3c7ea3b34cb7670f3166de6ba551a0c3ed681d6b5e027515ad125d833360b4c6a7172aac9ef04cd7b3c7","href":"https://static.observableusercontent.com/files/e59d437ca8dfd5bdc24751d55e50960805986575341b3c7ea3b34cb7670f3166de6ba551a0c3ed681d6b5e027515ad125d833360b4c6a7172aac9ef04cd7b3c7","name":"FontsFree-Net-TTInterfaces-Regular.ttf","type":"font/ttf","lastModified":1700019904578.108,"size":273476}] 2d:{"id":"7e76652a19c4620e","slug":null,"title":"Netflix Stock Price vs. Netflix Viewership","thumbnail":"74dd372f864a949501e1aa8a0dca97933ca775dca25411b523d2946c7e7e0ae4","access_level":"public","create_time":"$D2023-11-13T07:21:04.941Z","update_time":"$D2023-12-12T22:39:40.756Z","view_time":null,"first_public_time":"$D2023-11-13T07:21:04.941Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a06c43110ea8e072","login":"teland-ws","name":"teland's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/66e06adb69eb109d30808192f3b5d41041d61155956b90c398f97c4f7b87c981","tier":"starter_2024"},"version":3263,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5ccc8f4e48262ae","login":"teland","name":"teland","avatar_url":"https://avatars-next.observableusercontent.com/fafb7873eb37692108bf905707c0ac082b9b691c267662161e213454d373b401","tier":null}],"members":[{"type":"individual","id":"e5ccc8f4e48262ae","login":"teland","name":"teland","avatar_url":"https://avatars-next.observableusercontent.com/fafb7873eb37692108bf905707c0ac082b9b691c267662161e213454d373b401","tier":null,"role":"editor"},{"type":"team","id":"a06c43110ea8e072","login":"teland-ws","name":"teland's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/66e06adb69eb109d30808192f3b5d41041d61155956b90c398f97c4f7b87c981","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Netflix Stock Price vs. Netflix Viewership","cells":[{"id":0,"value":"# Netflix Stock Price vs. Netflix Viewership","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"### By Teland La","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":488,"value":"Go to the final website: www.teland.la/netflix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1181,"value":"## Interactive Line Chart - Stock vs Shows","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":249,"value":"viewof rank = Inputs.range([1, 10], {value: 1, step: 1, label: \"Change Rank\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"viewof categorySelect = select({\n options: [\n {\n label: \"Films (English)\",\n value: \"Films (English)\"\n },\n {\n label: \"Films (Non-English)\",\n value: \"Films (Non-English)\"\n },\n {\n label: \"TV (English)\",\n value: \"TV (English)\"\n },\n {\n label: \"TV (Non-English)\",\n value: \"TV (Non-English)\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"function camelCaseToReadable(str) {\n // Split the string at every uppercase letter and join with a space\n return str\n .replace(/([A-Z])/g, ' $1') // Insert a space before each uppercase letter\n .replace(/^./, function(str){ return str.toUpperCase(); }) // Capitalize the first letter\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"csv = FileAttachment(\"updated_merged_all_weeks_global_nflx_formatted_percent_change.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"nflx = csv\n .filter(row => row.weekly_rank === rank.toString() && row.category === categorySelect) // Filter rows based on the selected rank\n .map(row => {\n return {\n Date: new Date(row.week),\n Close: parseFloat(row.Close),\n Title: row.season_title ? row.season_title : row.show_title,\n HoursViewed: parseFloat(row.weekly_hours_viewed),\n WeeklyRank: parseFloat(row.weekly_rank),\n Category: row.category\n // Open: parseFloat(row.Open),\n // High: parseFloat(row.High),\n // Low: parseFloat(row.Low),\n // AdjClose: parseFloat(row[\"Adj Close\"]),\n // Volume: parseFloat(row.Volume)\n };\n });\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"nflx.sort((a, b) => a.Date - b.Date);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1366,"value":"filteredData = nflx.filter(d => d.WeeklyRank === rank && d.Category === categorySelect);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1146,"value":"## Interactive Dates (Weekly) - Stocks vs. Shows","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1212,"value":"Another form of interaction is with calendars to tell time. I used a bubble chart here, but the interaction for narrative comes from the calendar where you can pick a day that you like. This chart shows nodes that are determined by how popular the shows were in that week (hours viewed). The nodes are grouped by the category. The colors correspond to if the stock price is up or down in that week.

Note: if you see repeating nodes, that means it's a different season! Hover over it to see the season number. If the node is too small and the show is too unpopular, you can do the same thing to get more info in the text box.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":925,"value":"viewof datePicked = Inputs.date({label: \"Chart Date\", min: \"2021-07-05\", max: \"2022-08-28\", value:\"2021-07-05\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":749,"value":"viewof replay = html`