25:["$","title",null,{"children":"Work stoppages timeline (1993 - 2021) | Proud Taranat | Observable"}] 49:Tfdb,chart2 = { const tooltip = d3.select("body").append("div").attr("class", "tooltip"); const r = 5; const svg = d3.select(DOM.svg(width, 1375)); svg.append("rect") .attr("width", width) .attr("height", 1500) .attr("fill", backgroundColor) const path = svg //create a path .append("path") .attr( "d", `m100 ${lineSpacing} ${lineWidth},0 0,${lineSpacing} -${lineWidth},0 0, ${lineSpacing} ${lineWidth}, 0 0,${lineSpacing} -${lineWidth},0 0, ${lineSpacing} ${lineWidth},0 0,${lineSpacing} -${lineWidth},0 0,${lineSpacing} ${lineWidth}, 0 0` ) .attr("stroke", "#dbdbdb") .attr("fill", "none") .attr("stroke-width", 2); const pathLength = path.node().getTotalLength(); //get total length of path const pathNode = path.node(); //returns the first element in the selection (just the path in this case) const xScale = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.year)) .range([0, pathLength]); //year labels const uniqueDataCalc = _.map(data, (d) => { return { ...d, year: d.year, xPosYear: pathNode.getPointAtLength(xScale(d.year)).x, //get the x coordinate of each year point, scaled to xscale yPosYear: pathNode.getPointAtLength(xScale(d.year)).y, }; }); // circles const dataNew = _.map(data, (d) => { return { ...d, value: radiusScale(parseInt(d.number_of_workers.replace(/,/g, ''))), year: d.year, ownership: d.ownership, xPos: pathNode.getPointAtLength(xScale(d.year)).x, yPos: pathNode.getPointAtLength(xScale(d.year)).y, }; }); const simulation = d3 .forceSimulation(dataNew) .force( "x", d3 .forceX() .x((d) => d.xPos) .strength(0.3) ) .force( "y", d3 .forceY() .y((d) => d.yPos) .strength(1) ) .force("collide", d3.forceCollide((d) => d.value + 1)) .stop(); _.times(1000, () => { simulation.tick(); }); //place circles const circles = svg .selectAll("circle") .data(dataNew) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.value) .attr("fill", (d) => colorScale(d.ownership)) //tooltips circles.on("mouseover", (event, d) => { const current = event.currentTarget; d3.select(current) .raise() .attr("fill", "#292929"); tooltip .style("visibility", "visible") .style("top", event.y + "px") .style("left", event.x + "px") .html(`

${d.organizations_involved}

${d.number_of_workers} Workers

`); }); circles.on("mouseout", (event, d) => { const current = event.currentTarget; d3.select(current).attr("fill", (d) => colorScale(d.ownership)); tooltip.style("visibility", "hidden"); }); // svg .selectAll("text") .data(uniqueDataCalc) .join("text") .attr("fill", "#8a8a8a") .attr("x", (d) => d.xPosYear - 17) .attr("y", (d) => ((d.year >= 1991 && d.year <=1997) ? d.yPosYear + 60 : (d.year >= 2002 && d.year <= 2017)? d.yPosYear + 45: (d.year == 2018 || d.year == 2019 ||d.year == 2000 || d.year == 1998)? d.yPosYear + 65: d.yPosYear + 50)) .text((d) => d.year); //legend svg .append("circle") .attr("cx", 110) .attr("cy", 50) .attr("r", 7) .style("fill", darkblue); svg .append("circle") .attr("cx", 275) .attr("cy", 50) .attr("r", 7) .style("fill", lightblue); svg .append("circle") .attr("cx",460 ) .attr("cy", 50) .attr("r", 7) .style("fill", yellow); svg .append("text") .attr("x", 123) .attr("y", 50) .text("Local government") .style("font-size", "15px"); svg .append("text") .attr("x", 288) .attr("y", 50) .text("Private industry") .style("font-size", "15px"); svg .append("text") .attr("x", 473) .attr("y", 50) .text("State government") .style("font-size", "15px"); return svg.node(); }4a:[{"id":"701d616e231081df4ad82a2ed1d6259431386f745dd4abc962ba04c49a449d9714a9980f83808c624b6fc4bbff68aca9e68ad26b22b83e6e0136cc9acb17c103","href":"https://static.observableusercontent.com/files/701d616e231081df4ad82a2ed1d6259431386f745dd4abc962ba04c49a449d9714a9980f83808c624b6fc4bbff68aca9e68ad26b22b83e6e0136cc9acb17c103","name":"work stoppages.xlsx - 1993-2021 (1).csv","type":"text/csv","lastModified":1673030272152.272,"size":98045}] 29:{"id":"293b0aeffab6fd8b","slug":null,"title":"Work stoppages timeline (1993 - 2021)","thumbnail":"d8dfb42049a0d58cb6b80dee77cf774650eeb315a81c9b0b1b374cbe05942e43","access_level":"public","create_time":"$D2023-01-06T02:37:18.477Z","update_time":"$D2023-01-09T05:59:32.333Z","view_time":null,"first_public_time":"$D2023-01-06T02:37:18.477Z","has_unpublished_edits":null,"fork":{"id":"44fe97e806f6f4a3","slug":null,"title":"Force Simulations","owner":{"id":"c745d6df528b2303","login":"ptaranat","name":"Proud Taranat"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c745d6df528b2303","login":"ptaranat","name":"Proud Taranat","avatar_url":"https://avatars-next.observableusercontent.com/99887609c7f6918c0b83c8a4a5766c43c15349fc20cbdae2bbdbe8d031c6dd93","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":353,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1a895ed0dbf506a","login":"ptaranat","name":"Proud Taranat","avatar_url":"https://avatars-next.observableusercontent.com/99887609c7f6918c0b83c8a4a5766c43c15349fc20cbdae2bbdbe8d031c6dd93","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e1a895ed0dbf506a","login":"ptaranat","name":"Proud Taranat","avatar_url":"https://avatars-next.observableusercontent.com/99887609c7f6918c0b83c8a4a5766c43c15349fc20cbdae2bbdbe8d031c6dd93","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d3754712e072bc22","slug":"d3","title":"d3","owner":{"id":"c745d6df528b2303","login":"ptaranat","name":"Proud Taranat"}},"type":"notebook","body":{"titling":"auto","title":"Work stoppages timeline (1993 - 2021)","cells":[{"id":0,"value":"# Work stoppages timeline (1993 - 2021)\nCredit https://observablehq.com/@mashfedorova/african-american-achievements-black-history-month\n\nThe U.S Burea Labor Statistics' Work Stoppages program documents and publishes data on major work stoppages involving 1000 or more workers lasting one full shift or longer. Using data from my [previous notebook](https://observablehq.com/d/37849e3b90b754f5),\nI plotted this data on a timeline, with the added dimension of circle radius to represent the number of workers involved at each stoppage. \n\nHover over the data points to see more information. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"colorScale =d3.scaleOrdinal()\n .domain(categories)\n .range([yellow, darkblue, lightblue, lightblue])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"backgroundColor = \"#F4F4F4\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"darkblue = \"#FB5408\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"lightblue = \"#FDB90B\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"yellow = \"#8CAECC\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"categories = [\"State government\", \"Local government\", \"Private industry\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"color = ['#FDF06F', '#EF3E4A', '#17C37B']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"radiusScale = d3.scaleLinear() \n .domain([1000, 136000])\n .range([5,25])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"uniqueDataCalc2 = _.map(data, (d) => {\n return {\n ...d,\n value: parseInt(d.number_of_workers.replace(/,/g, ''))/1000,\n year: d.year,\n\n\n };\n });\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"data = workstoppages","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"rawData = { //generate random dataset\n let array = []\n for (let i = 0; i < 40; i++) {\n array.push({\n value: Math.round(Math.random() * (9 - 5)) + 5,\n year: Math.round(Math.random() * (2010 - 2000)) + 2000\n });\n}\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"workstoppages = await FileAttachment(\"work stoppages.xlsx - 1993-2021 (1).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"workstoppages","database":"$undefined"},{"id":296,"value":"style = html`\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"lineWidth = width-250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"lineSpacing = 175","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null