25:["$","title",null,{"children":"Work Stoppages histogram | Proud Taranat | Observable"}] 49:Ta96,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("Day"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("amount"); var groups = svg.selectAll(".groups") .data(yeardata) .enter() .append("g") .attr("transform", function(d) { return "translate(" + x(d.year) + ".0)"; }) var dots = groups.selectAll("circle") .data(function(d) { return d3.range(1, +d.height + 1) }) .enter().append("circle") .attr("class", "dot") .attr("r", 4) .attr("cy", function(d) { return y(d) }) .style("fill", "blue") groups.selectAll("circle") .data((d) => d.values) .style("fill", (d) => scaleColour(d.ownership)) .on('mouseover', function(d, i) { // Select the element by class, use .text to set the content d3.select(".infobox .orgs").text(d.organizations_involved); d3.select(".infobox .states").text(d.states); d3.select(".infobox .workers").text(d.number_of_workers); // Show the infobox d3.select(".infobox").style('visibility', 'visible'); // make the mouseover'd element // bigger and red d3.select(this) .transition() .duration(100) .attr('r', 8) }) .on('mouseout', function(d, i) { // Hide the infobox d3.select(".infobox").style('visibility', 'hidden'); // return the mouseover'd element // to being smaller and black d3.select(this) .transition() .duration(100) .attr('r', 4) }) const legendG = svg.append('g') .attr('class', 'legend'); legendG .selectAll('circle') .data(categories) .join('circle') .attr('r', 4) .attr('cx', (d, i) => (10 + 36) + 150 * i) .attr('cy', margin.top+30) .style('fill', d => scaleColour(d)); legendG .selectAll('text') .data(categories) .join('text') .attr('x', (d, i) => (10 + 50) + 150 * i) .attr('y', margin.top+30) .text(d => d) .style('font-size', '12px') .style('font-family', 'sans-serif') .style('text-transform', 'capitalize') .style('fill', '#fffff'); return svg.node() }4a:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1672891793887.223,"size":13506},{"id":"efececbaa6e61a6be4d79900d59a0fccb55517e47df8e7bde8febaf5fe1c089c92bcfe40c5fbd8cff6524ff6b41cff221e9dc801095eb530c6bb168e06be4fca","href":"https://static.observableusercontent.com/files/efececbaa6e61a6be4d79900d59a0fccb55517e47df8e7bde8febaf5fe1c089c92bcfe40c5fbd8cff6524ff6b41cff221e9dc801095eb530c6bb168e06be4fca","name":"workstoppages.csv","type":"text/csv","lastModified":1672891834244.084,"size":98061},{"id":"efececbaa6e61a6be4d79900d59a0fccb55517e47df8e7bde8febaf5fe1c089c92bcfe40c5fbd8cff6524ff6b41cff221e9dc801095eb530c6bb168e06be4fca","href":"https://static.observableusercontent.com/files/efececbaa6e61a6be4d79900d59a0fccb55517e47df8e7bde8febaf5fe1c089c92bcfe40c5fbd8cff6524ff6b41cff221e9dc801095eb530c6bb168e06be4fca","name":"work stoppages.xlsx - 1993-2021.csv","type":"text/csv","lastModified":1672891884397.795,"size":98061},{"id":"701d616e231081df4ad82a2ed1d6259431386f745dd4abc962ba04c49a449d9714a9980f83808c624b6fc4bbff68aca9e68ad26b22b83e6e0136cc9acb17c103","href":"https://static.observableusercontent.com/files/701d616e231081df4ad82a2ed1d6259431386f745dd4abc962ba04c49a449d9714a9980f83808c624b6fc4bbff68aca9e68ad26b22b83e6e0136cc9acb17c103","name":"work stoppages.xlsx - 1993-2021 (1).csv","type":"text/csv","lastModified":1672891974919.657,"size":98045}] 29:{"id":"37849e3b90b754f5","slug":null,"title":"Work Stoppages histogram","thumbnail":"0d17b26fd6b8b53ca93791f4172348472203beed6a41807b8fff0272f831b5ad","access_level":"public","create_time":"$D2023-01-05T04:09:53.887Z","update_time":"$D2023-01-06T20:48:23.609Z","view_time":null,"first_public_time":"$D2023-01-05T04:09:53.887Z","has_unpublished_edits":null,"fork":{"id":"6d7c773a6d3673b0","slug":"d3-scatterplot","title":"D3 scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"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":555,"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":0,"collection":{"id":"d3754712e072bc22","slug":"d3","title":"d3","owner":{"id":"c745d6df528b2303","login":"ptaranat","name":"Proud Taranat"}},"type":"notebook","body":{"titling":"auto","title":"Work Stoppages histogram","cells":[{"id":0,"value":"# Work Stoppages histogram\nI came across a data set by the U.S Burea Labor Statistics' Work Stoppages program, which documents and publishes data on major work stoppages involving 1000 or more workers lasting one full shift or longer. I'm plotting this data on a stacked dot histogram to see how work stoppage trends have changed over time. \n

Hover over each data point to see more detailed information. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"
\n
Organizations involved: year
\n
States: published
\n
Workers involved: published
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"height =700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"x = d3.scaleLinear()\n .domain(d3.extent(rawdata, d => d.year)).nice()\n .range([margin.left, width/2 - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"y = d3.scaleLinear()\n .domain([0,45])\n .range([height - margin.bottom, margin.top + 60])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"## color\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"scaleColour = d3.scaleOrdinal()\n .domain(categories)\n .range([green, yellow,blue,blue])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"categories = ['Private industry','Local government','State Government']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"green = '#61BFAD'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"blue = '#167C80'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"red = '#E54B4B'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"yellow = '#F0CF61'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"## tooltip\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"tooltip = d3.select(\"body\").append(\"div\").attr(\"class\", \"tooltip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"# data wrangling\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"rawdata = 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":"rawdata","database":"$undefined"},{"id":138,"value":"yeardata = nestedByYear.map(item => {\n return {\n ...item,\n height: item.values.length,\n year: parseInt(item.key)\n \n }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"nestedByYear = d3.nest()\n .key(d => d.year)\n .sortValues((a, b) => d3.ascending(a.ownership, b.ownership))\n .entries(rawdata)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"data = rawdata","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":" ### libraries\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null