29:null 2a:["$","title",null,{"children":"Second Beeswarm Timeline for 'Nature-Based Solutions' on Youtube | bea92 | Observable"}] 2f:Tedf,beeswarm = (data, date, type, toColor, count, title) => { ////// Chart configuration const radius = d3.scaleSqrt() .domain(d3.extent(data, (d) => d.count)) .range([2, 20]) console.log(radius.domain()) const padding = 1; const size = { w: 900, h: 1200}; const margin = { top: 20, bottom: 30, left: 130, right: 100 }; const xScale = d3 .scaleTime() .range([0, size.w]) .nice() .domain(sliderDates); const radiusScale = d3.scaleLinear; const colorScale = d3.scaleOrdinal() .domain(["Education", "Personal", "Coalition", "Corporate", "NGO", "Media", "Gov", "Research/Policy", "Funded project", "Event", "To categorize"]) .range(["#dddddd", "#dddddd", "#dddddd", "#e87657", "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd"]) // [...new Set(data.map((d) => d.toColor))], // d3.schemeTableau10 //) let category = [...new Set(data.map((d) => d[type]))]; category.reverse(); ////// Chart drawing const svg = d3.select( DOM.svg( size.w + margin.left + margin.right, size.h + margin.top + margin.bottom ) ); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // x axis const xAxis = d3.axisBottom().scale(xScale); g.append("g") .attr("transform", `translate(0, ${size.h - margin.top})`) .style("font-size", "12px") .style("font-family", "Spectral") .call(xAxis) .select(".domain") .remove(); // y scale const yScale = d3 .scalePoint() .domain(category) .range([0, size.h - margin.top - margin.bottom]); const yAxis = d3.axisLeft().scale(yScale); g.append("g") .attr("transform", `translate(0,0)`) .style("font-size", "12px") .style("font-family", "Spectral") .call(yAxis) .select(".domain") .remove(); //Tooltip const toolTip = d3.select("body").append("div").attr("class", "toolTip"); // mouseover function function nodeMouseOver(event, d) { toolTip .style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html( `

${d.title}

Views

${d.count}

Date

${d.date} `); d3.select(event.target).style("cursor", "pointer"); } // mouseout function function nodeMouseOut(event, d) { // Hide tooltip on mouse out toolTip.style("display", "none"); // Hide toolTip // Optional cursor change removed d3.select(event.target).style("cursor", "default"); // Optional highlight removed d3.select(event.target) .transition() .attr("fill", (d) => colorScale(d[toColor])); } // circles const bee = g .append("g") .attr("class", "bee") .attr("transform", `translate(0,0)`); const nodes = bee .selectAll("circle") .data(data) .enter() .append("circle") .attr("class", "node") .attr("cy", (d) => { d.y = size.h / 2; return d.y;}) .attr("cx", (d) => { d.x = xScale(d[date]); return d.x;}) .attr( 'r', (d) => radius(d.count)) .attr("fill", (d) => colorScale(d.channelType)) .attr("fill-opacity", 1) .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut); let simulation = d3 .forceSimulation() .force("collide", d3.forceCollide((d) => radius(d.count)+ padding)) .force("x", d3.forceX((d) => d.x).strength(1)) .alphaMin(0.00001); if (type) { simulation.force("y", d3.forceY((d) => yScale(d[type])).strength(1)); } else { simulation.force("y", d3.forceY((d) => d.y).strength(1)); } simulation.nodes(data).on("tick", () => { nodes.attr("cx", (d) => d.x) .attr("cy", (d) => d.y); }); return svg.node(); }30:[{"id":"77d8c7bf3b9cfb5a5493c825a9d134b95acb106eed8175b44b98bd68c56ede5ac96a0489f2a55e143771813ad8e6d0399d4586d2b0467637e4cc74a330a2c8ba","href":"https://static.observableusercontent.com/files/77d8c7bf3b9cfb5a5493c825a9d134b95acb106eed8175b44b98bd68c56ede5ac96a0489f2a55e143771813ad8e6d0399d4586d2b0467637e4cc74a330a2c8ba","name":"Combined data - beeswarm_visualization (4)@1.csv","type":"text/csv","lastModified":1646843416617.032,"size":2728303}] 2d:{"id":"cae3235b609bb0c5","slug":null,"title":"Second Beeswarm Timeline for 'Nature-Based Solutions' on Youtube","thumbnail":"a114856e0b870fef45a855f3ea9b1cda54dcdd865ff259968f17683d6c8df1fc","access_level":"public","create_time":"$D2022-03-08T09:30:33.603Z","update_time":"$D2023-05-11T18:46:40.386Z","view_time":null,"first_public_time":"$D2023-05-11T18:09:30.334Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d8ff886575f125bc","login":"bea92","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d46171df089a0d5cd37cc781fd08ff9ad2e929f2251528879c6bbd74fc77d336","tier":"starter_2024"},"version":1006,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7f74505b256e288","login":"bea92","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d46171df089a0d5cd37cc781fd08ff9ad2e929f2251528879c6bbd74fc77d336","tier":null}],"members":[{"type":"individual","id":"5cfb040d7104df94","login":"angelesbri1s","name":"","avatar_url":"https://avatars-next.observableusercontent.com/00a3dd4d61a400bdc4c9a54495539c113bc5b3b9ab8cee779df971ec84f6dfcc","tier":null,"role":"editor"},{"type":"individual","id":"b7f74505b256e288","login":"bea92","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d46171df089a0d5cd37cc781fd08ff9ad2e929f2251528879c6bbd74fc77d336","tier":null,"role":"editor"},{"type":"individual","id":"3e9bd3608cda79b5","login":"thaisouz","name":"Thais Lobo","avatar_url":"https://avatars-next.observableusercontent.com/070b0d9fae5c6a70b27432d2049f3d7acd0ef62ba6e806fa846fdc094fb78ea0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Second Beeswarm Timeline for 'Nature-Based Solutions' on Youtube","cells":[{"id":0,"value":"# Second Beeswarm Timeline for 'Nature-Based Solutions' on Youtube\n\nThis is a private notebook built on top of the Beeswarm Timeline by @danielefadda","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"viewof slider = rangeSlider({\n min: 0,\n max: d3.timeDay.count(start, end),\n step: 1,\n format: d => formatDate(d3.timeDay.offset(start, d)),\n title: 'Pick a date range',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"colorScale = d3.scaleOrdinal(\n [...new Set(data.map((d) => d.channelType))],\n d3.schemeTableau10\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"sliderDates = slider.map(d => d3.timeDay.offset(start, d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"legend = Swatches(d3.scaleOrdinal()\n .domain([\"Corporate\"])\n .range([\"#e87657\"]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"//beeswarm(dataset, assex, assey, colore, dimensione)\nchart = beeswarm(data, \"date\", \"videoCategoryLabel\", \"channelType\", \"viewCount\", \"videoTitle\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"start = new Date(2011, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"end = new Date(2022, 1, 31)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"dataFile = FileAttachment(\"Combined data - beeswarm_visualization (4)@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"parseDate = d3.timeParse(\"%Y-%m-%dT%H:%M:%SZ\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"formatDate = d3.timeFormat(\"%Y-%m-%dT%H:%M:%SZ\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"data = dataFile.map((d) => {\n return {\n ...d,\n date: parseDate(d.date),\n videoCategoryLabel: d.videoCategoryLabel,\n count:+d.viewCount,\n title: d.videoTitle,\n channelType: d.channelType\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"import {Legend, Swatches} from \"@d3/color-legend\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"import { rangeSlider as rangeSlider } from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

${d.title}

Views

Tags

Date