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":1699899497370.011,"size":2728303},{"id":"d9668b759ba69c21441b1b26188048999f28a0933bd4f954f91af55d9fcca05632cda7b079ecf4109548c5be6d2ae0c28568a1096da1c15951ef7f7daee28f23","href":"https://static.observableusercontent.com/files/d9668b759ba69c21441b1b26188048999f28a0933bd4f954f91af55d9fcca05632cda7b079ecf4109548c5be6d2ae0c28568a1096da1c15951ef7f7daee28f23","name":"entitiesTypePatternDay.csv","type":"text/csv","lastModified":1699899610283.143,"size":7063512}] 2d:{"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"},{"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"},{"id":880,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"colorScale = d3.scaleOrdinal(\n [...new Set(data.map((d) => d.channelType))],\n d3.schemeTableau10\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":748,"value":"sliderDates = slider.map(d => d3.timeDay.offset(start, d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":872,"value":"legend = Swatches(d3.scaleOrdinal()\n .domain([\"Corporate\"])\n .range([\"#e87657\"]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"//beeswarm(dataset, assex, assey, colore, dimensione)\nchart = beeswarm(data, \"date\", \"videoCategoryLabel\", \"channelType\", \"viewCount\", \"videoTitle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"start = new Date(2011, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"end = new Date(2023, 7, 31)","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## data","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"dataFile = FileAttachment(\"entitiesTypePatternDay.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"parseDate = d3.timeParse(\"%Y-%m-%dT%H:%M:%SZ\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"formatDate = d3.timeFormat(\"%Y-%m-%dT%H:%M:%SZ\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":21,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"d3 = require(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"import {Legend, Swatches} from \"@d3/color-legend\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":751,"value":"import { rangeSlider as rangeSlider } from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}

${d.title}

Views

Tags

Date