29:null 2a:["$","title",null,{"children":"Most popular media mapped over time - fixed data struc | teland's Workspace | Observable"}] 2f: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; } 30: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(); } 31: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(); }32: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; } 33:Ta49,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:T1832,groupedChart = { const height = 200; replay; const style = ` `; if (groups === undefined || groups.length === 0) { // Create a new SVG element const svg = d3.select(DOM.svg(500, 500)); // 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(); nodes.forEach(node => { node.fx = node.x - 200; node.fy = node.y; }); 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); }) // 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 filterLegendData(data, category) { return data.filter(item => item.label.startsWith(category)); } let filteredRedLegendData, filteredGreenLegendData; function filterLegend() { if (worldSelectWORLD === "TV") { filteredRedLegendData = filterLegendData(redLegendData, "TV"); filteredGreenLegendData = filterLegendData(greenLegendData, "TV"); } else if (worldSelectWORLD === "Films") { filteredRedLegendData = filterLegendData(redLegendData, "Films"); filteredGreenLegendData = filterLegendData(greenLegendData, "Films"); } } function countColorOccurrences(nodes, color) { return nodes.filter(d => d.data.Color === color).length; } filterLegend(); // 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 legendWidth = 1520; // Width of the legend, adjust as needed const legendX = width - legendWidth; // Position the legend on the right side const legend = svg.selectAll('.legend') .data([legendData]) .join('g') .attr('class', 'legend') .attr('transform', `translate(${legendX}, 550)`); // 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' ? filteredRedLegendData : filteredGreenLegendData); const percentChange = nodes.length > 0 ? nodes[0].data.PercentChange : "0%"; const stockChangeText = predominantColor === 'red' ? `down ${percentChange}` : `up ${percentChange}`; 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(); } }35: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; }36:[{"id":"380b0fb43ae267d4c4bb6148bfb5d9bcc0acf39eec1621a6a92e4b5d16a13f12ed0ab0a4924b7a5c3004a52614d5ce493ce7131b9d517f74ae0ace6a97ab1453","href":"https://static.observableusercontent.com/files/380b0fb43ae267d4c4bb6148bfb5d9bcc0acf39eec1621a6a92e4b5d16a13f12ed0ab0a4924b7a5c3004a52614d5ce493ce7131b9d517f74ae0ace6a97ab1453","name":"world_data_hours.csv","type":"text/csv","lastModified":1701937787315.189,"size":5859870},{"id":"f0c3d6ecf671b3bfdc8846fcceafd1bda65e049aad12057ca068a1aa9ce4fc16c8bd1e36e3eddf471d8eafa63ef32ca1206f960e4212cd0df6fe4d9a1f57a290","href":"https://static.observableusercontent.com/files/f0c3d6ecf671b3bfdc8846fcceafd1bda65e049aad12057ca068a1aa9ce4fc16c8bd1e36e3eddf471d8eafa63ef32ca1206f960e4212cd0df6fe4d9a1f57a290","name":"populationData (1).json","type":"application/json","lastModified":1701937787315.189,"size":22923},{"id":"368e27bccf844904904e8965d23af790214245c2ae4a1c4c7a27700cd6860d68ebb7f09e80bde3b29a6c883ce5175b264152474f56c9f09125344d6345466c9d","href":"https://static.observableusercontent.com/files/368e27bccf844904904e8965d23af790214245c2ae4a1c4c7a27700cd6860d68ebb7f09e80bde3b29a6c883ce5175b264152474f56c9f09125344d6345466c9d","name":"stock_data.csv","type":"text/csv","lastModified":1701937787315.189,"size":5002},{"id":"cda4855736c9752c96dae4da1587c9b16534930a60e0131676bf3fac73a3497f0e3aa03f4907c101ab22e7bd864f5d63168bb9f35c89849fd6b679b66e0d8c2e","href":"https://static.observableusercontent.com/files/cda4855736c9752c96dae4da1587c9b16534930a60e0131676bf3fac73a3497f0e3aa03f4907c101ab22e7bd864f5d63168bb9f35c89849fd6b679b66e0d8c2e","name":"updated_merged_all_weeks_global_nflx_formatted_percent_change.csv","type":"text/csv","lastModified":1701937787315.189,"size":345185},{"id":"e59d437ca8dfd5bdc24751d55e50960805986575341b3c7ea3b34cb7670f3166de6ba551a0c3ed681d6b5e027515ad125d833360b4c6a7172aac9ef04cd7b3c7","href":"https://static.observableusercontent.com/files/e59d437ca8dfd5bdc24751d55e50960805986575341b3c7ea3b34cb7670f3166de6ba551a0c3ed681d6b5e027515ad125d833360b4c6a7172aac9ef04cd7b3c7","name":"FontsFree-Net-TTInterfaces-Regular.ttf","type":"font/ttf","lastModified":1701937787315.189,"size":273476},{"id":"8c0b969b5c05f43bc2ed736203680dc129e1c6658f862057ca1467f2644c66bb5a572d6231733f2488a841300f20656f3787cc7e934d77fc445dc5b764ea1bc7","href":"https://static.observableusercontent.com/files/8c0b969b5c05f43bc2ed736203680dc129e1c6658f862057ca1467f2644c66bb5a572d6231733f2488a841300f20656f3787cc7e934d77fc445dc5b764ea1bc7","name":"FontsFree-Net-TTInterfaces-Bold.ttf","type":"font/ttf","lastModified":1701937787315.189,"size":285496},{"id":"b6944728f77a4c6e3af7632c85acb551936858d19df5a923f88d1a828e9a8ff22f4d58094cb9807fd0fc4702bbd053b68794216bbf1cc53374f80135108428b1","href":"https://static.observableusercontent.com/files/b6944728f77a4c6e3af7632c85acb551936858d19df5a923f88d1a828e9a8ff22f4d58094cb9807fd0fc4702bbd053b68794216bbf1cc53374f80135108428b1","name":"all.json","type":"application/json","lastModified":1701937787315.189,"size":586855}] 2d:{"id":"bb5680909ac3651a","slug":null,"title":"Most popular media mapped over time - fixed data struc","thumbnail":"a6d02aeb71ee1473c002cd757f84fd474a89ecc14e1f23725c020a82f54cac6c","access_level":"public","create_time":"$D2023-12-07T08:29:47.315Z","update_time":"$D2023-12-08T08:29:19.373Z","view_time":null,"first_public_time":"$D2023-12-07T08:29:47.315Z","fork":{"id":"d373c72267a67830","slug":null,"title":"Most popular media mapped over time","owner":{"id":"a06c43110ea8e072","login":"teland-ws","name":"teland's Workspace"}},"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":2721,"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":"Most popular media mapped over time - fixed data struc","cells":[{"id":0,"value":"html`

Most popular media mapped over time - fixed data struc

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2283,"value":"widthWORLD = 1500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"heightWORLD = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1031,"value":"dateXWORLD = {\n if (width > 900) {\n return width / 2 - 250;\n } else {\n return 5;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"dateYWORLD = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"fsWORLD = 13","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1063,"value":"brSpacingWORLD = 13","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"brxWORLD = width - 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"bryWORLD = heightWORLD - 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1219,"value":"md`_d3 scale & projection_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"domainWORLD = [0, 200000000]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"circleScaleWORLD = d3\n .scaleSqrt()\n .domain(domainWORLD)\n .range([2, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"// toRadiusWORLD = function(d) {\n// if (d.properties.hour) {\n// return circleScaleWORLD(d.properties.hour[dateWORLD][worldSelectWORLD][\"HoursViewed\"]);\n// }\n// }\ntoRadiusWORLD = function(d) {\n // Check if the specific property exists\n if (d.properties.hour && d.properties.hour[dateWORLD] && d.properties.hour[dateWORLD][worldSelectWORLD]) {\n return circleScaleWORLD(d.properties.hour[dateWORLD][worldSelectWORLD][\"HoursViewed\"]);\n }\n // If the property doesn't exist, skip the processing\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"dpi = window.devicePixelRatio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"datesWORLD = {\n let d = [];\n for (var key in newWorldDataWithTitlesWORLD[0]) {\n if (!isNaN(key[0])) {\n d.push(key);\n // if (key.charAt(0) !== \"1\") {\n // //omit jan\n // d.push(key);\n // }\n }\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1549,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"populationDataWORLD = await FileAttachment(\"all.json\")\n .json()\n .then(function (data) {\n data.forEach((d) => {\n if (d.name === \"Iran (Islamic Republic of)\") {\n d.name = \"Iran\";\n } else if (d.name === \"United States\") {\n d.name = \"United States of America\";\n } else if (d.name === \"Palestine, State of\") {\n d.name = \"Palestine\";\n } else if (d.name === \"Bolivia (Plurinational State of)\") {\n d.name = \"Bolivia\";\n } else if (d.name === \"Venezuela (Bolivarian Republic of)\") {\n d.name = \"Venezuela\";\n } else if (d.name === \"Russian Federation\") {\n d.name = \"Russia\";\n } else if (d.name === \"Viet Nam\") {\n d.name = \"Vietnam\";\n } else if (d.name === \"Korea (Republic of)\") {\n d.name = \"South Korea\";\n } else if (d.name === \"Congo (Democratic Republic of the)\") {\n d.name = \"Dem. Rep. Congo\";\n }\n });\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"countriesWORLD = topojsonWORLD.feature(worldWORLD, worldWORLD.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"worldWORLD = await d3.json(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"topojsonWORLD = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3WORLD = require(\"d3@6\",\"d3-geo@3\", \"d3-geo-projection@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"// import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1757,"value":"csvWORLD = FileAttachment(\"updated_merged_all_weeks_global_nflx_formatted_percent_change.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1748,"value":"nflxWORLD = csvWORLD\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1438,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1597,"value":"viewof worldSelectWORLD = select({\n options: [\n {\n label: \"Film\",\n value: \"Films\"\n },\n {\n label: \"TV\",\n value: \"TV\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2076,"value":"label = worldSelectWORLD.value === \"TV\" ? \"TV Show\" : \"Film\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2074,"value":"function generateHTML(d) {\n console.log(d)\n // Create an array to hold lines of text\n let lines = [];\n let result = d.properties.hour[dateWORLD][worldSelectWORLD] === undefined\n ? \"None.\" \n : (worldSelectWORLD === \"TV\" \n ? \"#1 TV Show: \" + d.properties.hour[dateWORLD][worldSelectWORLD][\"Title\"] \n : \"#1 Film: \" + d.properties.hour[dateWORLD][worldSelectWORLD][\"Title\"] );\n\n let viewingData = isNaN(d.properties.hour[dateWORLD][worldSelectWORLD][\"HoursViewed\"]) ? \"Number of hours viewed unknown.\" : \"Estimated Hours Viewed: \" + Math.round(d.properties.hour[dateWORLD][worldSelectWORLD][\"HoursViewed\"]).toLocaleString(\"en\");\n \n lines.push(\"Country: \" + d.properties.name);\n lines.push(result);\n lines.push(viewingData);\n\n // Create a formatted string using tspan elements for line breaks\n let htmlString = \"\";\n lines.forEach((line, index) => {\n htmlString += ` 0 ? '1.2em' : 0}\">${line}`;\n });\n\n return htmlString;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1751,"value":"marginWORLD = ({ top: 50, right: 400, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2709,"value":"function logPriceWORLD(dateRunner, stockData) {\n // Convert dateRunner to string\n let dateString = addOneDay(dateRunner);\n\n // Find the week data in stockData\n let weekData = stockData.find(week => week.week === dateString);\n\n // Check if weekData is found and log the percent change\n if (weekData) {\n return weekData.Close.slice(0, -3);\n } else {\n return \"No data found for this week.\";\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1722,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1599,"value":"world_dataWORLD = FileAttachment(\"world_data_hours.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1601,"value":"filteredWorldDataWORLD = world_dataWORLD\n // .filter(row => row.weekly_rank === worldrankWORLD.toString() && row.category === worldSelectWORLD) // Filter rows based on the selected rank\n .map(row => {\n return {\n Country: row.country_name,\n Date: new Date(row.week),\n Title: row.title,\n HoursViewed: parseFloat(row.country_media_hours_viewed),\n WeeklyRank: parseFloat(row.weekly_rank),\n Category: row.category\n };\n });\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1603,"value":"popsWORLD = FileAttachment(\"populationData (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1641,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1644,"value":"newWorldDataWithTitlesWORLD = transformDataWithTitlesWORLD(filteredWorldDataWORLD, popsWORLD)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1729,"value":"stockDataWORLD = FileAttachment(\"stock_data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1724,"value":"changeWORLD = `NFLX is ${logPercentChangeForWeekWORLD(dateWORLD, stockDataWORLD)[0] === '-' ? 'down' : 'up'} ${logPercentChangeForWeekWORLD(dateWORLD, stockDataWORLD)} this week! ($${logPriceWORLD(dateWORLD, stockDataWORLD)})`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2112,"value":"function debounce(func, wait) {\n let timeout;\n return function(...args) {\n const later = () => {\n clearTimeout(timeout);\n func.apply(this, args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1727,"value":"function logPercentChangeForWeekWORLD(dateRunner, stockData) {\n // Convert dateRunner to string\n // let dateString = dateToString(dateRunner);\n let dateString = addOneDay(dateRunner);\n\n // Find the week data in stockData\n let weekData = stockData.find(week => week.week === dateString);\n\n // Check if weekData is found and log the percent change\n if (weekData) {\n return weekData.percent_change;\n } else {\n return \"No data found for this week.\";\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1736,"value":"function addOneDay(dateString) {\n // Create a new Date object from the input string\n var date = new Date(dateString);\n\n // Add one day to the date\n date.setDate(date.getDate() + 1);\n\n // Format the date as a string in the format 'MM/DD/YY'\n var month = date.getMonth() + 1; // getMonth() returns month index starting from 0\n var day = date.getDate();\n var year = date.getFullYear();\n\n // Pad month and day with leading zeros if necessary\n // month = month < 10 ? '0' + month : month;\n // day = day < 10 ? '0' + day : day;\n\n return month + '/' + day + '/' + year.toString().substr(-2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1740,"value":"addOneDay(dateWORLD)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1762,"value":"function createDateFromString(dateString) {\n // Create a new Date object from the input string\n var date = new Date(dateString);\n\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1765,"value":"createDateFromString(addOneDay(dateWORLD))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1782,"value":"function getChangeColor(changeString) {\n if (changeString.startsWith('-')) {\n return 'red';\n } else {\n return 'green';\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1789,"value":"logPercentChangeForWeekWORLD(dateWORLD, stockDataWORLD)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1785,"value":"getChangeColor(\"-6.46%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2033,"value":"viewof projection = projectionInput({\n name: \"projection\",\n value:\n new URLSearchParams(html``.search).get(\"Robinson\") || \"Robinson\"\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2035,"value":"import { projectionInput } from \"@fil/d3-projections\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2518,"value":"viewof replay = html`