2e:null 2f:["$","title",null,{"children":"Transition over time | Chathura Jayalath | Observable"}] 34:T11ae,function draw_transition_times(in_data, in_start_time, in_end_time, sample_freq, in_tick_every=1, global_scale = false){ const svgElement = DOM.svg(width, height); const svg = d3.select(svgElement); const xScale = d3.scaleTime().domain([ in_start_time, in_end_time]).range([margins.left, width - margins.right]) const xAxis = d3.axisBottom(xScale).ticks(((in_end_time - in_start_time) / 86400000) > 2 ? d3.timeDay.every(in_tick_every) : d3.timeHour.every(in_tick_every)) const yScale2 = d3.scaleLinear().domain([0, all_transition_types.length]).range([height - 20 - margins.bottom, margins.top]) const yScale = d3.scaleOrdinal().domain(all_transition_types).range(d3.ticks(0, all_transition_types .length, all_transition_types.length).map(x => yScale2(x))) //const yAxis = d3.axisRight(yScale)//.tickFormat((d,i) => i) //.tickFormat((d,i) => ` (${in_author_posts[i][1]}) ${d}`) // title svg.append("g") .attr("transform", `translate(${100}, ${20})`) .append("text") .style("font-size", "26px") .text("Transition overtime (sample rate = "+ sample_freq + "Hour " + ((global_scale)? ", Scaled by " + global_scale : "") + ")") // x-axis svg.append("g") .style("font-size", "16px") .attr("transform", `translate(${margins.left}, ${height - margins.bottom})`) .call(xAxis.tickSize(5)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "translate(0,10) rotate(80)") .style("text-anchor", "start") // data to circles for(let idx=0; idx < all_transition_types.length; ++idx){ const date_series = in_data.filter(x => x.Trans == all_transition_types[idx]).map(x => x.Date) svg.append("g") .selectAll("circle") .data(date_series) .join("circle") .attr("r", 5) .attr("cx", d => xScale(d)) .attr("cy", d => yScale(all_transition_types[idx]) + 5 + 10 * Math.random()) .attr("fill", d => color_map[all_transition_types[idx]]) .attr("opacity", 0.3) } // data to curves for(let idx=0; idx < all_transition_types.length; ++idx){ const da = data.filter(x => x.Trans == all_transition_types[idx]).map(x => x.Date).sort((a,b) => a.getTime() - b.getTime()); const resampled_counts = count_datetime_samples(da, in_start_time, in_end_time, sample_freq); //const smooth_counts = generateKernalDensity(resampled_counts.map(d => d[1]), 0.3, 100, kernalEpanechnikovFactory()); const max_val = d3.max(resampled_counts, d => d[1]); const domain_max = (global_scale) ? global_scale : max_val; const yMiniScale = d3.scaleLinear().domain([0, domain_max]).range([0, 30]); svg.append("path") .datum(resampled_counts) .attr( "d", d3.line() .x(d => xScale(d[0])) .y(d => yScale(all_transition_types[idx]) - 10 - yMiniScale(d[1])) ) .style("stroke","black") .style("fill","none") .style("stroke-width",1) svg.append("g") .attr("transform", `translate(${0}, ${yScale(all_transition_types[idx]) - 15})`) .append("text") .style("font-size", "16px") .text("Peak=" + max_val) } // y-axis // bottom svg.append("g") .style("font-size", "16px") .attr("transform", `translate(${margins.left + 10},10)`) .call(d3.axisRight(yScale).tickFormat((d,i) => "").tickSize(width - margins.left - margins.right)) .call(g => g.select(".domain") .remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2")) // tick label svg.append("g") .style("font-size", "16px") .attr("transform", `translate(${width - margins.right},0)`) .call(d3.axisRight(yScale).tickFormat((d,i) => d.replace("_to_", " → "))) //.tickSize(width - margins.left - margins.right)) .call(g => g.select(".domain") .remove()) . call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.0)) //.attr("stroke-dasharray", "2,2")) // top svg.append("g") .style("font-size", "16px") .attr("transform", `translate(${margins.left + 10},-10)`) .call(d3.axisRight(yScale).tickFormat((d,i) => "").tickSize(width - margins.left - margins.right)) .call(g => g.select(".domain") .remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2")) return svgElement; }35:Te93,function draw_events(in_data, in_author_posts, in_start_time, in_end_time, in_tick_every=1){ const svgElement = DOM.svg(width, height); const svg = d3.select(svgElement); const filtered_data = in_data.filter(d => (in_start_time <= d.Date) && (d.Date <= in_end_time)) const author_list = in_author_posts.map(d => d[0]) const xScale = d3.scaleTime().domain([in_start_time, in_end_time]).range([margins.left, width - margins.right]) const xAxis = d3.axisBottom(xScale).ticks(((in_end_time - in_start_time) / 86400000) > 2 ? d3.timeDay.every(in_tick_every) : d3.timeHour.every(in_tick_every))//.tickFormat(d3.timeFormat((d,i) => d <= "%b-%d")) const yScale2 = d3.scaleLinear().domain([0, author_list.length]).range([height - margins.bottom, margins.top]) const yScale = d3.scaleOrdinal().domain(author_list).range(d3.ticks(0, author_list.length, author_list.length).map(x => yScale2(x))) const yAxis = d3.axisRight(yScale).tickFormat((d,i) => ` (${in_author_posts[i][1]}) ${d}`) // x-axis svg.append("g") .style("font-size", "16px") .attr("transform", `translate(${margins.left},${height - margins.bottom + 10})`) .call(xAxis.tickSize(5)) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".35em") .attr("transform", "translate(0,10) rotate(80)") .style("text-anchor", "start"); // y-axis svg.append("g") .style("font-size", "16px") .attr("transform", `translate(${margins.left + 10},0)`) .call(yAxis.tickSize(width - margins.left - margins.right)) .call(g => g.select(".domain") .remove()) .call(g => g.selectAll(".tick line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2")) // event indicators svg.append("g") .selectAll("circle") .data(filtered_data) .join("circle") .attr("r", 7.5) .attr("cx", d => xScale(d.Date)) .attr("cy", d => yScale(d.Author)) .attr("fill", d => color_map[d.Sentiment]) .attr("opacity", 0.3) // ----------------- TOOLTIP --------------------------- const toolTip = svg.append("g").style("display","none") const toolTipRect = toolTip.append("rect") .attr("x", -10) // offset of tooltip .attr("y", 10) // offset of tooltip .attr("width",100) .attr("height",`${4 * 1.1}em`) .style("fill","lightyellow") .style("stroke","black") const toolTipTextElement = toolTip.append("text") .attr("x", 50) // offset of tooltip .attr("y", 62) // offset of tooltip .style("text-anchor","start") .style("font","12px sans-serif") .text("") function handle_enter_event(in_event, in_data) { d3.select(this) .style("stroke","black") .style("stroke-width",2) const [x,y] = d3.pointer(in_event, this); //console.log(1); let toolTipText = `${in_data.Author}\n${in_data.Sentiment}\n${d3.timeFormat("%Y %b %d")(in_data.Date)}\n${d3.timeFormat("%H:%M:%S")(in_data.Date)}`; toolTipTextElement .selectAll("tspan") .data(toolTipText.split(/\n/)) .join("tspan") .attr("x", (d,i) => i ? 10 : 0) .attr("y", (d,i) => `${3 + i * 1.1}em`) .style("font-weight", (_,i) => i ? null : "bold" ) .text(d => d) toolTip.attr("transform",`translate(${x},${y})`); toolTip.style("display", null) } function handle_exit_event() { d3.select(this) .style("stroke","none") .style("stroke-width",1) //console.log(2); toolTip.style("display","none") } svg.selectAll("circle") .on("touchmove mousemove", handle_enter_event) .on("touchend mouseleave", handle_exit_event); return svgElement; }36:[{"id":"fe610417b7d1c1331e61150b408ef18e1665941d595d100e51e7e2d18c29088c4c30039c591fa5130da7a13e88fb3107035d2e7db42ae28020e7c7a82fa611a7","href":"https://static.observableusercontent.com/files/fe610417b7d1c1331e61150b408ef18e1665941d595d100e51e7e2d18c29088c4c30039c591fa5130da7a13e88fb3107035d2e7db42ae28020e7c7a82fa611a7","name":"transition_times_negative_neutral_positive@2.csv","type":"text/csv","lastModified":1702318922828.689,"size":1838990}] 32:{"id":"d24a35405abd4e8b","slug":"transition-over-time","title":"Transition over time","thumbnail":"5b1020bf77e17dae1d8c4b82d5bb927914bc4f8f9c7b0ee495be0aa4bd4adc77","access_level":"public","create_time":"$D2023-12-11T14:33:25.826Z","update_time":"$D2024-04-25T14:09:53.858Z","view_time":null,"first_public_time":"$D2023-12-11T14:33:25.826Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024"},"version":797,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null}],"members":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null,"role":"editor"},{"type":"individual","id":"816c1f474a7f21fd","login":"xiaoxia","name":"Xiaoxia","avatar_url":"https://avatars-next.observableusercontent.com/36214e820074192dd493e3a9dc8780b8e85d1fdbdb984de942234a736d5e13a8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Transition over time","cells":[{"id":0,"value":"# Transition over time ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"draw_transition_times(data, new Date(\"2023-10-06T00:00:00Z\"), max_date, 1, 1, false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"draw_transition_times(data, new Date(\"2023-10-06T00:00:00Z\"), max_date, 1, 1, 320)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"draw_transition_times(data, new Date(\"2023-10-06T00:00:00Z\"), max_date, 6, 1, 65)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"draw_transition_times(data, new Date(\"2023-10-06T00:00:00Z\"), max_date, 1, 1, 59)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"transition_times_negative_neutral_positive1 = await FileAttachment(\"transition_times_negative_neutral_positive@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"transition_times_negative_neutral_positive1","database":"$undefined"},{"id":305,"value":"function count_datetime_samples(data_array, start_datetime, max_datetime, resample_freq_in_hours = 24){\n const resample_freq_milsecs = resample_freq_in_hours * MILSECS_PER_HOUR\n const datetime_index_length = 1 + Math.floor((max_datetime - start_datetime + resample_freq_milsecs) / resample_freq_milsecs)\n const datetime_index = Array(datetime_index_length).fill(0).map((x,i) => new Date(start_datetime.getTime() + resample_freq_milsecs * i))\n let sampled_data = Array(datetime_index_length).fill(0).map((x,i) => [datetime_index[i], 0]);\n let sampler_idx = 0;\n for(let data_idx = 0; data_idx < data_array.length; ++data_idx){\n let current_datetime = data_array[data_idx]\n while(current_datetime > datetime_index[sampler_idx] && sampler_idx < datetime_index_length){\n sampler_idx += 1;\n }\n if(current_datetime <= datetime_index[sampler_idx] && sampler_idx < datetime_index_length){\n sampled_data[sampler_idx][1] += 1\n }\n }\n return sampled_data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"//dens = generateKernalDensity(count_over_time.map(d => d[1]), 0.3, 100, kernalEpanechnikovFactory())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"function generateKernalDensity(inputArray, bandwidth, amplitude, kernalFunc) {\n let kernalStepSize = 0.10 // must be greater than 0\n let kernalStepsPerTick = Math.ceil(1/kernalStepSize)\n let xVals = Array.from(Array(Math.ceil((d3.max(inputArray) - d3.min(inputArray) + 2)) * kernalStepsPerTick).keys()).map(x => x * kernalStepSize + d3.min(inputArray) - 1)\n let points = Array.from(xVals)\n for (let i = 0; i < xVals.length; i++) {\n let theValue = 0\n for (let j = 0; j < inputArray.length; j++){\n let observedVal = inputArray[j]\n let shiftDist = xVals[i] - observedVal\n theValue += kernalFunc(shiftDist / bandwidth);\n }\n points[i] = [xVals[i], amplitude * theValue / (bandwidth * inputArray.length)]\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"function kernalEpanechnikovFactory(){\n return u => (Math.abs(u) < 1) ? 0.75 * ( 1 - (u * u) ) : 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margins = ({top: 10, bottom: 100, left: 20, right: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"min_date = d3.min(data, d => d.Date) // d3.timeParse(\"%Y-%m-%d\")(\"2023-10-05\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"max_date = d3.max(data, d => d.Date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color_map = ({\"negative_to_negative\": \"#ee4040\", \"negative_to_neutral\": \"#aa1055\", \"negative_to_positive\": \"#aa5510\", \"neutral_to_negative\": \"#5510aa\", \"neutral_to_neutral\": \"#4040ee\", \"neutral_to_positive\": \"#1055aa\", \"positive_to_negative\": \"#55aa10\", \"positive_to_neutral\": \"#10aa55\", \"positive_to_positive\": \"#40ee40\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"MILSECS_PER_HOUR = 3600000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"all_transition_types = [\"negative_to_negative\", \"negative_to_neutral\", \"negative_to_positive\", \"neutral_to_negative\", \"neutral_to_neutral\", \"neutral_to_positive\", \"positive_to_negative\", \"positive_to_neutral\", \"positive_to_positive\"] \n//[...[... new Set(data.map(x => x.Trans))]].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"data = transition_times_negative_neutral_positive1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"