2d:null 2e:["$","title",null,{"children":"Art History Jobs, 2011 - 2020 | Stephanie Tuerk | Observable"}] 33:Te51,intro = { const pStyle = 'font-size: 0.9rem;'; const pPadding = 'padding-top: 0.5rem;'; const text = html`

This notebook works adequately on mobile but using a desktop browser is recommended.

Inspired by similar efforts that I'd seen for Literature and History, I wanted to take a look at recent trends in the Art History job market via the jobs posted on the Academic Jobs Wiki.

Data Acquisition and Cleaning

I gathered data using the wikia python library that provides an interface on top of the wikia API. You can see my work in this Colab Notebook. Many thanks to Ryan Heuser whose notebook for English Lit jobs data scraping (posted on Twitter) I used as a model for getting data from the Wikia page.

For each job posting, I attributed a field, such as Modern / Contemporary Art, tenure status (tenure track, non-tenure track, and unknown), and one or more ranks, such as assistant professor or postdoc. The vast majority of this (99%) was done programatically, using the field headings that jobs are posted on the wiki page and scanning text for keywords related to tenure status and rank.

I regularized field names across the years (so that Contemporary / Modern Art and Modern / Contemporary Art became the same category) and also imputed fields manually in a few instances. In 2011-2012, Contemporary Art, Modern Art, Architecture and Design was a single category, and I sorted those jobs by hand into the appropriate categories that were used in all other years, based on the job descriptions. In 2020, a Visiting Positions / Limited-Term Appointments / Postdocs category appeared on the site, and I likewise sorted these into fields based on job description, and accounted for the temporary nature of these jobs in the rank category.

Finally, I also checked the data to make sure there weren't nonsensical combinations, such as a tenure-track postdoc, and manually corrected the data in the few records that needed correcting.

Known problems in the data include the fact that I chose not to try to account for instances in which two positions were advertised in one posting, and in the one case in which a job was determined to be in two completely distinct fields (Islamic Art or Latin-American Art), I arbitrarily put it in one of the fields, in an effort to keep the sum of the number of jobs in each field equal to the sum of all jobs.

The work described above yielded a JSON that I brought into this notebook, which you can see in the cell below.

This data was last scraped on December 19, 2020.

`; return text; }34:T587,fieldCreation = { const pStyle = 'font-size: 0.9rem;'; const pPadding = 'padding-top: 0.5rem;'; const text = html`

Field Creation

When I brought the data into this notebook, there were 45 different fields. I decided that given that the highest number of jobs for any year was just over three times this number of fields, I needed to consolidate categories to create more coherence in the data. Some of the decisions I made in grouping things required a fair amount of judgment, and other completely defensble decisions could have been made that would make the data look different.

If you want to explore alternate groupings, you can edit the code that generates the fieldGroupings array below to reconfigure things. Edit the code by clicking the three dots that appear to the left of the cell when you hover over it. Changes won't be saved beyond a refresh of your browser. Also note that there are only enough distinct colors for 18 fields.

Generally speaking, I urge you to think critically about how groupings, small numbers, the fact that not all jobs in the field are posted to the Wiki, incomplete descriptions, and other factors make this data a good representation of the art history job market, but one that is certainly not perfect.

`; return text; }35:T9cb,fieldGroupings = [ { category: 'African / African-American Art', subfields: [ 'African Art', 'African-American Art', 'African / African-American Art' ] }, { category: 'Ancient Art', subfields: [ 'Ancient Art', 'Ancient Mediterranean and Near East, Art and Archaeology' ] }, { category: 'Asian Art', subfields: ['Asian Art', 'Chinese Buddhist Art'] }, { category: 'Modern / Contemporary Art', subfields: [ 'Modern / Contemporary Art', 'Twentieth Century Art', 'Nineteenth / Early Twentieth Century Art' ] }, { category: 'Early Modern / Renaissance / Eighteenth & Nineteenth Century Art', subfields: [ 'Early Modern / Renaissance Art', 'Eighteenth / Nineteenth Century Art', 'Early Modern Europe', 'Renaissance Art' ] }, { category: 'Byzantine / Medieval Art', subfields: ['Byzantine / Medieval Art', 'Byzantine Art'] }, { category: 'Hispanic / Latin American Art', subfields: [ 'Hispanic / Latin American Art', 'Latin American Art and Architecture', 'Latin American/Pre-Columbian' ] }, { category: 'General / Open', subfields: ['General / Open', 'General'] }, { category: 'Global / Non-Western Art', subfields: ['Global / Non-Western Art'] }, { category: 'American Art', subfields: [ 'American Art', 'Art of the Americas', 'Native American Art', 'Canadian Art', 'Asian American Art' ] }, { category: 'Architecture', subfields: ['Architecture'] }, { category: 'Middle Eastern / Islamic Art', subfields: [ 'Middle Eastern / Islamic Art', 'Islamic Art / Art of the Ancient Americas', 'Islamic Art', 'Islamic Art and Architecture' ] }, { category: 'Design', subfields: ['Costume/ Dress or Textile History', 'Design'] }, { category: 'Visual Studies / Visual Culture', subfields: [ 'Visual Studies / Visual Culture', 'Material and Visual Culture' ] }, { category: 'Film / Photography', subfields: ['Film', 'Photography', 'Film / Photography'] }, { category: 'European Art', subfields: ['British Art', 'Russian / Eastern European Art', 'European Art'] }, { category: 'Arts Management / Arts Administration', subfields: ['Arts Management / Arts Administration', 'Museum Studies'] }, { category: 'Gender Studies', subfields: ['Gender Studies'] } ]36:T67e,results = { const pStyle = 'font-size: 0.9rem;'; const pPadding = 'padding-top: 0.5rem;'; const jobsTheYear = summedData.find( x => x.year === '2020' && x.field === 'All' && x.isTt === 'All' && x.rank === 'All' ).count; const allJobsPrior = summedData.filter( x => x.year !== '2020' && x.field === 'All' && x.isTt === 'All' && x.rank === 'All' ); const avgJobsPrior = allJobsPrior.reduce((acc, cur) => { acc = acc + cur.count; return acc; }, 0) / allJobsPrior.length; const getFieldStyle = field => `color: ${fieldColor(field)}; font-style: italic;`; const text = html`

Results

To no one's surprise, the Art History academic job market is pretty grim in 2020. This year there are ${jobsTheYear} jobs posted, while in the ${ allJobsPrior.length } years before this, the average number of job listings was ${avgJobsPrior} per year.

What was slightly surprising to me was that there wasn't a bigger dropoff in jobs before 2019. (Too bad there is not data that could show us where things were before 2008.) 2019 is also an interesting year in that while the overall number of jobs was considerably down, almost all of the loses were in the Modern / Contemporary, Early Modern\–19th Century, and General fields.

`; return text; }37:T696,stackedArea = { const div = d3 .create('div') .style('display', 'flex') .style('flex-wrap', 'wrap') .style('padding', '16px 0 60px 0'); const leftCol = div .append('div') .style('display', 'flex') .style('flex-direction', 'column') .style('justify-content', 'space-between') .style( 'flex-basis', `${chartDims.stackedArea.width + chartDims.stackedArea.margin.left + chartDims.stackedArea.margin.right}px` ); const title = leftCol.append('div'); title .append('p') .text(`All jobs by field, 2011${enDash}2020`) .style('color', highlightColor) .style('font-size', '1.2rem') .style('font-family', 'monospace') .style('font-weight', '700') .style('text-transform', 'uppercase') .style('margin-left', `${chartDims.stackedArea.margin.left}px`); title .append('p') .text('Average values in the table are calculated from 2011 to 2019.') .style('font-style', 'italic') .style('font-size', '0.85rem') .style('margin', `0 0 0px ${chartDims.stackedArea.margin.left}px`); title .append('p') .text('Click arrows in column headers to sort table by values.') .style('font-style', 'italic') .style('font-size', '0.85rem') .style('margin', `0 0 8px ${chartDims.stackedArea.margin.left}px`); const rightCol = div .append('div') .attr('class', 'right-col') .style( 'margin', `${chartDims.table.margin.top}px 0 0 ${chartDims.table.margin.left}px` ); stackedAreaChart(leftCol, summedData, chartDims.stackedArea); const config = mutable tableConfig; makeTable(rightCol, config, tableData); return div.node(); }38:T1a10,viewof compareFieldsLineSelections = { const div = d3.create('div').style('padding', '16px 0 0 0'); const groupName = 'compare-fields'; const form = div .append('form') .attr('class', `selector-form ${groupName}`) .style('display', 'flex') .style('flex-wrap', 'wrap'); const divEl = div.node(); const formEl = form.node(); const leftCol = form .append('div') .attr('class', 'data-type-field-container') .style('flex-basis', '552px') .style('margin-right', '12px'); const fieldName = 'field'; const fieldSelected = variableValues.field.slice(1); const fieldSelectors = makeMultiChecks( groupName, fieldName, variableValues.field, 'field-select', fieldSelected ); leftCol.node().appendChild(fieldSelectors); const fieldTitleDiv = d3 .select(fieldSelectors) .insert('div', '.multi-checkbox.field:first-of-type'); fieldTitleDiv .append('p') .text('Select fields') .attr('class', 'small-caps') .style('font', '700 0.9rem sans-serif') .style('color', highlightColor) .style('padding-bottom', '6px'); fieldTitleDiv .append('p') .text( 'Select fields to view in the chart below. If you disaggregate by either tenure status or job rank, you will only be able to select one field at a time. If all fields are deselected, All will be automatically selected.' ) .style('font-size', '0.85rem') .style('font-style', 'italic') .style('padding-bottom', '2px'); d3.select(fieldSelectors) .select('input[value="all"] + label') .style('text-transform', 'uppercase'); const dataTypeOptions = ['Number of jobs', 'Percent of all jobs']; const dataTypeSelectors = makeRadioSelects( groupName, 'dataType', dataTypeOptions, 'data-type', dataTypeOptions[0] ); leftCol.node().appendChild(dataTypeSelectors); const dataTypeTitleDiv = d3 .select(dataTypeSelectors) .insert('div', '.radio-container:first-of-type'); dataTypeTitleDiv .append('p') .attr('class', 'selector-title small-caps') .style('font', '700 0.9rem sans-serif') .style('color', highlightColor) .style('padding', '12px 0 6px 0') .text('Select a type of data'); dataTypeTitleDiv .append('p') .text( 'Select whether you would like to see the total number of jobs for each year or the number of jobs for a selection as a share of all jobs.' ) .style('font-size', '0.85rem') .style('font-style', 'italic') .style('padding-bottom', '2px'); const filterSelectorsContainer = form .append('div') .attr('class', 'filters-container') .style('flex-basis', '360px'); filterSelectorsContainer .append('p') .attr('class', 'small-caps') .style('font', '700 0.9rem sans-serif') .style('color', highlightColor) .style('padding-bottom', '6px') .text('Filter Jobs'); filterSelectorsContainer .append('p') .style('font-size', '0.85rem') .style('font-style', 'italic') .style('padding-bottom', '2px') .text( 'Filter or disaggregate to see jobs or a particular tenure status or job rank. Disaggregating will allow you to compare among tenure statuses or job ranks over time. Only one variable can be disaggregated at a time, and only one field can be selected when disaggregating.' ); const filters = dataConfig.filterVars; const filterVars = filters.map(f => { const block = makeFilterSelectorsBlock( groupName, f, variableValues[f], variableValues[f][0] ); filterSelectorsContainer.node().appendChild(block); }); const years = [...new Set(summedData.map(x => x.year))]; const timeRangeConfig = { name: 'timeRange', values: years, selected: years, group: 'compare-fields' }; const timeRangeSlider = makeTimeSlider(timeRangeConfig, 'compare-fields'); const timeRangeDiv = filterSelectorsContainer .append('div') .attr('class', 'time-range-container') .style('margin-top', '24px'); timeRangeDiv .append('p') .attr('class', 'small-caps') .style('font', '700 0.9rem sans-serif') .style('color', highlightColor) .style('padding-bottom', '6px') .text('Comparison Years'); timeRangeDiv .append('p') .style('font-size', '0.85rem') .style('font-style', 'italic') .style('padding-bottom', '2px') .text('Select years across which to compare the change in jobs.'); timeRangeDiv.node().appendChild(timeRangeSlider); const updateDivValues = () => { divEl.value = Object.assign(divEl.value, parseFormValues(formEl, divEl)); divEl.value = Object.assign( divEl.value, parseSliderValues(formEl, divEl, timeRangeConfig) ); }; divEl.value = {}; formEl.addEventListener("submit", event => event.preventDefault()); formEl.addEventListener("change", () => divEl.dispatchEvent(new CustomEvent("input")) ); formEl.addEventListener("input", () => updateDivValues()); updateDivValues(); const fieldCheckboxes = div.selectAll(`.multi-checkbox.${fieldName} label`); setFieldCheckboxesToMultiSelect(fieldCheckboxes); fieldCheckboxes.each((d, i, nodes) => { const isChecked = nodes[i].parentNode.querySelector('input').checked; styleFieldCheckbox(d3.select(nodes[i]), isChecked); }); const dataTypeBlock = div.select('.selector-block.dataType'); const options = dataTypeBlock.selectAll('input'); options.on('change', event => toggleRadioChecks(event.currentTarget, options) ); filters.forEach((filter, i) => { const otherFilter = i === 0 ? filters[1] : filters[0]; const filterUseTypeBlock = div.select(`.selector-block.${filter}UseType`); const options = filterUseTypeBlock.selectAll('input'); options.on('change', event => { toggleRadioChecks(event.currentTarget, options); if (divEl.value[`${filter}UseType`] === 'Filter') { setFilterVarGroupToFilter(groupName, filter, div, event.currentTarget); setFieldCheckboxesToMultiSelect(fieldCheckboxes); } else if (divEl.value[`${filter}UseType`] === 'Disaggregate') { setFilterVarGroupToDisagg(groupName, filter, div, event.currentTarget); setFieldCheckboxesToSingleSelect(fieldCheckboxes); if (divEl.value[`${otherFilter}UseType`] === 'Disaggregate') { const otherVarFilterNode = div .select( `.selector-block.${otherFilter}UseType input[value="Filter"]` ) .node(); otherVarFilterNode.parentNode.querySelector('label').click(); } } }); }); divEl.value.timeRange = { dateStart: '2011', dateEnd: '2020' }; return div.node(); }39:T11b0,findings = { const pStyle = 'font-size: 0.9rem;'; const pPadding = 'padding-top: 0.5rem;'; const getFieldStyle = field => `color: ${fieldColor(field)}; font-style: italic;`; const text = html`

My findings

Some interesting things I found using these charts include:

Unsurprisingly, Byzantine / Medieval is the field with the steepest decline in jobs over this time period. In 2012 there were sixteen Byzantine / Medieval jobs listed. (Which itself is mind-boggling! 16 Byzantinist / Medievalist jobs!) In 2020, there was one. As a share of all jobs, that's a decline of 77.1%.
A little more surprising to me at least is that Ancient Art hasn't suffered nearly the same fate, maintaining about 6% +/-2% of the market over the course of the years. My guess here is that at least some of these jobs are in archaeology departments, which may stabilize the field a bit.
The notion of a dramatic explicitly global turn failed to come to fruition. Both the number and share of jobs listed as Global / Non-Western peaked in 2012

Global / Non-Western

However, there has been decided (and maybe even dramatic) growth in jobs in specific non-Western and/or non-European fields, in particular in African / African-American Art and Hispanic / Latin American Art. Although each of these fields only have two more jobs listed in 2020 than 2011, the share of the total number of jobs for each of these fields has grown by 396% over this time period, as there are far fewer jobs now.
As noted earlier, Modern / Contemporary and Early Modern\–19th Century, the two fields with the largest number and share of jobs in 2011, are down both in numbers and as a share of all jobs. The share of Modern / Contemporary jobs is down by 33.8% from 2011 to 2020, and the share of Early Modern\–19th Century jobs is down by 48.6%.
One bright spot is that the share of listed jobs that are tenure track hasn't at all declined alongside the overall decline in job numbers. From 2011 to 2020, there has been 19.9% growth in the share of TT jobs, although in 2011 there was a relatively high number of jobs with an unknown TT status. However, even if setting those jobs aside, the share of TT jobs would remain more or less steady over the ten years of data. In 2020, 67.3% of listed jobs were TT. Another 20% had an unknown tenure status.
Also, there is a slight decrease in listings for contingent jobs, such as Lecturers, or VAPs over this time period. (Of course we know that not all jobs are listed on the Academic Jobs Wiki, and my guess would be that contingent jobs are underrepresented in these listings.) Across all years, the vast majority of jobs listed were for the rank of Assistant Professor. In 2020, 67.2% of jobs were for Assistant Professor positions.

If you notice an interesting trend or finding, I'd be happy to add it to this list with or without your name attached.

Feel free to leave a comment in this notebook by hovering over a cell and clicking on the three dots to the left of the top of a cell, and selecting comment, about trends or anything else.

`; return text; }3a:T9b0,function stackedAreaChart(div, data, config) { const svg = div .append("svg") .attr("viewBox", [0, 0, config.width, config.height]) .attr("max-width", config.width) .attr("max-height", config.height); const values = Array.from( d3.rollup( data.filter((x) => x.field !== "All"), ([d]) => d.count, (d) => +new Date(d.year), (d) => d.field ) ); console.log(values); const order = d3.stackOrderAscending; const series = d3 .stack() .keys(variableValues.field) .value(([, values], field) => values.get(field)) .order(order)(values) .filter((x) => x.key !== "All") .sort((a, b) => d3.ascending(a.index, b.index)); console.log(series); const curve = d3.curveLinear; const area = d3 .area() .curve(curve) .x((d) => x(d.data[0])) .y0((d) => y(d[0])) .y1((d) => y(d[1])); const x = d3 .scaleUtc() .domain(d3.extent(data, (d) => d.year).map((x) => new Date(x))) .range([ config.margin.left, config.width - config.margin.left - config.margin.right ]); const y = d3 .scaleLinear() .domain([0, d3.max(series, (d) => d3.max(d, (d) => d[1]))]) .nice() .range([ config.height - config.margin.top - config.margin.bottom, config.margin.top ]); const xAxis = (g) => g .attr( "transform", `translate(0,${ config.height - config.margin.bottom - config.margin.top })` ) .call( d3 .axisBottom(x) .ticks(config.width / 80) .tickSizeOuter(0) ) .call((g) => { g.selectAll(".tick text").style("font-size", "0.9rem"); }); const yAxis = (g) => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "0.8em") .text("Number of jobs posted") .attr("class", "small-caps") ); svg .append("g") .selectAll("path") .data(series) .join("path") .attr("fill", (d) => { return fieldColor(d.key); }) .attr("d", area) .append("title") .text(({ field }) => field); svg.append("g").call(xAxis); svg.append("g").call(yAxis); }3b:T9aa,function baseTable(div, sortedData, config) { const arrows = html` { g.select(".domain").remove(); g.selectAll('.tick text').style('font-size', '0.7rem'); g.selectAll('.tick') .append('line') .attr('class', 'gird-line') .attr('x1', 0) .attr('y1', 0) .attr('x2', x.range()[1] - x.range()[0]) .attr('stroke', 'lightgray') .style('stroke-dasharray', '2 2'); g.select(".tick:last-of-type text") .clone() .attr('class', 'small-caps') .attr('x', 0) .attr('dy', -20) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y); x; }); const line = d3 .line() .x((d, i) => x(data.dates[i])) .y(d => y(d.value)) .curve(chartCurve); const ttFormatter = selections.dataType.includes('Percent') ? d3.format('.1%') : d3.format('.0f'); const chart = baseLineChart(svg, data, line, x, y, xAxis, yAxis, ttFormatter); chart.selectAll('.line path').attr('stroke-dasharray', d => { if (d.rank === 'All' && d.isTt === 'All') { return null; } else if (d.rank !== 'All' && selections.rankUseType === 'Disaggregate') { return rankDashArray(d.rank); } else if (d.isTt !== 'All' && selections.isTtUseType === 'Disaggregate') { return isTtDashArray(d.isTt); } }); return div.node(); }3d:T90e,function hover(svg, lines, x, y, data, formatter) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left); else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = createLineTooltip(svg); const edgePercent = 0.1; const atRightEdge = (i, data) => { const numIntervals = data.length; const lowerBound = numIntervals * edgePercent; const upperBound = numIntervals - 1 - lowerBound; return i >= upperBound; }; const atLeftEdge = (i, data) => { const numIntervals = data.length; const lowerBound = numIntervals * edgePercent; return i <= lowerBound; }; function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i1 = d3.bisectLeft(data.dates, xm, 1); const i0 = i1 - 1; const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0; const s = d3.least(data.series, d => Math.abs(d.values[i].value - ym)); lines.selectAll('path').attr("stroke", function(d) { if (this.parentElement.__data__ === s) { return fieldColor(this.parentElement.__data__.name.split(', ')[0]); } else { return "#ddd"; } }); lines.filter(d => d === s).raise(); let name = s.name; if (s.name === 'All') { name = 'All fields'; } addLineTooltipText( dot, x(data.dates[i]), y(s.values[i].value), name, s.values[i].value, formatter ); if (atRightEdge(i, data.dates)) { dot.select('.tooltip-title').call(lineTextWrap, 110); } if (atLeftEdge(i, data.dates)) { dot.select('.tooltip-title').call(lineTextWrap, 80); } } function entered() { lines .selectAll('path') .style("mix-blend-mode", null) .attr("stroke", "#ddd"); dot.attr("display", null); } function left() { lines .selectAll('path') .style("mix-blend-mode", "multiply") .attr("stroke", function(d) { return fieldColor(this.parentElement.__data__.name.split(', ')[0]); }); dot.attr("display", "none"); } }3e:T889,compareFieldsLineData = { const selections = compareFieldsLineSelections; const lineVariables = ['field']; const { dataType, timeRange, ...filtersObject } = Object.entries( selections ).reduce((acc, [key, value]) => { if (!key.includes('UseType')) { acc[key] = value; } return acc; }, {}); let dataSel; if (dataType === 'Number of jobs') { dataSel = 'count'; } else { dataSel = 'percent'; } Object.entries(compareFieldsLineFiltersSel).forEach(([k, v]) => { if (v === 'Disaggregate') { lineVariables.push(k); } }); const filteredData = filterDataByObject(summedData, filtersObject); const variableVals = lineVariables.map(varName => { const values = [...new Set(filteredData.map(obj => obj[varName]))]; return values.map(v => { return { key: varName, value: v }; }); }); let lines = variableVals[0]; if (variableVals.length > 1) { for (let i = 0; i < variableVals.length - 1; i++) { lines = crossLineObjects(lines, variableVals[i + 1]); } } else { lines = lines.map(x => [x]); } const xVals = [...new Set(filteredData.map(obj => obj.year))].sort( d3.ascending ); return { y: dataSel === 'count' ? 'Number of jobs posted' : 'Percent of jobs posted for each year', series: lines.map(lineArr => ({ name: lineArr.map(obj => obj.value).join(', '), field: lineArr.find(obj => obj.key === 'field').value, rank: lineArr.find(obj => obj.key === 'rank') ? lineArr.find(obj => obj.key === 'rank').value : filtersObject.rank, isTt: lineArr.find(obj => obj.key === 'isTt') ? lineArr.find(obj => obj.key === 'isTt').value : filtersObject.isTt, values: xVals.map(year => { let fData = filteredData.filter(obj => obj.year === year); lineArr.forEach(obj => { fData = fData.filter(d => d[obj.key] === obj.value); }); const found = fData[0]; let val; if (found) { val = found[dataSel]; } return { value: val }; }) })), dates: xVals.map(d3.utcParse('%Y')) }; }3f:T1811,function barChart({ div, data, selections, barVar } = {}) { div.selectAll('svg').remove(); const dataIsPercent = selections.dataType === 'Percent of all jobs'; const accessor = Object.keys(data[0])[0]; const svg = div .append('svg') .attr('class', 'bar-chart-svg') .attr('viewBox', [0, 0, chartDims.bar.width, chartDims.bar.height]) .attr('width', chartDims.bar.width) .attr('height', chartDims.bar.height); const negativeColor = 'whitesmoke'; let yAxisLabel; let axisFormatter; let rateFormat; yAxisLabel = `Change in ${selections.dataType} from ${selections.timeRange.dateStart} to ${selections.timeRange.dateEnd}`; axisFormatter = d3.format('~%'); const yScale = d3 .scaleBand() .domain(data.map(x => x[accessor])) .range([ 0, chartDims.bar.height - chartDims.bar.margin.top - chartDims.bar.margin.bottom ]) .padding(chartDims.bar.barPadding); const domainData = !dataIsPercent ? data.filter(x => x[accessor] !== 'all') : data; const min = d3.min([ 0, d3.min(domainData, d => (typeof d[barVar] === 'string' ? null : d[barVar])) ]); const max = d3.max([ 0, d3.max(domainData, d => (typeof d[barVar] === 'string' ? null : d[barVar])) ]); const xScale = d3 .scaleLinear() .domain([min, max]) .nice() .range([ 0, chartDims.bar.width - chartDims.bar.margin.right - chartDims.bar.margin.left ]); const yAxis = g => g .attr('class', 'y-axis') .attr( 'transform', `translate(${ xScale.domain()[1] > 0 ? xScale(0) : xScale(xScale.domain()[1]) },0)` ) .attr('stroke-dasharray', '2 2') .call(d3.axisLeft(yScale).tickSize(0)) .selectAll('.tick') .select('text') .attr('class', d => `bar-label ${makeVarNameFromDisplayName(d)}`) .attr('x', d => (data.find(x => x[accessor] === d)[barVar] < 0 ? 4 : -4)) .attr('text-anchor', d => data.find(x => x[accessor] === d)[barVar] < 0 ? 'start' : 'end' ) .style('font-size', '0.67rem') .style('opacity', (d, i, nodes) => typeof data[i][barVar] === 'string' ? 0.5 : 1 ) .text(d => (accessor === 'field' ? fieldNamesDict[d] : d)); const xBottomAxis = g => g .attr( 'transform', `translate(0,${chartDims.bar.height - chartDims.bar.margin.bottom})` ) .call(d3.axisBottom(xScale).tickFormat(d3.format('~s'))); const xTopAxis = g => g .attr('transform', `translate(0,0)`) .call( d3 .axisTop(xScale) .ticks(5) .tickFormat(axisFormatter) ) .append('text') .attr('transform', `translate(0, -30)`) .attr('x', 0) .attr('y', 0) .attr('text-anchor', 'start') .attr('fill', '#333') .attr('font-size', '0.7rem') .style('text-transform', 'uppercase') .style('letter-spacing', '0.1em') .text(yAxisLabel) .call(barTitleTextWrap, 136); const chartSpace = svg .append('g') .attr( 'transform', `translate(${chartDims.bar.margin.left}, ${chartDims.bar.margin.top})` ) .attr('class', 'bar-chart'); const bars = chartSpace .selectAll('g') .data(data) .join('g') .attr( 'class', d => `bar-chart-row ${makeVarNameFromDisplayName(d[accessor])}` ) .attr('transform', d => { return `translate(0, ${yScale(d[accessor])})`; }); bars .append('rect') .attr( 'class', d => `bar-chart-rect ${makeVarNameFromDisplayName(d[accessor])}` ) .attr('x', d => (d[barVar] > 0 ? xScale(0) : xScale(d[barVar]))) .attr('y', 0) .attr('height', yScale.bandwidth()) .attr('width', d => { if (typeof d[barVar] === 'string') { return 0; } else if (d[barVar] > 0) { return xScale(d[barVar]) - xScale(0); } else if (xScale.domain()[1] > 0) { return xScale(0) - xScale(d[barVar]); } else { return xScale(xScale.domain()[1]) - xScale(d[barVar]); } }) .attr('fill', (d, i, nodes) => { let barColor; if (accessor === 'field') { const field = nodes[i].parentElement.__data__.field; barColor = fieldColor(field); } else { barColor = fieldColor(selections.field); } if (d[barVar] > 0) { return barColor; } else { return negativeColor; } }) .attr('stroke', (d, i, nodes) => { let barStroke; if (accessor === 'field') { const field = nodes[i].parentElement.__data__.field; barStroke = fieldColor(field); } else { barStroke = fieldColor(selections.field); } return barStroke; }) .call(barTooltip, div, selections.dataType); // const replaceRectWithText = row => { // const textFormat = config.formatter[barVar](dataIsPercent); // row.select('rect').remove(); // row // .append('text') // .text(d => { // const value = textFormat(d[barVar]); // return typeof d[barVar] === 'string' ? '' : `${value} `; // }) // .attr('y', 10) // .attr('x', d => (d[barVar] > 0 ? xScale(0) + 4 : xScale(0) - 4)) // .attr('text-anchor', d => (d[barVar] > 0 ? 'start' : 'end')) // .attr('class', 'removed-bar-count-text') // .attr('fill', highlightColor); // }; // if (!dataIsPercent) { // const allRow = div.select('.bar-chart-row.all'); // replaceRectWithText(allRow); // } const vertAxis = chartSpace .append('g') .attr('class', 'multiStateBarYAxis') .call(yAxis); const topAxis = chartSpace .append('g') .attr('class', 'multiStateBarTopXAxis') .call(xTopAxis) .selectAll('.tick') .append('line') .attr('stroke', 'lightgray') .attr('stroke-dasharray', '2 4') .attr('y1', 0) .attr('y2', yScale.range()[1]); div .selectAll('.tick .united-states') .style('font-weight', '700') .style('font-style', 'italic'); div.selectAll('.y-axis .tick text').call(barTextWrap, 80); bars.raise(); vertAxis.raise(); }40:T8ff,function barTooltip(el, div, dataType) { el.on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const chartClass = 'compare-bar'; const ttOrigin = createHtmlTooltip(div, chartClass); const tt = ttOrigin.selectChild(); const barVar = 'diffPercent'; const ttFormatValue = dataType.includes('Percent') ? d3.format('.1%') : d3.format('.0f'); const ttFormatPercent = d3.format('.1%'); const colVarDisplayNames = { diffValue: 'Change in value between selected years', diffPercent: 'Percent change between selected years' }; const getDivPosition = () => { return [div.node().offsetLeft, div.node().offsetTop]; }; function entered(event, d) { console.log(d); const [divX, divY] = getDivPosition(); ttOrigin .style('left', `${event.offsetX + divX}px`) .style('top', `${event.offsetY + divY - htmlTooltipDims.height}px`); ttOrigin .style('display', 'flex') .style('flex-direction', 'column') .style('justify-content', 'flex-end'); tt.select(`.${chartClass}.tooltip.accessor`) .text( Object.keys(filterNames).includes(Object.keys(d)[0]) ? filterNames[Object.keys(d)[0]] : Object.keys(d)[0] ) .style('font-size', '0.7rem'); tt.select(`.${chartClass}.tooltip.accessorVar`) .text(Object.values(d)[0]) .style('font-weight', '700') .style('padding-bottom', '8px'); tt.select(`.${chartClass}.tooltip.diffValue`).style( 'padding-bottom', '2px' ); tt.select(`.${chartClass}.tooltip.diffValue .var`).text( `${colVarDisplayNames.diffValue}: ` ); tt.select(`.${chartClass}.tooltip.diffPercent .var`).text( `${colVarDisplayNames.diffPercent}: ` ); tt.select(`.${chartClass}.tooltip.diffValue .value`).text( ttFormatValue(d.diffValue) ); tt.select(`.${chartClass}.tooltip.diffPercent .value`).text( ttFormatPercent(d.diffPercent) ); } function moved(event, d) { event.preventDefault(); const [divX, divY] = getDivPosition(); ttOrigin .style('left', `${event.offsetX + divX}px`) .style('top', `${event.offsetY + divY - htmlTooltipDims.height}px`); } function left(event, d) { ttOrigin.style('display', 'none'); } }41:T5a2,function createHtmlTooltip(div, chartName) { const ttOrigin = div .append('div') .attr('class', `${chartName}-tooltip-origin`) .style('display', 'none') .style('position', 'absolute') .style('top', 0) .style('left', 0) .style('height', `${htmlTooltipDims.height}px`); const tt = ttOrigin .append('div') .attr('class', `${chartName}-tooltip-container`) .style('position', 'relative') .style('background', '#333') .style('border-radius', '12px') .style('opacity', '1') .style('padding', '.5rem') .style('max-width', `${htmlTooltipDims.width}px`); const ttClasses = ['accessor', 'accessorVar', 'diffValue', 'diffPercent']; ttClasses.forEach(className => { tt.append('p') .attr('class', `${chartName} tooltip ${className} tooltip-text`) .style('color', 'white') .style('font-family', 'sans-serif'); }); tt.select('.accessor').classed('small-caps', true); const dataSpans = ['var', 'value']; dataSpans.forEach(className => { tt.select('.diffValue') .append('span') .attr('class', `${chartName} tooltip ${className} tooltip-text`) .style('color', 'white') .style('font-family', 'sans-serif'); tt.select('.diffPercent') .append('span') .attr('class', `${chartName} tooltip ${className} tooltip-text`) .style('color', 'white') .style('font-family', 'sans-serif'); }); return ttOrigin; }42:T5fa,function aggregateBarData(selections) { const { timeRange, dataType, ...filterObject } = selections; let data = summedData; const dataBySelections = filterDataByObject(data, filterObject); const valueType = dataType === 'Number of jobs' ? 'count' : 'percent'; let barVar; let filter1; let filter2; if ( selections.isTtUseType === 'Filter' && selections.rankUseType === 'Filter' ) { barVar = 'field'; filter1 = 'isTt'; filter2 = 'rank'; } else if (selections.isTtUseType === 'Disaggregate') { barVar = 'isTt'; filter1 = 'rank'; filter2 = 'field'; } else if (selections.rankUseType === 'Disaggregate') { barVar = 'rank'; filter1 = 'field'; filter2 = 'isTt'; } const compareEntities = variableValues[barVar]; const aggregatedData = compareEntities.map(entity => { const dataObj = {}; dataObj[barVar] = entity; const startValue = data.find( x => x[barVar] === entity && x.year === timeRange.dateStart && x[filter1] == selections[filter1] && x[filter2] == selections[filter2] )[valueType]; const endValue = data.find( x => x[barVar] === entity && x.year === timeRange.dateEnd && x[filter1] == selections[filter1] && x[filter2] == selections[filter2] )[valueType]; dataObj.diffValue = endValue - startValue; dataObj.diffPercent = startValue !== 0 ? (endValue - startValue) / startValue : 'N/A'; return dataObj; }); return aggregatedData; }43:T1e71,html` `44:T411,function setFieldCheckboxesToSingleSelect(checkboxes) { const getInput = label => label.parentNode.querySelector('input'); const deselectCheckbox = label => { if (getInput(label).checked) { label.click(); } }; checkboxes.each((d, i, nodes) => deselectCheckbox(nodes[i])); checkboxes.on('click', event => { const isChecked = !getInput(event.currentTarget).checked; styleFieldCheckbox(d3.select(event.currentTarget), isChecked); const otherCheckboxes = checkboxes.filter( (d, i, nodes) => getInput(nodes[i]).id !== getInput(event.currentTarget).id ); otherCheckboxes.each((d, i, nodes) => { getInput(nodes[i]).checked = false; }); otherCheckboxes.each((d, i, nodes) => styleFieldCheckbox(d3.select(nodes[i], false)) ); }); const checkbox = checkboxes.filter((d, i) => i === 0); const checkboxContainer = d3.select(checkbox.node().parentNode.parentNode); // checkboxContainer // .select('input[value="all"] + label') // .node() // .click(); }45:T88b,function parseFormValues(form, container) { const obj = {}; const multiCheckboxes = []; const otherInputs = []; for (const input of form.elements) { if (input.parentNode.className.includes('multi-checkbox')) { multiCheckboxes.push(input); } else { otherInputs.push(input); } } for (const input of otherInputs) { if (input.disabled || !input.hasAttribute("name")) continue; let value = input.value; switch (input.type) { case "range": case "number": { value = input.valueAsNumber; break; } case "date": { value = input.valueAsDate; break; } case "radio": { if (!input.checked) continue; break; } case "checkbox": { if (input.checked) value = true; else value = false; break; } case "file": { value = input.multiple ? input.files : input.files[0]; break; } case "select-multiple": { value = Array.from(input.selectedOptions, option => option.value); break; } } obj[input.name] = value; } if (multiCheckboxes) { const checkboxGroups = removeItemFromArray('multi-checkbox', [ ...new Set( multiCheckboxes.map(x => x.parentNode.className.split(' ')).flat() ) ]); checkboxGroups.forEach(group => { const checkboxes = multiCheckboxes.filter(x => x.parentNode.className.split(' ').includes(group) ); const selected = []; checkboxes.forEach(input => { let value; if (input.checked) { if (input.id.includes('compare-fields')) { selected.push(varableNames[input.name]); } else { selected.push(input.name); } } }); if (selected.length === 0) { selected.push('All'); checkboxes.forEach(input => { if (input.value === 'all') { if (input.className.includes('field')) { input.nextSibling.click(); } else { input.checked = true; } } }); } obj[group] = selected; }); } return obj; }46:T4dc,function parseSliderValues(form, container, config) { const setSliderValues = slider => { const sliderName = slider.id.split('-')[0]; const sliderVals = slider.noUiSlider.get().map(x => x.toString()); const vals = { dateStart: sliderVals[0], dateEnd: sliderVals[1] }; container.value[sliderName] = vals; }; d3.select(form) .selectAll('.noUi-origin') .on('click', (event, d) => { setSliderValues(event.currentTarget.parentNode.parentNode); container.dispatchEvent(new CustomEvent("input")); }) .on('mouseup', (event, d) => { setSliderValues(event.currentTarget.parentNode.parentNode); container.dispatchEvent(new CustomEvent("input")); }) .on('mouseout', (event, d) => { setSliderValues(event.currentTarget.parentNode.parentNode); container.dispatchEvent(new CustomEvent("input")); }); d3.select(form) .selectAll('.noUi-connects') .on('mouseup', (event, d) => { setSliderValues(event.currentTarget.parentNode.parentNode); container.dispatchEvent(new CustomEvent("input")); }); const slider = d3 .select(form) .select(`#${config.name}-timeSlider-${config.group}`) .node(); setSliderValues(slider); }47:T1017,html` `48:T4b3,schoolData = { // const allData = []; // variableValues.school.forEach(school => { // variableValues.field.forEach(field => { // variableValues.isTt.forEach(status => { // variableValues.rank.forEach(rank => { // const dataBySchool = data.filter(x => x.school === school); // const dataByField = // field !== 'All' // ? dataBySchool.filter(x => x.field === field) // : dataBySchool; // const dataByTtStatus = // status !== 'All' // ? dataByField.filter(x => x.isTt === status) // : dataByField; // const dataByRank = // rank !== 'All' // ? dataByTtStatus.filter(x => x.rank.includes(rank)) // : dataByTtStatus; // const count = dataByRank.length; // const newData = { // school, // field, // isTt: status, // rank, // count // }; // if (count > 0) { // allData.push(newData); // } // }); // }); // }); // }); // return allData.sort((a, b) => d3.descending(a.count, b.count)); }49:T530,fieldNamesFullShort = [ { full: 'All', short: 'All' }, { full: 'African / African-American Art', short: 'Af. / Af.-Am. Art' }, { full: 'Ancient Art', short: 'Ancient Art' }, { full: 'Asian Art', short: 'Asian Art' }, { full: 'Modern / Contemporary Art', short: 'Mod. / Contemp. Art' }, { full: 'Early Modern / Renaissance / Eighteenth & Nineteenth Century Art', short: `Early Mod. ${enDash} 19th C. Art` }, { full: 'Byzantine / Medieval Art', short: 'Byz. / Medieval Art' }, { full: 'Hispanic / Latin American Art', short: 'Hispanic / Lat. Am. Art' }, { full: 'General / Open', short: 'General / Open' }, { full: 'Global / Non-Western Art', short: 'Global / Non-Western Art' }, { full: 'American Art', short: 'American Art' }, { full: 'Architecture', short: 'Architecture' }, { full: 'Middle Eastern / Islamic Art', short: 'Middle Eastern / Islamic Art' }, { full: 'Design', short: 'Design' }, { full: 'Visual Studies / Visual Culture', short: 'Visual Studies' }, { full: 'Film / Photography', short: 'Film / Photo' }, { full: 'European Art', short: 'European Art' }, { full: 'Arts Management / Arts Administration', short: 'Arts Mgmt / Admin' }, { full: 'Gender Studies', short: 'Gender Studies' } ]4a:[{"id":"10c60f5356e8bbeb62b1f8b96f3b95b8f458af6ddfabc35ad1fb76a69a6c9ace70cf1382301c8e5d8e11381f81f5fe461f0a07950551026e6b5feee430f55372","href":"https://static.observableusercontent.com/files/10c60f5356e8bbeb62b1f8b96f3b95b8f458af6ddfabc35ad1fb76a69a6c9ace70cf1382301c8e5d8e11381f81f5fe461f0a07950551026e6b5feee430f55372","name":"art_history_20201219.json","type":"application/json","lastModified":1608432433366.893,"size":3532398},{"id":"3859ca884c0e47bdb513e62a226bc58238867e75f0b91289eee5f3f06cd9b60fa9e0ed77703d796ff82474fb632bd576a498494c4c6c8c8576bd4423c746c622","href":"https://static.observableusercontent.com/files/3859ca884c0e47bdb513e62a226bc58238867e75f0b91289eee5f3f06cd9b60fa9e0ed77703d796ff82474fb632bd576a498494c4c6c8c8576bd4423c746c622","name":"summedData@3.csv","type":"text/csv","lastModified":1608873589925.172,"size":381358},{"id":"a29d68c93bd3b3345168948882da245ce62b0092bc2bb38b3eb172354217eaaf9896566c78268208c1620673e70e8680254a1695255580643b55fedb18b9fcb6","href":"https://static.observableusercontent.com/files/a29d68c93bd3b3345168948882da245ce62b0092bc2bb38b3eb172354217eaaf9896566c78268208c1620673e70e8680254a1695255580643b55fedb18b9fcb6","name":"summed_dissertations.json","type":"application/json","lastModified":1608873187832.956,"size":30500}] 31:{"id":"46990553e11af88f","slug":"art-history-jobs-2011-2020","title":"Art History Jobs, 2011 - 2020","thumbnail":"056639b910efbb7129b7262c167f5db8e5fdf14f0ccf9f901b4375b45bc5e1ea","access_level":"public","create_time":"$D2020-11-24T02:56:29.016Z","update_time":"$D2022-01-02T07:51:56.824Z","view_time":null,"first_public_time":"$D2020-12-20T04:34:45.591Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"fb1662282f83cbbe","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":"starter_2024"},"version":2952,"publish_version":2952,"role":null,"authored":false,"authors":[{"type":"individual","id":"06c9c56537cc9419","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":null}],"members":[{"type":"individual","id":"06c9c56537cc9419","login":"stephanietuerk","name":"Stephanie Tuerk","avatar_url":"https://avatars-next.observableusercontent.com/fd20d414d35cafe26a79b8e6c7b5a1c053320c918647f47ffdd64ff133c2e2ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Art History Jobs, 2011 - 2020","cells":[{"id":0,"value":"md`# Art History Jobs, 2011 - 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"inputData = FileAttachment(\"art_history_20201219.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"more = {\n const pStyle = 'font-size: 0.9rem;';\n const pPadding = 'padding-top: 0.5rem;';\n const text = html`

Explore in depth

If you want to dig into the data a bit more, you can use the group of charts and selectors below to explore the data field by field, to understand trends in tenure-track status and rank of jobs, and to understand change in jobs over time.

`;\n return text;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"charts = {\n const div = d3\n .create('div')\n .attr('class', 'explore-data-charts')\n .style('display', 'flex')\n .style('flex-wrap', 'wrap');\n\n const lineConfig = {\n selections: compareFieldsLineSelections,\n data: compareFieldsLineData,\n chartName: 'compare-fields-line',\n titles: ''\n };\n const lineChart = makeLineChart(lineConfig);\n div.node().appendChild(lineChart);\n const barDiv = div.append('div').attr('class', 'compare-fields-bar-chart');\n\n const barVar = 'diffPercent';\n\n barChart({\n div: barDiv,\n data: aggregateBarData(lineConfig.selections)\n .slice()\n .sort((a, b) => barSort(a[barVar], b[barVar])),\n selections: compareFieldsLineSelections,\n barVar\n });\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2511,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2454,"value":"md`### End of visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"chartDims = {\n const bar = {\n width: 354,\n height: 500,\n paddingTop: 20,\n barPadding: .4,\n tooltipYOffset: 30,\n margin: {\n left: 90,\n right: 90,\n top: 46,\n bottom: 20\n }\n };\n const stackedArea = {\n width: 570,\n height: 460,\n margin: {\n top: 10,\n right: 0,\n bottom: 10,\n left: 30\n }\n };\n const table = {\n width: 324,\n margin: {\n top: 16,\n left: 30,\n right: 0\n }\n };\n const line = {\n width: 580,\n height: 490,\n margin: {\n top: 46,\n right: 20,\n bottom: 20,\n left: 30\n },\n title: {\n marginSide: 18\n }\n };\n return { line, bar, stackedArea, table };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"md`#### Stacked Area Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1481,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"md`#### Table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"mutable tableConfig = {\n const initVar = 'allYear';\n const colVars = Object.keys(tableData[0]).slice(1);\n return {\n colVars,\n state: colVars.reduce((acc, header, i) => {\n acc[header] = {\n isSelected: header === initVar ? true : false,\n sortDescending: true\n };\n return acc;\n }, {})\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"function makeTable(div, config, data) {\n const sortedTableData = sortCompareFieldsTableData(config, data);\n baseTable(div, sortedTableData, config);\n handleSortArrows(div, config);\n\n div.selectAll('.lower-row-header.sort').on('click', (event, d) => {\n const colVar = event.currentTarget.getAttribute('colVar');\n updateTableConfig(colVar);\n colorizeTable(div, config);\n sortTableRows(div, config, colVar);\n handleSortArrows(div, tableConfig);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"function getSelectedColVar(config) {\n return Object.entries(config.state).find(\n ([k, v]) => v.isSelected === true\n )[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"function lineTextWrap(text, width) {\n text.attr('dy', 0);\n const textY = text.attr('y');\n svgTextWrap(text, width);\n const tspans = text.selectAll('tspan');\n tspans.attr('x', 0);\n if (tspans.size() > 1) {\n const y = -7 - 14 * tspans.size();\n text.attr('y', y);\n tspans.attr('y', y);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"function colorizeTable(div, config) {\n const colVar = getSelectedColVar(config);\n div\n .selectAll('th')\n .classed('selected', false)\n .style('color', 'black')\n .style('font-weight', '400');\n const header = div\n .selectAll(`th.sort[colVar=${colVar}]`)\n .classed('selected', true)\n .style('color', highlightColor)\n .style('font-weight', 700);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"function handleSortArrows(div, config) {\n const colVar = getSelectedColVar(config);\n div\n .selectAll('th .up-arrow')\n .style('color', 'unset')\n .style('opacity', 0.4);\n div\n .selectAll('th .down-arrow')\n .style('color', 'unset')\n .style('opacity', 0.4);\n const arrow = config.state[colVar].sortDescending\n ? '.down-arrow'\n : '.up-arrow';\n const otherArrow = arrow === '.down-arrow' ? '.up-arrow' : '.down-arrow';\n div\n .select(`.lower-row-header.selected ${arrow}`)\n .style('color', config.color)\n .style('opacity', 1);\n div.select(`.lower-row-header.selected ${otherArrow}`).style('opacity', 0.4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"function sortTableRows(div, config, colVar) {\n const tableRows = div.selectAll('.compare-fields-table tbody tr');\n tableRows.sort((a, b) => {\n return config.state[colVar].sortDescending\n ? tableDataSort(a[colVar], b[colVar], d3.descending)\n : tableDataSort(a[colVar], b[colVar], d3.ascending);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"function updateTableConfig(colVar) {\n const currentSelectionState = tableConfig.state[colVar].isSelected;\n if (currentSelectionState) {\n tableConfig.state[colVar].sortDescending = !tableConfig.state[colVar]\n .sortDescending;\n } else {\n tableConfig.state[colVar].isSelected = true;\n tableConfig.state[colVar].sortDescending = true;\n const otherVars = tableConfig.colVars.filter(x => x !== colVar);\n otherVars.forEach(header => (tableConfig.state[header].isSelected = false));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"function tableDataSort(a, b, sortDirectionFx) {\n if (typeof a === 'string' && typeof b === 'string') {\n return 0;\n } else if (typeof a === 'string') {\n return 1;\n } else if (typeof b === 'string') {\n return -1;\n } else {\n return sortDirectionFx(a, b);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"function sortCompareFieldsTableData(config, data) {\n const sortBy = Object.entries(config.state).find(\n ([k, v]) => v.isSelected === true\n )[0];\n return data\n .slice()\n .sort((a, b) =>\n config.state[sortBy].sortDescending\n ? tableDataSort(a[sortBy], b[sortBy], d3.descending)\n : tableDataSort(a[sortBy], b[sortBy], d3.ascending)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"tableData = {\n const currentYear = '2020';\n const allFieldsData = summedData.filter(\n x => (x.isTt === 'All') & (x.rank === 'All')\n );\n return variableValues.field.map(field => {\n const fieldData = allFieldsData.filter(x => x.field === field);\n const object = {};\n object.field = field;\n const priorYears = fieldData.filter(x => x.year !== '2020');\n object.allYear =\n priorYears.reduce((acc, cur) => {\n acc = acc + cur.count;\n return acc;\n }, 0) / priorYears.length;\n object.current = fieldData.find(x => x.year === currentYear).count;\n return object;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1626,"value":"md`#### Line Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"function baseLineChart(svg, data, line, x, y, xAxis, yAxis, ttFormatter) {\n svg.append('g').call(xAxis);\n\n svg.append('g').call(yAxis);\n\n const g = svg\n .append('g')\n .attr('fill', 'none')\n .attr('stroke-width', 2)\n .attr('stroke-linejoin', 'round')\n .attr('stroke-linecap', 'round');\n\n const usablePaths = g\n .selectAll('path.usable')\n .data(data.series)\n .join('g')\n .attr('class', 'line')\n .append('path')\n .style('mix-blend-mode', 'multiply')\n .attr('d', d => line(d.values))\n .attr('stroke', d => fieldColor(d.name.split(', ')[0]))\n .attr('stroke-width', 2);\n\n const allLines = g.selectAll('g.line');\n svg.call(hover, allLines, x, y, data, ttFormatter);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"function createLineTooltip(svg) {\n const dot = svg.append(\"g\").attr(\"display\", \"none\");\n\n dot.append(\"circle\").attr(\"r\", 2.5);\n\n const tooltipTextClasses = ['title', 'value'];\n\n tooltipTextClasses.forEach(className => {\n dot.append('text').attr('class', `tooltip-${className} tooltip-text`);\n });\n\n return dot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"function addLineTooltipText(dot, xCoord, yCoord, name, value, formatter) {\n dot.attr(\"transform\", `translate(${xCoord},${yCoord})`);\n dot\n .select(\".tooltip-title\")\n .text(name)\n .attr('y', -22);\n\n dot\n .select(\".tooltip-value\")\n .text(formatter(value))\n .attr('y', -9);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"rankDashArray = d3\n .scaleOrdinal()\n .domain(variableValues.rank)\n .range([null, '4', '8 4 2 4', '8 4', '8 8', '2 4', '2 8 8 8', '2 8', '2 12'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"isTtDashArray = d3\n .scaleOrdinal()\n .domain(variableValues.isTt)\n .range([null, '4', '4 8', '2 12'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"compareFieldsLineFiltersSel = Object.entries(compareFieldsLineSelections)\n .filter(([key, value]) => key.includes('UseType'))\n .reduce((acc, arr) => {\n acc[arr[0].replace('UseType', '')] = arr[1];\n return acc;\n }, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"chartCurve = d3.curveLinear","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"md`#### Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2248,"value":"function barSort(a, b) {\n if (typeof a === 'string' && typeof b === 'string') {\n return 0;\n } else if (typeof a === 'string') {\n return 1;\n } else if (typeof b === 'string') {\n return -1;\n } else {\n return d3.descending(a, b);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"function barTitleTextWrap(text, width) {\n svgTextWrap(text, width);\n const tspans = text.selectAll('tspan');\n if (tspans.size() > 1) {\n tspans.attr('y', -6 * (tspans.size() - 1));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"function barTextWrap(text, width) {\n text.attr('dy', 0);\n text.attr('y', 0);\n svgTextWrap(text, width);\n text.each((d, i, nodes) => {\n const text = d3.select(nodes[i]);\n const tspans = text.selectAll('tspan');\n tspans.style('dominant-baseline', 'central');\n if (tspans.size() > 1) {\n tspans.attr('y', -3.5 * tspans.size());\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"function sortCompareBarData(config, data) {\n const sortBy = Object.entries(config.state).find(\n ([k, v]) => v.isSelected === true\n )[0];\n return data\n .slice()\n .sort((a, b) =>\n config.state[sortBy].sortDescending\n ? tableDataSort(a[sortBy], b[sortBy], d3.descending)\n : tableDataSort(a[sortBy], b[sortBy], d3.ascending)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"htmlTooltipDims = ({ height: 200, width: 160 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`#### Selectors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"function makeFilterSelectorsBlock(groupName, varName, options, selected) {\n const container = html``;\n const useTypeOptions = ['Filter', 'Disaggregate'];\n const useType = makeFilterUseTypeBlock(groupName, varName);\n const selects = makeRadioSelects(\n groupName,\n varName,\n options,\n 'var-select',\n selected\n );\n container.appendChild(useType);\n container.appendChild(selects);\n const selectedContainer = d3.select(container);\n const varSelectors = selectedContainer.selectAll('.var-select-block');\n\n selectedContainer.select('.var-select-block.isTt').style('height', '50px');\n selectedContainer\n .select('.var-select-block.isTt')\n .selectAll('.radio-label')\n .style('margin-right', '64px');\n selectedContainer.select('.var-select-block.rank').style('height', '100px');\n\n varSelectors.selectAll('p').remove();\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"function setFilterVarGroupToDisagg(groupName, filter, div, node) {\n const useTypeDiv = node.parentNode.parentNode.parentNode;\n const filterBlockDiv = useTypeDiv.parentNode;\n const selectDiv = filterBlockDiv.querySelector(\n 'div.selector-block.var-select-block'\n );\n const defaultSel = variableValues[filter].slice(1);\n const newSelect = makeMultiChecks(\n groupName,\n filter,\n variableValues[filter],\n 'var-select',\n defaultSel\n );\n div.node().value[filter] = defaultSel;\n d3.select(selectDiv).remove();\n useTypeDiv.parentNode.insertBefore(newSelect, useTypeDiv.nextSibling);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"function setFilterVarGroupToFilter(groupName, filter, div, node) {\n const useTypeDiv = node.parentNode.parentNode.parentNode;\n const filterBlockDiv = useTypeDiv.parentNode;\n const selectDiv = filterBlockDiv.querySelector(\n 'div.selector-block.var-select-block'\n );\n const defaultSel = variableValues[filter][0];\n const newSelect = makeRadioSelects(\n groupName,\n filter,\n variableValues[filter],\n 'var-select',\n defaultSel\n );\n div.node().value[filter] = defaultSel;\n d3.select(selectDiv).remove();\n useTypeDiv.parentNode.insertBefore(newSelect, useTypeDiv.nextSibling);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"function setFieldCheckboxesToMultiSelect(checkboxes) {\n const getInput = label => label.parentNode.querySelector('input');\n\n checkboxes.on('click', (event, d) => {\n const isChecked = !event.currentTarget.parentNode.querySelector('input')\n .checked;\n styleFieldCheckbox(d3.select(event.currentTarget), isChecked);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"function setHiddenRadioInputClickListener(sel, cssSelector) {\n const block = sel.select(cssSelector);\n const options = block.selectAll('input');\n options.on('change', event =>\n toggleRadioChecks(event.currentTarget, options)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"function toggleRadioChecks(node, inputs) {\n d3.select(node).attr('checked', '');\n const otherInputs = inputs.filter(\n (d, i, nodes) => nodes[i].name === node.name && nodes[i].id !== node.id\n );\n otherInputs.attr('checked', null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"function styleFieldCheckbox(selection, isChecked) {\n if (isChecked) {\n selection\n .style('background', (d, i, nodes) => {\n const color = fieldColor(d3.select(nodes[i]).text());\n return hexToRgba(color, 0.8);\n })\n .style('color', 'white')\n .style('font-weight', '700');\n } else if (!isChecked) {\n selection\n .style('color', (d, i, nodes) => {\n const color = fieldColor(d3.select(nodes[i]).text());\n return hexToRgba(color, 0.8);\n })\n .style('background', 'none')\n .attr('stroke', 'lightgray');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"function makeFilterUseTypeBlock(groupName, filterName) {\n const options = ['Filter', 'Disaggregate'];\n return html`

${\n filterNames[filterName]\n }

\n ${['Filter', 'Disaggregate'].map((t, i) =>\n makeRadioSelect(groupName, `${filterName}UseType`, t, i === 0)\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"function makeSelectorBlock(\n groupName,\n varName,\n options,\n varType,\n selected,\n selType\n) {\n let selectors;\n if (selType === types.FORMEL.RADIOSELECTS) {\n selectors = options.map(o =>\n makeRadioSelect(groupName, varName, o, o === selected)\n );\n } else if (selType === types.FORMEL.MULTICHECKBOX) {\n selectors = options.map(o =>\n makeCheckbox(groupName, varName, o, selected.includes(o))\n );\n }\n return html`

Select a ${varName}

\n ${selectors}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"function makeMultiChecks(groupName, varName, options, type, selected) {\n return html`

\n ${options.map(o =>\n makeCheckbox(groupName, varName, o, selected.includes(o))\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"function makeRadioSelects(groupName, varName, options, type, selected) {\n return html`

\n ${options.map(o => makeRadioSelect(groupName, varName, o, o === selected))}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"function makeCheckbox(groupName, varName, option, isSelected) {\n return html`

${option}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"function makeRadioSelect(groupName, varName, option, isSelected) {\n return html`

\n \n ${option}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"function makeTimeSlider(selectorObj, groupName) {\n const container = html`\n

\n `;\n\n const slider = html`

`;\n slider.id = `${selectorObj.name}-timeSlider-${groupName}`;\n container.appendChild(slider);\n\n const values = selectorObj.values.map(x => +x);\n const defaultSelection = [values[0], values[values.length - 1]];\n\n noUiSlider.create(slider, {\n start: defaultSelection,\n connect: true,\n step: 1,\n range: {\n min: values[0],\n max: values[values.length - 1]\n },\n tooltips: [true, true],\n format: {\n to: val => val,\n from: val => d3.format('.0f')(val)\n }\n });\n\n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"types = ({\n CHART: {\n COMPAREFIELDS: 'compare-fields-line',\n LINE: 'line'\n },\n FORMEL: {\n SELECTSINGLE: 'single',\n SELECTMULTI: 'multi',\n TOGGLE: 'toggle',\n MULTICHECKBOX: 'multiCheckbox',\n RADIOSELECTS: 'radioSelects',\n TIMESLIDER: 'timeSlider'\n },\n FILTER: {\n ISTT: 'isTt',\n RANK: 'rank',\n FILTER: 'filter',\n DISAGGREGATE: 'disaggregate'\n },\n TITLE: {\n RUNOUT: 'runout-note',\n MAIN: 'main-title',\n LINES: 'lines-label',\n DATASOURCE: 'data-source',\n DISAGG: 'disagg',\n FILTERSALL: 'filters-all',\n TIMERANGE: 'time-range',\n INSTRUCTIONS: 'instructions'\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1980,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`#### Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"function titleCase(str) {\n return lowerCaseName(str).split(/([_\\s-])/g).map(function(word) {\n return (word.charAt(0).toUpperCase() + word.slice(1));\n }).join('');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"function lowerCaseName(name) {\n const twoCaps = /^.*[A-Z]{2,}.*/g;\n const oneCap = /[A-Z]/g;\n const letter = /[A-Za-z]/g;\n const dash = /-/g;\n const shouldRemain = str => {\n return (\n str.match(twoCaps) ||\n (str.length === 1 && str.match(oneCap)) ||\n str === 'Medicaid' ||\n str === 'Medicare'\n );\n };\n\n const nameArray = name.includes(' ') ? name.split(' ') : [name];\n const casedWords = nameArray.map(word => {\n if (word.match(dash)) {\n const fragArray = word.split('-');\n const casedFrags = fragArray.map(frag => {\n return shouldRemain(frag) ? frag : frag.toLowerCase();\n });\n return casedFrags.join('-');\n }\n if (shouldRemain(word)) {\n return word;\n } else {\n return word.toLowerCase();\n }\n });\n return casedWords.join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1805,"value":"enDash = '\\u2013'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"function crossLineObjects(a, b) {\n return a.map(j => b.map(k => [].concat(j, k))).flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"function hexToRgba(hex, opacity) {\n const c = d3.color(hex);\n c.opacity = opacity;\n return c + \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"function filterDataByTime(dataset, timeRange) {\n const getDate = val => new Date(val.year);\n return dataset.filter(\n x =>\n getDate(x) >= new Date(timeRange.dateStart) &&\n getDate(x) <= new Date(timeRange.dateEnd)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"fieldColor = d3\n .scaleOrdinal()\n .domain(variableValues.field)\n .range([\n \"#0088FF\",\n \"#eda4ba\",\n \"#38f0ac\",\n \"#40655e\",\n \"#eb1138\",\n \"#832522\",\n \"gold\",\n '#63a3b7',\n \"#91799c\",\n \"#88dc40\",\n \"#60409b\",\n \"#d6da7d\",\n \"#9620fc\",\n \"#178535\",\n \"#ed2bb1\",\n \"#ef972d\",\n \"#20d8fd\",\n '#ff5f23',\n \"#8d630a\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"function svgTextWrap(text, width) {\n text.each((d, i, nodes) => {\n const text = d3.select(nodes[i]);\n const measure = text.text(); //debugging\n const words = text\n .text()\n .split(/\\s+/)\n .reverse();\n let word;\n let line = [];\n let lineNumber = 0;\n const lineHeight = 1; // ems\n const y = text.attr('y');\n const x = text.attr('x');\n const dy = 0;\n let tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (getTextWidth(tspan.text()) > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\")\n .text(word);\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"function getTextWidth(text) {\n const context = document.createElement(\"canvas\").getContext(\"2d\");\n return context.measureText(text).width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"function indefArticle(str) {\n return ['a', 'e', 'i', 'o', 'u'].includes(str.charAt(0)) ? 'an' : 'a';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"function removeItemFromArray(item, arr) {\n const index = arr.indexOf(item);\n arr.splice(index, 1);\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"function makeVarNameFromDisplayName(str) {\n const newStr = str\n .toLowerCase()\n .replace(/\\s\\/\\s/g, '-')\n .replace(/\\s/g, '-');\n return newStr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"function filterDataByObject(data, object) {\n const filters = Object.keys(object);\n let filteredData = data;\n Object.entries(object).forEach(([k, v]) => {\n if (v !== null) {\n if (Array.isArray(v)) {\n filteredData = filteredData.filter(obj => v.includes(obj[k]));\n } else if (!Array.isArray(v)) {\n filteredData = filteredData.filter(obj => obj[k] === v);\n }\n }\n });\n return filteredData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"varableNames = {\n const names = {};\n const vars = ['field', 'isTt', 'rank'];\n vars.forEach(v => {\n variableValues[v].forEach(x => {\n names[makeVarNameFromDisplayName(x)] = x;\n });\n });\n names['count'] = 'Number of jobs';\n names['percent'] = 'Percent of all jobs';\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"filterNames = ({\n isTt: 'tenure status',\n rank: 'job rank'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"variableValues = {\n const vars = [\n 'year',\n 'field',\n 'subfield',\n 'school',\n 'isTt',\n 'rank',\n 'school'\n ];\n return Object.keys(data[0])\n .filter(k => vars.includes(k))\n .reduce((obj, key) => {\n let values;\n if (key === types.FILTER.RANK) {\n values = [...new Set(data.map(obj => obj[key]).flat())];\n } else {\n values = [...new Set(data.map(obj => obj[key]))];\n }\n if (key === 'field') {\n values.sort(d3.ascending);\n values.unshift('All');\n } else if (key === 'isTt') {\n const sortOrder = dataConfig.varsSort.isTt;\n values = sortValues(values, sortOrder);\n values.unshift('All');\n } else if (key === 'rank') {\n const sortOrder = dataConfig.varsSort.rank;\n values = sortValues(values, sortOrder);\n values.unshift('All');\n }\n obj[key] = values;\n return obj;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1960,"value":"fieldNamesDict = {\n return fieldNamesFullShort.reduce((acc, f) => {\n acc[f.full] = f.short;\n return acc;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"function sortValues(values, order) {\n const sortedArray = [];\n order.forEach(m => {\n const index = values.indexOf(m);\n if (index > -1) {\n sortedArray.push(values[index]);\n values.splice(index, 1);\n }\n });\n return sortedArray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"dataConfig = {\n return {\n rank: {\n unknown: 'Unknown',\n assistant_prof: 'Assistant professor',\n associate_prof: 'Associate professor',\n full_prof: 'Full professor',\n open_rank: 'Open rank',\n contract: 'Contract position',\n lecturer: 'Lecturer',\n postdoc: 'Postdoc',\n vap: 'Visiting position'\n },\n propNames: {\n field: 'subfield',\n isTt: 'tenture track status',\n rank: 'position rank'\n },\n varsSort: {\n isTt: ['Tenure track', 'Non-tenure track', 'Unknown'],\n rank: [\n 'Assistant professor',\n 'Associate professor',\n 'Full professor',\n 'Open rank',\n 'Lecturer',\n 'Postdoc',\n 'Visiting position',\n 'Unknown'\n ]\n },\n filterVars: ['isTt', 'rank']\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"function addPercentData(data) {\n return data.map(x => {\n if (x.isTt === 'All' && x.rank === 'All' && x.field === 'All') {\n x.percent = 1;\n return x;\n } else {\n const fieldYearCount = data.find(\n o =>\n o.year === x.year &&\n o.field === 'All' &&\n o.isTt === 'All' &&\n o.rank === 'All'\n ).count;\n x.percent = +d3.format('.5f')(x.count / fieldYearCount);\n return x;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2571,"value":"function addRollingAvg(data) {\n return data.map(x => {\n const thisYear = +x.year;\n const priorYears = data.filter(\n d =>\n d.field === x.field &&\n d.isTt === x.isTt &&\n d.rank === x.rank &&\n +d.year <= thisYear\n );\n const avg =\n priorYears.reduce((acc, cur) => {\n acc = acc + cur.count;\n return acc;\n }, 0) / priorYears.length;\n x.avg = avg;\n return x;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"summedData = {\n return csv.map(x => {\n x.count = +x.count;\n x.percent = +x.percent;\n return x;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2812,"value":"csv = FileAttachment(\"summedData@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data = inputData.map(obj => inputDataTransform(obj))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function inputDataTransform(obj) {\n const getField = subfield => {\n let field;\n fieldGroupings.forEach(group => {\n if (group.subfields.includes(subfield)) {\n field = group.category;\n }\n });\n return field;\n };\n const getRank = rankStr => {\n const split = rankStr.split(',');\n if (Array.isArray(split)) {\n return split.map(x => dataConfig.rank[x]);\n } else {\n return [split];\n }\n };\n const getTtStatus = ttStr => {\n if (ttStr === 'true') {\n return 'Tenure track';\n } else if (ttStr === 'false') {\n return 'Non-tenure track';\n } else {\n return 'Unknown';\n }\n };\n return {\n year: `${obj.year}`,\n field: getField(obj.subfield),\n subField: obj.subfield,\n title: obj.title,\n school: obj.school,\n department: obj.department,\n location: obj.location,\n isTt: getTtStatus(obj.is_tt),\n rank: getRank(obj.rank),\n text: obj.text\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`#### Hand-Coded Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"highlightColor = '#0088FF'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"noUiSlider = require(\"nouislider@15.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1","titling":"auto"}} 32:"$31:body"