2b:null 2c:["$","title",null,{"children":"Bar Chart Race, NSF Awards 2011-2019. | Aditi Mallavarapu | Observable"}] 31:Td6c,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bar-chart function BarChart(subdata, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop = 20, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 30, // the bottom margin, in pixels marginLeft = 40, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height = 400, // the outer height of the chart, in pixels xDomain, // an array of (ordinal) x-values xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] xPadding = 0.1, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "currentColor" // bar fill color } = {}) { // Compute values. const X = d3.map(subdata, x); const Y = d3.map(subdata, y); // Compute default domains, and unique the x-domain. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; xDomain = new d3.InternSet(xDomain); // Omit any data not present in the x-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(subdata, d => d); const T = title; title = i => T(O[i], i, subdata); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, 600]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("width", xScale.bandwidth()) ; if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", ".8em") .attr("dy", ".9em") .style("font-size","12px") .attr("transform", function (d) { return "rotate(-30)"; }); ; return svg.node(); }32:Te88,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); //svg.append("g") // .call(legend); return Object.assign(svg.node(), {scales: {color: zScale}}); }33:T668,md`In 2011, 23 projects were labelled within the categories. Out of which Disciplinary Areas which includes tags used for describe subject matter area the project is addressing (e.g., math education) were amongst most popular actegories of research. Each project was multiply tagged for different Disciplinary areas (this explains the number > 23). Which again surfaces as top interest in the years 2016 and 2017. The next popular category was Learning Environments and Platforms with 35 tags, followed by Learning Processes and Theories. The more AI oriented and empirical research (AI, pedagogical approaches and Assessments) were just beginning to increase. In years 2012 through 2018 most projects were concerned with Learning process and learning environments although Assessments lagged behind and were not as common as the environments. (The need for desiging assessments and measures that could be used with the learning platforms and comply with the learning processes is a major gap we see even today). These years also show a graduate migration in support of Artificail interlligence research and Capacity building for students and educators towards the end of 2019. In 2019 out of the 14 projects that were tagged, most included an interest with Capacity Building Projects which includes projects focused on different forms of the capacity building either in a scholarly field (e.g., a workshop for graduate students) or more broadly (e.g., workforce development). Closely followed by AI approaches, which makes sense as teachers and learners need supports and training to learn and teach these new methods and techniques.` 34:T4f9,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))) }35:T515,function sub_labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((sub_prev.get(d) || d).value)},${y((sub_prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((sub_next.get(d) || d).value)},${y((sub_next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (sub_next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((sub_prev.get(d) || d).value, d.value)))) }36:[{"id":"a608165b4e0bdf58e66a92d37ce6a66d75193130e0845ed2db3981e2864c62643cd81b6ce16490bd1bd65983b7e4a850b994350a601286b498bb4db0c20223e5","href":"https://static.observableusercontent.com/files/a608165b4e0bdf58e66a92d37ce6a66d75193130e0845ed2db3981e2864c62643cd81b6ce16490bd1bd65983b7e4a850b994350a601286b498bb4db0c20223e5","name":"Supercategory@2.csv","type":"text/csv","lastModified":1649358744680.353,"size":351952},{"id":"ac25bcd378662dd9e5ffa1f862b9826e6c2e6a411fae000fa40603df4ab8658ce128a31c5d3377f92300aa29f1aeaca231d5818c6d71d5225153aec42e8429ff","href":"https://static.observableusercontent.com/files/ac25bcd378662dd9e5ffa1f862b9826e6c2e6a411fae000fa40603df4ab8658ce128a31c5d3377f92300aa29f1aeaca231d5818c6d71d5225153aec42e8429ff","name":"onlySupercategories@3.csv","type":"text/csv","lastModified":1649359466356.857,"size":144499}] 2f:{"id":"5abf4df8680d7155","slug":"bar-chart-race-nsf-awards-2011-2019","title":"Bar Chart Race, NSF Awards 2011-2019.","thumbnail":"db11f7ba7cf2e59c1ada047d8719e4369fa78f88f5c80423793f98d123743c79","access_level":"public","create_time":"$D2022-04-07T19:12:24.680Z","update_time":"$D2022-04-19T21:49:26.349Z","view_time":null,"first_public_time":"$D2022-04-19T19:38:51.457Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"61ee6b1ef1f6cf09","login":"aditimallavarapu","name":"Aditi Mallavarapu","avatar_url":"https://avatars-next.observableusercontent.com/97c26669b9b5fa9ec9e5b9456fa1ae84578754166521d206fcc5d46aed54bf8e","tier":"starter_2024"},"version":5041,"publish_version":5041,"role":null,"authored":false,"authors":[{"type":"individual","id":"f27a0d887a163e4f","login":"aditimallavarapu","name":"Aditi Mallavarapu","avatar_url":"https://avatars-next.observableusercontent.com/97c26669b9b5fa9ec9e5b9456fa1ae84578754166521d206fcc5d46aed54bf8e","tier":null}],"members":[{"type":"individual","id":"f27a0d887a163e4f","login":"aditimallavarapu","name":"Aditi Mallavarapu","avatar_url":"https://avatars-next.observableusercontent.com/97c26669b9b5fa9ec9e5b9456fa1ae84578754166521d206fcc5d46aed54bf8e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bar Chart Race, NSF Awards 2011-2019.","cells":[{"id":239,"value":"md `# Bar Chart Race, NSF Awards 2011-2019. \nModified from [bar chart race](/@d3/bar-chart-race) on observablehq.com. \n\nThis is an implementation of an animated [bar chart race](/@d3/bar-chart-race) for the NSF Cyberlearning awards that were granted between the years 2011-2018.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3023,"value":"//FileAttachment(\"Supercategory.csv\").csv()\ndata = d3.csvParse(await FileAttachment(\"Supercategory@2.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1051,"value":"md `The data for the race chart is a CSV with columns *date* (in [YYYY-MM-DD format](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-date-time-string-format)), *Title* (Title of the projects), *AwardNumber* (Award Number of the project), *Category* (the tag that was given by PI in surveys) and *Supercategory* (the upper level category for the PI chosen categories) which if present determines color. Future iterations will also include PI and co-PI information and meta-data that could be merged with this data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4809,"value":"subdata = d3.csvParse(await FileAttachment(\"onlySupercategories@3.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4836,"value":"md`reformat the year so that all projects started in that year are counted for that year.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4834,"value":"subdata.forEach(function(d,i) {\nd.FirstDate = new Date(d.StartDate); \nd.year = d.FirstDate.getFullYear(); \nd.date = new Date(\"01-01-\" +d.year);\nd.AwardNumber = d.AwardNumber.toString(10);\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3485,"value":"md` ## Bar chart by year\nThere are a total of 244 unique projects that responded to the survyes during the years 2011-2019.\n\nThis plot shows the number of projects that replied to our survey per year. There was a sudden dip in the survey response in 2014 (not sure why). \n\n\nWe saw an increase in the number of projects in 2015 that answered the survey - (Shari Joined in 2015!!) - projects coded under the code 8244 were included starting 2014 but the peak in that 2015 is unusual. The last survey was taken early in 2019 so not all are projects that were awarded that year are reported - some awarded later that year are not counted. \n\n### This data does not include any information from the convening because it was not mapped at the project level.\n\n##### Idea:\nCyberlearning only projects be counted separate than beyond cyberlearning (which includes 8244 projects?)\n\nTo know the more recent changes we can look at data from 2015 onwards and avoid the inconsistencies.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3487,"value":"small_chart = BarChart(categories, {\n x: d => d[0],\n y: d => d[1],\n yLabel: \"↑ Number of Projects\",\n width,\n height: 500,\n color: \"steelblue\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3497,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3576,"value":"md`Create intermediate array removing duplicate entries per year for each award`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3489,"value":"project_count = Array.from(d3.rollup(subdata, v=>v.length, d=>d.year, d => d.AwardNumber))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3522,"value":"categories=[];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4821,"value":"//count_projects = Array.from(d3.rollup(subdata, v=>v.length, d=>d.year, d => d.AwardNumber))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3577,"value":"md`The categories varaible will be used to render thebar chart across years.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3526,"value":"{\nfor(var i=0; i d[0],\n y: d => d[1],\n yLabel: \"↑ Number of Projects\",\n width,\n height: 500,\n color: \"steelblue\"\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4771,"value":"Supercategories","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4691,"value":"md`not removing reducndancy - counting multiply coded projects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4686,"value":"NumberSuperLevel = d3.rollup(subdata, v=>v.length, d => d.SuperCategory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4482,"value":"md`# Grouped Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4645,"value":"md`Calculate the number of projects per year under every super category`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4493,"value":"SuperLevel = Array.from(d3.rollup(subdata, v=>v.length, d=>d.year, d => d.SuperCategory))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4646,"value":"md`Check to see if we can access the data within the array of arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4569,"value":"SuperLevel[0][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4648,"value":"md`Only get the Names of the SuperCategories from the array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4496,"value":"SuperList = Array.from(Supercategories)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4650,"value":"md`This new array will hold the data in more organized manner for teh groupped bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4544,"value":"restruct=[]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4653,"value":"md`Iterate through the SuperLevel array and push entries one at a time into new array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4514,"value":"//keyframes[0][1][0].name\n//Array.from(SuperLevel[0][1])[0][0\n{\n\n for (let index = 0; index < SuperLevel.length; ++index) {\n restruct.push({Year: SuperLevel[index][0],\n LEP: SuperLevel[index][1].get(\"Learning Environments and Platforms\"), \n ESJ: SuperLevel[index][1].get(\"Equity and Social Justice\"), \n PAP: SuperLevel[index][1].get(\"Pedagogical Approaches and Processes\"), \n Other: SuperLevel[index][1].get(\"Other\"), \n IAM:SuperLevel[index][1].get(\"Instruments, Assessment, and Measures\"),\n AL:SuperLevel[index][1].get(\"Analytics\"), \n CB:SuperLevel[index][1].get(\"Capacity Building\"), \n RM:SuperLevel[index][1].get(\"Research Methods\"), \n DA: SuperLevel[index][1].get(\"Disciplinary Areas\"), \n AI: SuperLevel[index][1].get(\"AI Approaches and Technologies\")})\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4554,"value":"restruct","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4655,"value":"md`Becuase spaces werent allowed we made shorter names for each making an array of the shorter names`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4598,"value":"Shorter = Object.keys(restruct[0]).slice(1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4656,"value":"md`Make the data into year, category, value tuple for each category per year`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4587,"value":"restruct_Array = Shorter.flatMap(category => restruct.map(d => ({Year: d.Year, category, value: d[category]}))) // pivot longer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4666,"value":"key = Legend(Group_chart.scales.color, {title: \"Categories\"}) // try also Swatches","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4484,"value":"Group_chart = GroupedBarChart(restruct_Array, {\n x: d => d.Year,\n y: d => d.value, // we need the values here \n z: d => d.category, // we need categories here\n //xDomain: d3.groupSort(restruct_Array, D => d3.sum(D, d => -d.value), d => d.Year).slice(0, 6), // top 6\n yLabel: \"↑ Number of Projects\",\n zDomain: Shorter,\n colors: d3.schemeSpectral[Shorter.length],\n width,\n height: 500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4672,"value":"md `Changing trends which started with high interest in Learning Environments and Platforms and has now turned towards more research in Discplinary Areas and Artificial Intelligence.\n\nIn 2011, 2012 capacity building is missing. \nIn 2014 Equity and Social Justice and Instruments, Assessments & Measures category are missing. \n\nThere was some change in 2015, that caused the peak. More response - a changed perspective, was the CIRCL hub reconcieved at that time? Was the schedule of the surveys changed in 2015? \n\n#### Idea: \nKnowing these milestones of when the hub was rennovated can give us milestones that we can then compare in terms of outputs and categories.\n\nShould the data below will only look at data from 2015 onwards considering the most recent historical perspecpective.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4486,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4800,"value":"legendTextSize = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4802,"value":"legendDistanceFromRight = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4797,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width-legendDistanceFromRight},${margin.top})`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", legendTextSize)\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4634,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4635,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1058,"value":"title = md`## Trends of Categories of projects 2011-2019\n\nData: Survey data collected from 2011 to 2019, where PIs self tagged their projects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3458,"value":"md`## How to read the information\n\nThe x-axis represents the number of projects in the categories, each horizontally colored bar shows the categotry name and the number of projects that were labelled for that category (removing redundancy). Supercategories are the highest level of heirarchy we have - so if projects have been labelled for multiple things under that category they have only been counted once. But a project can be coded under multiple categories.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":982,"value":"viewof replay = html`