2b:null 2c:["$","title",null,{"children":"Barbie Professions Over The Years | shira-sun | Observable"}] 31:T870,chart = { let filteredData; filteredData = [].concat.apply([], dataByRegion.map(d=>d.values)); filteredData.forEach(d=> d.color = d3.color(color(d.region))) let parent = this; parent = document.createElement("div"); const el = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = d3.select(el) .attr('height', height) .attr('width', width); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "civ") const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); groups.attr("transform", (d,i)=>`translate(0 ${y(occupations.indexOf(d.occupation))})`) const seen = new Set groups .each((d, i, group) => { const el = d3.select(group[i]); getRect(d, el, !seen.has(d.occupation)) seen.add(d.occupation); }) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .call(axisBottom) svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); line.attr("transform", `translate(${x} 0)`); y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; return parent }32:[{"id":"b2b8a27fb440f331f811359e412f4b8aea59a5d08e91b6d76687c750982caf3ec1f6d4e9e3abec5d92dc538c5a9ca7b46196175d0bfbb2c2d3909913f8e9d956","href":"https://static.observableusercontent.com/files/b2b8a27fb440f331f811359e412f4b8aea59a5d08e91b6d76687c750982caf3ec1f6d4e9e3abec5d92dc538c5a9ca7b46196175d0bfbb2c2d3909913f8e9d956","name":"civilization timelines - civilization timelines@2.csv","type":"text/csv","lastModified":1607466772140.655,"size":2787},{"id":"d8ded85708461877ac658c9943c5df3efe897454782857d57a89e32c3b5f6db340a86d0870a5def602951dfc75c1d48d36ca13e26dc5bd22d082988fa60020ae","href":"https://static.observableusercontent.com/files/d8ded85708461877ac658c9943c5df3efe897454782857d57a89e32c3b5f6db340a86d0870a5def602951dfc75c1d48d36ca13e26dc5bd22d082988fa60020ae","name":"civilization timelines - civilization timelines-2.csv","type":"text/csv","lastModified":1607479021795.556,"size":20533}] 2f:{"id":"df69f87575436e2b","slug":"barbie-professions-over-the-years","title":"Barbie Professions Over The Years","thumbnail":"389c1ba6c6421f8bedae70c0571f7b3dca9c9ea722579c756628cf2843ea877e","access_level":"public","create_time":"$D2020-12-06T18:36:55.849Z","update_time":"$D2020-12-09T02:12:19.128Z","view_time":null,"first_public_time":"$D2020-12-09T17:01:53.182Z","fork":{"id":"6f8f62930d4149f9","slug":"world-history-timeline","title":"World History Timeline","owner":{"id":"eb1622af3a3424c4","login":"tezzutezzu","name":"Danilo Di Cuia"}},"stars":1,"starred":false,"owner":{"type":"team","id":"543e1c00a8c4af45","login":"shira-sun","name":"","avatar_url":"https://avatars-next.observableusercontent.com/97463dd463938249a6dfae1797ee583ce13e58d9d579b823969cb98b1dd00e83","tier":"starter_2024"},"version":916,"publish_version":916,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd932e3ce4dc4a5d","login":"shira-sun","name":"","avatar_url":"https://avatars-next.observableusercontent.com/97463dd463938249a6dfae1797ee583ce13e58d9d579b823969cb98b1dd00e83","tier":null}],"members":[{"type":"individual","id":"bd932e3ce4dc4a5d","login":"shira-sun","name":"","avatar_url":"https://avatars-next.observableusercontent.com/97463dd463938249a6dfae1797ee583ce13e58d9d579b823969cb98b1dd00e83","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Barbie Professions Over The Years","cells":[{"id":0,"value":"md`# Barbie Professions Over The Years \nA project by Akshita and Shira\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":698,"value":"getTooltipContent = function(d) {\nreturn `${d.occupation}\n
\n

\n${d.industry}\n
\n${formatDate(d.start)} - ${formatDate(d.end)}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"height = 2500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"\n y= d3.scaleBand()\n .domain(d3.range(occupations.length))\n .range([0,height - margin.bottom - margin.top])\n .padding(0.2)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"x = d3.scaleLinear()\n .domain([d3.min(data, d => d.start), d3.max(data, d => d.end)])\n .range([0, width - margin.left/2 - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"createTooltip = function(el) {\n el\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"font\", \"11px sans-serif\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"getRect = function(d, el, showText){\n const sx = x(d.start);\n const w = x(d.end) - x(d.start);\n const isLabelRight =(sx > width/2 ? sx+w < width : sx-w>0);\n\n el.style(\"cursor\", \"pointer\")\n\n el\n .append(\"rect\")\n .attr(\"x\", sx)\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", w)\n .attr(\"fill\", d.color);\n\n if (showText) {\n el\n .append(\"text\")\n .text(d.civilization)\n .attr(\"x\",isLabelRight ? sx-5 : sx+w+5)\n .attr(\"y\", 2.5)\n .attr(\"fill\", \"black\")\n .style(\"text-anchor\", isLabelRight ? \"end\" : \"start\")\n .style(\"dominant-baseline\", \"hanging\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"dataByRegion = d3.nest().key(d=>d.region).entries(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"axisBottom = d3.axisBottom(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"axisTop = d3.axisTop(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"formatDate = d=> d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"csv =d3.csvParse(await FileAttachment(\"civilization timelines - civilization timelines-2.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"data = csv.map(d=>{\nreturn {\n ...d,\n occupation: d.civilization,\n industry: d.region,\n start: +d.start,\n end: +d.end\n}\n}).sort((a,b)=> a.start-b.start);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"industries = d3.nest().key(d=>d.industry).entries(data).map(d=>d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"occupations = Array.from(new Set(data.map(d => d.occupation)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"color = d3.scaleOrdinal(d3.schemeRdPu[9]).domain(industries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"html`CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"