3e:null 3f:["$","title",null,{"children":"Layoffs Interactive Bubble Chart | aakashshameer | Observable"}] 45:T78e, chart = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, noSplitHeight + margin.top + margin.bottom]); const wrapper = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // Add x-Axis wrapper.append('g') .call(xAxis) .attr('transform', `translate(${-50}, ${margin.top})`); // add y-Axis const yAxisContainer = wrapper.append('g') .attr('transform', `translate(-25,0)`); const circles = wrapper.append('g') .attr('className', 'circles') .selectAll('circle') .data(layoffs) .join('circle') .attr('r', d => r(d.layoff_num)) //.attr('fill', d => color(d.industry)) .attr('x', d => x(d.industry)) .attr('y', d => y(d.date) + y.bandwidth() / 2) force.on('tick', () => { circles .transition() .ease(d3.easeLinear) .attr('cx', d => d.x) .attr('cy', d => d.y); }) invalidation.then(() => force.stop()); return Object.assign(svg.node(), { update(split) { let height = split ? splitHeight : noSplitHeight; let years = [...yearGroups.keys()].sort() // Update height of svg object const t = d3.transition().duration(750); svg.transition(t).attr('viewBox', [0, 0, width, height]); // Update domain of y-Axis y.domain(split ? years : ['All']); y.range(split ? [splitHeight - margin.top - margin.bottom, 0] : [noSplitHeight - margin.top - margin.bottom, 0]); yAxisContainer.call(yAxis, y, split ? years : ['All']) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('.tick line').remove()); // Update simulation force.force('y', split ? d3.forceY(d => y(d.year) + y.bandwidth() / 2) : d3.forceY((noSplitHeight - margin.top - margin.bottom) / 2)); // force.nodes(layoffs); force.alpha(1).restart(); } }); }46:[{"id":"9c35065858ebba3e328a49b49bbb79fad6ce552ac8252d7c64a914101621a556e02f36e5dd51069de7c48d08dc909536999acdb12a57066bda451d7bddd2ab6d","href":"https://static.observableusercontent.com/files/9c35065858ebba3e328a49b49bbb79fad6ce552ac8252d7c64a914101621a556e02f36e5dd51069de7c48d08dc909536999acdb12a57066bda451d7bddd2ab6d","name":"layoffs_cleaned.csv","type":"text/csv","lastModified":1676331805429.056,"size":79730}] 43:{"id":"94da2c9f2612e4a7","slug":null,"title":"Layoffs Interactive Bubble Chart","thumbnail":"7b5b0d32d634fcf2a36146e74c983b715201f2dca7ecf3453df71ef7101366a5","access_level":"public","create_time":"$D2023-02-13T23:43:25.429Z","update_time":"$D2023-02-14T00:05:08.896Z","view_time":null,"first_public_time":"$D2023-02-13T23:43:25.429Z","has_unpublished_edits":null,"fork":{"id":"0843ef08f88c0010","slug":null,"title":"Layoffs Interactive Bubble Chart","owner":{"id":"617e591403ca6d31","login":"melissamitchell8080","name":"Melissa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"07b464448671abc3","login":"aakashshameer","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b31526aa9f46ffeb060e0e39aa5c19c087c5c240821057daa0aafa80dfbdfc80","tier":"starter_2024","bio":"","following":false},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7be085cad8463c5c","login":"aakashshameer","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b31526aa9f46ffeb060e0e39aa5c19c087c5c240821057daa0aafa80dfbdfc80","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"7be085cad8463c5c","login":"aakashshameer","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b31526aa9f46ffeb060e0e39aa5c19c087c5c240821057daa0aafa80dfbdfc80","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Layoffs Interactive Bubble Chart","cells":[{"id":0,"value":"# Layoffs Interactive Bubble Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"viewof split = {\n const form = html``;\n form.oninput = () => form.value = Array.from(form.querySelectorAll(\"input\"))\n .find(d => d.checked).value === \"1\"\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"noSplitHeight = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"splitHeight = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"chart.update(split);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"force = d3.forceSimulation(layoffs)\n .force('charge', d3.forceManyBody().strength(0))\n .force('x', d3.forceX().x(d => x(d.industry)))\n .force('y', d3.forceY(d => y(d.year)))\n .force('collision', d3.forceCollide().radius(d => r(d.layoff_num) + 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"groups = d3.group(layoffs, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"x = d3.scaleBand()\n .domain(['Consumer', 'Retail', 'Transportation', 'Finance', 'Healthcare', 'Food', 'Real Estate', 'Travel', 'Education', 'Sales'])\n .range([0 + 100, innerWidth + 100])\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"y = d3.scaleBand()\n .domain(['All'])\n .range([noSplitHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"r = d3.scaleSqrt()\n .domain(d3.extent(layoffs, d => d.layoff_num))\n .range([1, 10])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"xAxis = g => g\n .call(d3.axisTop(x))\n .call(g => g.select('.domain').remove())\n .call(g => g.append('text')\n .attr('x', 500)\n .attr('y', 15)\n .attr('font-weight', 'bold')\n .attr('fill', 'currentColor')\n .attr('text-anchor', 'end')\n .text('Industry'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"yAxis = g => g\n .call(d3.axisLeft(y).ticks(8))\n .call(g => g.select('.domain').remove())\n .call(g => g.selectAll('.tick line').remove())\n .call(g => g.append('text')\n .text('Year'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"innerWidth = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"margin = ({top: 30, right: 0, left: 70, bottom: 50})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"yearGroups = d3.group(layoffs, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"layoffs = d3.csvParse(await FileAttachment('layoffs_cleaned.csv').text(), d => {\n return {\n year: +d.date,\n layoff_num: +d.total_laid_off,\n company: d.company,\n industry: d.industry\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"