31:Tb2e,detailJobsGrouped = { const filtered = mtJobsDetail // only Statewide, 2017 const grouped = d3.nest() .key(d => d.cat) .key(d => d.sector) .entries(filtered) grouped.forEach(category => { category.values.forEach(sector => { sector.employment = sector.values.find(d => d.subsector === 'total').employment sector.values = sector.values.filter(d => d.subsector !== 'total') }) category.employment = category.values.reduce((acc, obj) => acc + obj.employment, 0) }) // add in fractions and cumulative fractions --> Sort first by size const stateTotalEmployment = grouped.find(d => d.key === 'TOTAL').employment let categoryRelCumulative = 0 grouped .filter(sector => sector.key !== 'TOTAL') // Avoids double-counting jobs in total .sort((a,b) => a.employment - b.employment) .forEach(category => { // let sectorRelCumulative = categoryRelCumulative // initialize to start point for category let sectorRelCatCumulative = 0 category.values .sort((a,b) => b.employment - a.employment) .forEach(sector => { // let subsectorRelCumulative = sectorRelCumulative let subsectorRelCatCumulative = sectorRelCatCumulative sector.values .sort((a,b) => b.employment - a.employment) .forEach(subsector => { // SUB-SECTOR TRANSFORMATION if (subsector.employment) { subsector.relEmployment = subsector.employment / stateTotalEmployment subsector.relCatEmployment = subsector.employment / category.employment } else { subsector.relEmployment = 0 // handles null values subsector.relCatEmployment = 0 } // subsector.minBound = subsectorRelCumulative // subsector.maxBound = (subsectorRelCumulative += subsector.relEmployment) subsector.minBoundInCat = subsectorRelCatCumulative subsector.maxBoundInCat = (subsectorRelCatCumulative += subsector.relCatEmployment) }) // SECTOR TRANSFORMATION sector.relEmployment = sector.employment / stateTotalEmployment sector.relCatEmployment = sector.employment / category.employment // sector.minBound = sectorRelCumulative // sector.maxBound = (sectorRelCumulative += sector.relEmployment) sector.minBoundInCat = sectorRelCatCumulative sector.maxBoundInCat = (sectorRelCatCumulative += sector.relCatEmployment) }) // CATEGORY TRANSFORMATION category.relEmployment = category.employment / stateTotalEmployment category.minBound = categoryRelCumulative category.maxBound = (categoryRelCumulative += category.relEmployment) }) return grouped .filter(sector => sector.key !== 'TOTAL') // Avoids double-counting jobs in total }32:T1ff6,buildDetailStatePictogram = (opts) => { const data = opts.data const year = opts.year const geo = opts.geo const width = opts.width const height = opts.height const margin = opts.margin || ({top: 20, right: 10, bottom: 10, left: 20}) const template = opts.template || mtTemplate const boxCount = opts.boxCount || 800 // from manually created diagram const boxWidth = opts.boxWidth || 15 const boxMargin = opts.boxMargin || 0 const boxStroke = opts.boxStroke || '#fff' const boxStrokeWidth = opts.boxStroke || 1 const svg = d3.select(DOM.svg(width, height)); const plot = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`) const path = d3.geoPath() // create boxes as geojson objects // See https://macwright.org/2015/03/23/geojson-second-bite.html // template has 800 boxes, arranged in rows and columns const boxes = { type: 'FeatureCollection', features: [], }; // build squares from template for(let iCol=0; iCol [d.properties.col,d.properties.row]) boxesInCatCoords .sort((a,b) => { // sort ascending by column squares on same row, alternating direction if (a[1] === b[1] ) return (a[1] % 2 === 0) ? a[0] - b[0] : b[0] - a[0] return a[1] - b[1] // sort by column }) const iAcross = boxesInCatCoords.findIndex(d => (d[0] === boxCoords[0]) && (d[1] === boxCoords[1])) return iAcross / boxesInCat.length } const categories = [...new Set(data.map(d => d.key))] boxes.features.forEach((box, i) => { const locDown = i / boxCount // location flowing down, relative to whole state. Should be between 0 and 1 const boxCategory = data.find(category => (locDown >= category.minBound) && (locDown < category.maxBound)) box.properties.category = boxCategory.key box.properties.catValues = boxCategory.values box.properties.color = colorScale.sector(boxCategory.key) }) boxes.features.forEach((box, i) => { const boxesInCat = boxes.features.filter(d => d.properties.category === box.properties.category) const locAcrossInCat = getAcrossLoc(box, boxesInCat) const catValues = box.properties.catValues const boxSector = catValues.find(sector => (locAcrossInCat >= sector.minBoundInCat) && (locAcrossInCat < sector.maxBoundInCat)) box.properties.sector = boxSector.key box.properties.sectorValues = boxSector.values if (boxSector.values.length > 0) { const boxSubsector = boxSector.values.find(subsector => (locAcrossInCat >= subsector.minBoundInCat) && (locAcrossInCat < subsector.maxBoundInCat)) // console.assert(boxSubsector, boxSector.values, locAcrossInCat) box.properties.subsector = boxSubsector ? boxSubsector.subsector : `Other ${displayLabels(boxSector.key)}` box.properties.employmentLabel = boxSubsector ? boxSubsector.employment : 'A few' } else { box.properties.subsector = displayLabels(boxSector.key) box.properties.employmentLabel = boxSector.employment } }) function dissolve(geojson, groupByKey){ // convert to TopoJson and back again for doing shape merges // return as array of geojson features const groups = [... new Set(boxes.features.map(d => d.properties[groupByKey]))] const regionsTopojson = topoServer.topology({layer: geojson}, 10000000) const mergedCategories = groups.map(groupKey => { const geometries = regionsTopojson.objects.layer.geometries const filtered = geometries.filter(d => d.properties[groupByKey] == groupKey) const propertiesFrom = geojson.features.filter(d => d.properties[groupByKey] == groupKey)[0] return { type: 'Feature', geometry: topojson.merge(regionsTopojson, filtered), properties: { groupKey: groupKey, sector: propertiesFrom.properties.sector, subsector: propertiesFrom.properties.subsector, employmentLabel: propertiesFrom.properties.employmentLabel } } }) return mergedCategories } const byCategory = dissolve(boxes, 'category') const bySector = dissolve(boxes, 'sector') const bySubSector = dissolve(boxes, 'subsector') // Drawing function drawFeatures(features, opts){ const shapes = plot.append('g') .attr('class', 'feature-container'); shapes.selectAll('.feature') .data(features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', 1) .attr('fill', d => opts.fill || (d.properties.color || 'red')) .attr('fill-opacity', opts.fillOpacity || 1) .attr('stroke', opts.strokeColor || 'white') .attr('stroke-width', opts.strokeWidth || 1) .attr('stroke-opacity', opts.strokeOpacity || 1) .on("mouseover", function() { d3.select(this).attr("fill-opacity", 0.5).raise(); }) .on("mouseout", function() { d3.select(this).attr("fill-opacity", opts.fillOpacity).lower(); }) .on('click', d => console.log(`${displayLabels(d.properties.sector)} / ${d.properties.subsector}`, `${d.properties.employmentLabel} jobs`)) .append("title") .text(d => `${displayLabels(d.properties.sector)} / ${d.properties.subsector} - ${d.properties.employmentLabel} jobs`) } function drawLabels(features, opts){ const markers = plot.append('g') .attr('class', 'marker-container') .selectAll('.markers') .data(features).enter() .append('g') markers.append('text') .attr('class', 'marker-point') .attr('x', opts.xPlacement || (d => path.centroid(d)[0])) .attr('y', opts.yPlacement || (d => path.centroid(d)[1])) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-weight', opts.fontWeight || 'normal') .attr('fill', opts.fill || '#000') .attr('font-size', opts.fontSize || 12) .attr('pointer-events', 'none') .text(opts.labels || (d => d.properties.groupKey)) } drawFeatures(boxes.features, {strokeColor: '#fff', strokeWidth: 0.5, strokeOpacity: 0.2}) drawFeatures(bySubSector, {strokeColor: '#000', strokeWidth: 1, strokeOpacity: 0.4, fill: '#fff', fillOpacity: '0'}) drawFeatures(bySector, {strokeColor: '#000', strokeWidth: 1.5, strokeOpacity: 0.4, fill: 'none',}) drawFeatures(byCategory, {strokeColor: '#000', strokeWidth: 2, fill: 'none',}) // drawLabels(bySubSector, { // labels: (d => d.properties.subsector), // fontSize: 10, fill: '#fff', // }) drawLabels(bySector, { labels: (d => displayLabels(d.properties.sector)), fontSize: 12, fontWeight: 'bold', }) drawLabels(byCategory, { yPlacement: d => -10, fontSize: 18, fontWeight: 'bold', }) return svg.node() }33:T1445,mapJobsByCounty = (opts) => { const dataLayer = opts.dataLayer const plotDim = opts.plotDim const maxRadius = opts.maxRadius || 15 const maxDimVal = opts.maxDimVal || 30000 const markerStyle = opts.markerStyle || {} // defaults to values below const markerOpacity = markerStyle.opacity || 1 const markerFill = markerStyle.fill || (d => '#228') const markerFillOpacity = markerStyle.fillOpacity || 0.25 const markerStroke = markerStyle.stroke || markerFill const markerStrokeWidth = markerStyle.strokeWidth || 1 const markerStrokeOpacity = markerStyle.strokeOpacity || 0.9 const baseLayer = opts.baseLayer const baseLayerStyle = opts.baseLayerStyle || {} // defaults to values below const baseOpacity = baseLayerStyle.opacity || 1 const baseFill = baseLayerStyle.fill || (d => '#ddd') const baseFillOpacity = baseLayerStyle.fillOpacity || 1 const baseStroke = baseLayerStyle.stroke || '#fff' const baseStrokeWidth = baseLayerStyle.strokeWidth || 1 const baseStrokeOpacity = baseLayerStyle.strokeOpacity || 1 const height = opts.height || 300 // width comes predefined const margin = opts.margin || {top: 10, left: 40, right: 40, bottom: 10} const projection = opts.projection || d3.geoMercator() // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style('border', '1px solid #ddd') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) projection.fitSize([plotWidth, plotHeight], baseLayer) // Scales const rScale = d3.scaleSqrt() // .domain([0, maxDimVal]) // for drawing circles .domain([0, 30000]) // for scaling arrows .range([0.2, 10]) const path = d3.geoPath() .projection(projection); // Drawing function drawFeatures(features){ const shapes = plot.append('g') .attr('class', 'feature-container'); shapes.selectAll('.feature') .data(features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', baseOpacity) .attr('fill', baseFill) .attr('fill-opacity', baseFillOpacity) .attr('stroke', baseStroke) .attr('stroke-width', baseStrokeWidth) .attr('stroke-opacity', baseStrokeOpacity) } function drawRegionOutlines(baseLayer, groupby){ // convert to TopoJson and back again for removing common borders (somewhat messy) const regions = [... new Set(baseLayer.features.map(d => d.properties[groupby]))] const regionsTopojson = topoServer.topology({geos: baseLayer}, 430) // merge and return as array of GeoJson features const mergedRegions = regions.map(region => { const geometries = regionsTopojson.objects.geos.geometries const filtered = geometries.filter(d => d.properties.region == region) return { type: 'Feature', geometry: topojson.merge(regionsTopojson, filtered) } }) const shapes = plot.append('g') .attr('class', '.feature-container outline') shapes.selectAll('.feature') .data(mergedRegions).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', baseOpacity) .attr('fill', 'none') .attr('fill-opacity', baseFillOpacity) .attr('stroke', '#444') .attr('stroke-width', 1.5) .attr('stroke-linejoin', 'round') .attr('stroke-opacity', baseStrokeOpacity) } function drawMarkers(features, dim){ const markers = plot.append('g') .attr('class', 'marker-container') .selectAll('.markers') .data(features).enter() .append('g'); markers.append('circle') .attr('class', 'marker-point') .attr('cx', d => path.centroid(d)[0]) .attr('cy', d => path.centroid(d)[1]) .attr('r', d => rScale(d.properties[dim])) .attr('opacity', markerOpacity) .attr('fill', markerFill) .attr('fill-opacity', markerFillOpacity) .attr('stroke', markerStroke) .attr('stroke-width', markerStrokeWidth) .attr('stroke-opacity', markerStrokeOpacity) } function addSizeLegend(rScale, loc, cells){ // relies on d3-legend const legend = d3Legend.legendSize() .scale(rScale) .shape('circle') .orient('vertical') .shapePadding(50) .cells(cells) .labelFormat(d3.format(",")) svg.append('g') .attr('class', 'scaleLegend') .attr('transform', `translate(${loc[0]},${loc[1]})`) .call(legend) svg.select('.scaleLegend').selectAll('circle') .attr('opacity', markerOpacity) .attr('fill', markerFill) .attr('fill-opacity', markerFillOpacity) .attr('stroke', markerStroke) .attr('stroke-width', markerStrokeWidth) .attr('stroke-opacity', markerStrokeOpacity) } // plotting drawFeatures(baseLayer.features) drawRegionOutlines(baseLayer, 'region') // Draw jobs drawMarkers(dataLayer, plotDim) addSizeLegend(rScale, [50,50], [1000, 10000, 100000]) return svg.node(); }34:T1bc1,buildRegionPictogram = (opts) => { const data = opts.data const year = opts.year const compareYear = opts.compareYear const denom = opts.denom || total2016jobs // used for box size const showCompareBoxes = opts.showCompareBoxes || false const regionSortOrder = opts.regionSortOrder || ['Mountains', 'Plains', 'Billings', 'Missoula','Great Falls', 'Bozeman', 'Kalispell', 'Helena', 'Butte'] const sectorSortOrder = opts.sectorSortOrder || ["OTHER", "MANUFACTURING","CONSTRUCTION", "NATURAL RESOURCES", "HEALTHCARE", "GOVERNMENT", "TRADE", "SERVICES",] const boxWidth = opts.boxWidth || 8 const boxMargin = opts.boxMargin || 0 const itemMargin = opts.itemMargin || 12 const numRows = opts.numRows || 8 const groupSpacing = opts.groupSpacing || 75 const comparisonPlacement = opts.comparisonPlacement || 250 const comparisonSpacing = opts.comparisonSpacing || 50 const boxCount = opts.boxCount || 800 // from manually created diagram, total for whole state const margin = opts.margin || ({top: 10, right: 10, bottom: 10, left: 10}) // width is supplied automatically const width = opts.width || 800 const height = opts.height|| 600 const boxStroke = opts.boxStroke || '#fff' const compareBoxStroke = opts.compareBoxStroke || '#333' const boxStrokeWidth = opts.boxStrokeWidth || 0.5 const svg = d3.select(DOM.svg(width, height)) .attr('style', 'border: 1px solid #eee') const plot = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`) const regions = data .find(d => d.key === year).values .filter(region => region.key !== 'Statewide') .sort((a,b) => regionSortOrder.indexOf(a.key) - regionSortOrder.indexOf(b.key)) // .sort((a,b) => b.employment - a.employment) .forEach((region, j) => { // create boxes for region const numRegionBoxes = Math.round( region.values.find(sector => sector.key == 'TOTAL').employment / denom * boxCount ) const boxes = []; const gainBoxes = []; const lossBoxes = []; for(let i=0; i<=numRegionBoxes; i++){ const box = { x: (i % numRows) * (boxWidth + boxMargin), y: Math.floor(i / numRows) * (boxWidth + boxMargin), cat: 'OTHER', color: '#bbb', strokeColor: boxStroke, } boxes.push(box) } // categorize boxes based on sector data for particular region const compareRegion = showCompareBoxes ? data .find(d => d.key === compareYear).values .find(r => r.key === region.key) : null let cumulativeCount = 0; region.values .filter(sector => sector.key !== 'TOTAL') // Avoids double-counting jobs in total .sort((a,b) => sectorSortOrder.indexOf(b.key) - sectorSortOrder.indexOf(a.key)) .forEach((sector, i) => { sector.boxCount = Math.round(sector.employmentRelState * boxCount) sector.firstBox = cumulativeCount sector.lastBox = cumulativeCount + sector.boxCount - 1 if (showCompareBoxes){ const compareSector = compareRegion.values.find(s => s.key === sector.key) sector.compareBoxCount = Math.round(compareSector.employment / denom * boxCount) sector.boxCountChange = sector.boxCount - sector.compareBoxCount sector.firstCompareBox = cumulativeCount + sector.compareBoxCount } for(let i=sector.firstBox; i<=sector.lastBox; i++){ boxes[i].cat = sector.key boxes[i].color = sector.color // if (i >= sector.firstCompareBox) { // boxes[i].new = true // boxes[i].strokeColor = compareBoxStroke // } } if (showCompareBoxes){ if (sector.boxCountChange > 0) { for(let i=0; i < Math.abs(sector.boxCountChange); i++){ gainBoxes.push({ cat: sector.key, color: sector.color, strokeColor: boxStroke }) } } else if (sector.boxCountChange < 0) { for(let i=0; i < Math.abs(sector.boxCountChange); i++){ lossBoxes.push({ cat: sector.key, color: sector.color, strokeColor: boxStroke }) } } } cumulativeCount += sector.boxCount }) if (gainBoxes.length > 0) { for(let i=0; i<=gainBoxes.length - 1; i++){ gainBoxes[i].x = (i % numRows) * (boxWidth + boxMargin) gainBoxes[i].y = Math.floor(i / numRows) * (boxWidth + boxMargin) } } if (lossBoxes.length > 0) { for(let i=0; i<=lossBoxes.length - 1; i++){ lossBoxes[i].x = (i % numRows) * (boxWidth + boxMargin) lossBoxes[i].y = Math.floor(i / numRows) * (boxWidth + boxMargin) } } // Drawing plot.append('text') .attr('x', 0).attr('y', 14) .text(`Year: ${year}, change versus ${compareYear}`) const regionGroup = plot.append('g') .attr('transform', `translate(${j*groupSpacing},26)`) regionGroup.append('g') .append('text') .attr('x', 0) .attr('y', 20) .html(region.key) regionGroup.append("g") .attr('transform', 'translate(0,40)') .selectAll("rect") .data(boxes) .enter().append("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", boxWidth) .attr("height", boxWidth) .attr("fill", d => d.color) .attr('stroke', d => d.strokeColor) .attr('stroke-width', boxStrokeWidth) if (showCompareBoxes){ // compare boxes regionGroup.append("g") .attr('transform', `translate(0,${comparisonPlacement})`) .selectAll("rect") .data(gainBoxes) .enter().append("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", boxWidth) .attr("height", boxWidth) .attr("fill", d => d.color) .attr('stroke', d => d.strokeColor) .attr('stroke-width', boxStrokeWidth) regionGroup.append("g") .attr('transform', `translate(0,${comparisonPlacement + comparisonSpacing})`) .selectAll("rect") .data(lossBoxes) .enter().append("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", boxWidth) .attr("height", boxWidth) .attr("fill", d => d.color) .attr('stroke', d => d.strokeColor) .attr('stroke-width', boxStrokeWidth) } }) if (showCompareBoxes){ plot.append('text') .attr('x', 0).attr('y', comparisonPlacement + 20) .html('Job gains') plot.append('text') .attr('x', 0).attr('y', comparisonPlacement + comparisonSpacing + 20) .html('Job losses') } return svg.node(); }35:Ta1c,regionChangeData = { const geo = 'Statewide' const curYear = '2016' const compareYear = '2001' const sectorSortOrder = ["OTHER", "MANUFACTURING","CONSTRUCTION", "NATURAL RESOURCES", "HEALTHCARE", "GOVERNMENT", "TRADE", "SERVICES",].reverse() const filtered = cleanedData // .filter(d => d.region === geo) // .filter(d => d.cat !== 'TOTAL') const nested = d3.nest() .key(d => d.region) .key(d => d.TimePeriod) .key(d => d.cat) .entries(filtered) const data = nested.map(region => ({ key: region.key, current: region.values.find(d => d.key === curYear), compare: region.values.find(d => d.key === compareYear) })) data.forEach(region => { region.compare.values.forEach(sector => { sector.employment = sector.values.reduce((acc, obj) => obj.employment + acc, 0) // sector.wages = sector.values.reduce((acc, obj) => obj.wages + acc, 0) }) // add other sector const compareTotEmployment = region.compare.values.find(d => d.key === 'TOTAL').employment const compareAccountedEmployment = region.compare.values .filter(d => d.key !== 'TOTAL') .reduce((acc, obj) => obj.employment + acc, 0) region.compare.values.push({ key: 'OTHER', employment: compareTotEmployment - compareAccountedEmployment }) region.current.values.forEach(sector => { sector.employment = sector.values.reduce((acc, obj) => obj.employment + acc, 0) }) const curTotEmployment = region.current.values.find(d => d.key === 'TOTAL').employment const curAccountedEmployment = region.current.values .filter(d => d.key !== 'TOTAL') .reduce((acc, obj) => obj.employment + acc, 0) region.current.values.push({ key: 'OTHER', employment: curTotEmployment - curAccountedEmployment }) region.employmentChange = curTotEmployment - compareTotEmployment // make comparisons region.current.values.forEach(sector => { const compSector = data.find(d => d.key === region.key).compare.values.find(d => d.key === sector.key) // sector.wageChange = sector.wages - compSector.wages // sector.wagePerChange = sector.wageChange / compSector.wages sector.employmentChange = sector.employment - compSector.employment sector.employmentPerChange = sector.employmentChange / compSector.employment }) region.values = region.current.values.filter(d => d.key !== 'TOTAL') region.values.sort((a,b) => sectorSortOrder.indexOf(a.key) - sectorSortOrder.indexOf(b.key)) // Add other }) return data }36:T1590,buildFacetedBarChart = (opts) => { const data = opts.data const plotDim = opts.plotDim const title = opts.title || null const showDataLabels = opts.showDataLabels || false const facetKeys = opts.facetKeys const categories = data.find(d => d.key === 'Statewide').values.map(d => d.key) const fontSize = opts.fontSize || 12 const xMax = opts.xMax || 20000 const xRange = opts.xRange || [0, xMax] const width = opts.width || 800 const height = opts.height || 600 const margin = opts.margin || {top: 40, right: 20, bottom: 20, left: 140} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const xFormat = opts.xFormat || d3.format("+~s") const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) // N across, M down const subPlotDims = opts.subPlotDims || [3, 3] // across x down const subPlotMargins = opts.subPlotMargins || [60, 60] const subPlotPadding = opts.subPlotPadding || 40 const subPlotMarginAcross = subPlotMargins[0] const subPlotMarginDown = subPlotMargins[1] const subPlotWidth = plotWidth / subPlotDims[0] - subPlotMarginAcross const subPlotHeight = plotHeight / subPlotDims[1] - subPlotMarginDown const x = d3.scaleLinear() .domain(xRange) .range([0, subPlotWidth]) const y = d3.scaleBand() .domain(categories) .range([0, subPlotHeight]) .padding(0) .paddingOuter(0.2) const xAxis = g => g .attr("transform", `translate(0,${subPlotHeight - 5})`) .call(d3.axisBottom(x) // .ticks(5) .tickValues([0,5000,10000,15000]) .tickFormat(xFormat)) .call(g => g.select('.domain').remove()) .call(g => g.selectAll(".tick line").remove()) const xGrid = g => g .call(d3.axisTop(x) // .ticks(5) .tickValues([-5000,-2500,0,2500,5000,7500,10000,12500,15000]) .tickSize(-subPlotHeight) .tickFormat("")) .call(g => g.selectAll('line') .attr('stroke', '#bbb') .attr("stroke-dasharray", 2) ) .call(g => g.select('.domain').remove()) const yAxis = g => g.call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) .call(g => g.selectAll(".tick line").remove()) if (title) { svg.append('text') .attr('x',5) .attr('y',20) .attr('font-family', 'sans-serif') .text(title) } facetKeys.forEach((region, i) => { if (region === '') return // allows blanks const iAcross = (i % subPlotDims[0]) const iDown = Math.floor(i / subPlotDims[0]) const shiftAcross = iAcross*(subPlotWidth + subPlotMarginAcross) const shiftDown = iDown*(subPlotHeight + subPlotMarginDown) const subPlot = plot.append('g') .attr('transform', `translate(${shiftAcross},${shiftDown})`) const plotData = data.find(d => d.key === region).values // borderline subPlot.append('rect') .attr('x', -0.5 * subPlotPadding) .attr('y', -0.5 * subPlotPadding) .attr('width', subPlotWidth + subPlotPadding) .attr('height', subPlotHeight + subPlotPadding) .attr('stroke-width', 1) .attr('stroke', colorScale.region(region)) .attr('fill', 'none') subPlot.append("g").call(xGrid) // title subPlot.append('g') .attr('transform', 'rotate(-90)') .append('text') .attr('x', -subPlotHeight/2).attr('y',0) .attr('font-family', 'sans-serif') .attr('font-size', fontSize) .attr('text-anchor', 'middle') .text(region) // subPlot.append('g') // .selectAll('.bar') // .data(plotData).enter() // .append('rect') // .attr('x', d => Math.min(x(0), x(d[plotDim]))) // handles + and - values // .attr('y', d => y(d.key)) // .attr('height', y.bandwidth()) // .attr('width', d => Math.abs(x(d[plotDim]) - x(0))) // .attr('fill', d => colorScale.sector(d.key)) const bars = subPlot.append('g') .selectAll('.bar') .data(plotData).enter() bars.append('rect') .attr('x', d => Math.min(x(0), x(d[plotDim]))) // handles + and - values .attr('y', d => y(d.key)) .attr('height', y.bandwidth()) .attr('width', d => Math.abs(x(d[plotDim]) - x(0))) .attr('fill', d => colorScale.sector(d.key)) if (showDataLabels){ bars.append('text') .attr('x', d => { return Math.max(x(0), x(d[plotDim])) }) // handles + and - values .attr('y', d => y(d.key)) .attr('dx', 5) .attr('dy', 0.5 * (10 + y.bandwidth())) .attr('class', 'bar-label') .attr('font-size', fontSize - 2) .attr('font-family', 'sans-serif') .text(d => d[plotDim]) } // x-axis line subPlot.append('g').append('line') .attr('x1', x(0)).attr('y1', 0) .attr('x2', x(0)).attr('y2', subPlotHeight) .attr('stroke', '#000') .attr('stroke-width', 1) subPlot.append("g").call(xAxis) // if (iAcross === 0){ subPlot.append("g").call(yAxis) } }) return svg.node(); }37:T1617,buildFacetedBarHorz = (opts) => { const data = opts.data const plotDim = opts.plotDim const title = opts.title || null const showDataLabels = opts.showDataLabels || false const facetKeys = opts.facetKeys const categories = data.find(d => d.key === 'Statewide').values.map(d => d.key) const fontSize = opts.fontSize || 12 const yMax = opts.yMax || 20000 const yRange = opts.yRange || [0, yMax] const yLabels = opts.yLabels || [] // TODO - figure out how to make sensible default here const width = opts.width || 800 const height = opts.height || 600 const margin = opts.margin || {top: 40, right: 20, bottom: 20, left: 140} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.xFormat || d3.format("~s") const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) // N across, M down const subPlotDims = opts.subPlotDims || [3, 3] // across x down const subPlotMargins = opts.subPlotMargins || [60, 60] const subPlotPadding = opts.subPlotPadding || 40 const subPlotMarginAcross = subPlotMargins[0] const subPlotMarginDown = subPlotMargins[1] const subPlotWidth = plotWidth / subPlotDims[0] - subPlotMarginAcross const subPlotHeight = plotHeight / subPlotDims[1] - subPlotMarginDown const y = d3.scaleLinear() .domain(yRange) .range([subPlotHeight,0]) const x = d3.scaleBand() .domain(categories) .range([0, subPlotWidth]) .padding(0) .paddingOuter(0.2) const yAxis = g => g .attr("transform", `translate(5,0)`) .call(d3.axisLeft(y) // .ticks(5) .tickValues(yLabels) .tickFormat(yFormat)) .call(g => g.select('.domain').remove()) .call(g => g.selectAll(".tick line").remove()) const yGrid = g => g .call(d3.axisLeft(y) // .ticks(5) .tickValues(yLabels) .tickSize(-subPlotWidth) .tickFormat("")) .call(g => g.selectAll('line') .attr('stroke', '#bbb') .attr("stroke-dasharray", 2) ) .call(g => g.select('.domain').remove()) const xAxis = g => g.call(d3.axisBottom(x)) .attr("transform", `translate(0,${subPlotHeight - 5})`) .call(g => g.select('.domain').remove()) .call(g => g.selectAll(".tick line").remove()) // overall chart title if (title) { svg.append('text') .attr('x',5) .attr('y',20) .attr('font-family', 'sans-serif') .text(title) } // build facets facetKeys.forEach((region, i) => { if (region === '') return // allows blanks const iAcross = (i % subPlotDims[0]) const iDown = Math.floor(i / subPlotDims[0]) const shiftAcross = iAcross*(subPlotWidth + subPlotMarginAcross) const shiftDown = iDown*(subPlotHeight + subPlotMarginDown) const subPlot = plot.append('g') .attr('transform', `translate(${shiftAcross},${shiftDown})`) const regionData = data.find(d => d.key === region) // borderline subPlot.append('rect') .attr('x', -0.5 * subPlotPadding - 10) .attr('y', -0.5 * subPlotPadding) .attr('width', subPlotWidth + subPlotPadding) .attr('height', subPlotHeight + subPlotPadding) .attr('stroke-width', 1) .attr('stroke', colorScale.region(region)) .attr('fill', 'none') subPlot.append("g").call(yGrid) // draw data bars const bars = subPlot.append('g') .selectAll('.bar') .data(regionData.values).enter() bars.append('rect') .attr('y', d => Math.min(y(0), y(d[plotDim]))) // handles + and - values .attr('x', d => x(d.key)) .attr('width', x.bandwidth()) .attr('height', d => Math.abs(y(d[plotDim]) - y(0))) .attr('fill', d => colorScale.sector(d.key)) if (showDataLabels){ bars.append('text') .attr('y', d => { return Math.max(y(0), y(d[plotDim])) }) // handles + and - values .attr('x', d => x(d.key)) .attr('dy', 5) .attr('dx', 0.5 * (10 + x.bandwidth())) .attr('class', 'bar-label') .attr('font-size', fontSize - 2) .attr('font-family', 'sans-serif') .text(d => d[plotDim]) } // y=0 line subPlot.append('g').append('line') .attr('y1', y(0)).attr('x1', 0) .attr('y2', y(0)).attr('x2', subPlotWidth) .attr('stroke', '#000') .attr('stroke-width', 1) // subplot title subPlot.append('g') .append('text') .attr('x', subPlotWidth/2).attr('y',-5) .attr('font-family', 'sans-serif') .attr('font-size', fontSize) .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .text(region) // subplot total value subPlot.append('g') .append('text') .attr('x', subPlotWidth/2).attr('y', fontSize - 2) .attr('font-family', 'sans-serif') .attr('font-size', fontSize) .attr('font-style', 'italic') .attr('text-anchor', 'middle') .text(d3.format('+.2s')(regionData.employmentChange) + ' jobs') subPlot.append("g").call(yAxis) // if (iAcross === 0){ subPlot.append("g").call(xAxis) } }) return svg.node(); }38:T1b3b,mapChangeByCounty = (opts) => { const dataLayer = opts.dataLayer const plotDim = opts.plotDim const maxRadius = opts.maxRadius || 15 const maxDimVal = opts.maxDimVal || 30000 const markerStyle = opts.markerStyle || {} // defaults to values below const markerOpacity = markerStyle.opacity || 1 const markerFill = markerStyle.fill || (d => '#228') const markerFillOpacity = markerStyle.fillOpacity || 0.25 const markerStroke = markerStyle.stroke || markerFill const markerStrokeWidth = markerStyle.strokeWidth || 1 const markerStrokeOpacity = markerStyle.strokeOpacity || 0.9 const baseLayer = opts.baseLayer const baseLayerStyle = opts.baseLayerStyle || {} // defaults to values below const baseOpacity = baseLayerStyle.opacity || 1 const baseFill = baseLayerStyle.fill || (d => '#ddd') const baseFillOpacity = baseLayerStyle.fillOpacity || 1 const baseStroke = baseLayerStyle.stroke || '#fff' const baseStrokeWidth = baseLayerStyle.strokeWidth || 1 const baseStrokeOpacity = baseLayerStyle.strokeOpacity || 1 const height = opts.height || 300 // width comes predefined const margin = opts.margin || {top: 10, left: 40, right: 40, bottom: 10} const projection = opts.projection || d3.geoMercator() // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style('border', '1px solid #ddd') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) projection.fitSize([plotWidth, plotHeight], baseLayer) // Scales const rScale = d3.scaleSqrt() // .domain([0, maxDimVal]) // for drawing circles .domain([0, 30000]) // for scaling arrows .range([0.2, 5]) const path = d3.geoPath() .projection(projection); // Drawing function drawFeatures(features){ const shapes = plot.append('g') .attr('class', 'feature-container'); shapes.selectAll('.feature') .data(features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', baseOpacity) .attr('fill', baseFill) .attr('fill-opacity', baseFillOpacity) .attr('stroke', baseStroke) .attr('stroke-width', baseStrokeWidth) .attr('stroke-opacity', baseStrokeOpacity) } function drawRegionOutlines(baseLayer, groupby){ // convert to TopoJson and back again for removing common borders (somewhat messy) const regions = [... new Set(baseLayer.features.map(d => d.properties[groupby]))] const regionsTopojson = topoServer.topology({geos: baseLayer}, 430) // merge and return as array of GeoJson features const mergedRegions = regions.map(region => { const geometries = regionsTopojson.objects.geos.geometries const filtered = geometries.filter(d => d.properties.region == region) return { type: 'Feature', geometry: topojson.merge(regionsTopojson, filtered) } }) const shapes = plot.append('g') .attr('class', '.feature-container outline') shapes.selectAll('.feature') .data(mergedRegions).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', baseOpacity) .attr('fill', 'none') .attr('fill-opacity', baseFillOpacity) .attr('stroke', '#444') .attr('stroke-width', 1) .attr('stroke-opacity', baseStrokeOpacity) } function drawMarkersFromShapePositive(features, dim){ // breaks on negative values - filter at function call // draw markers from non-point data const markers = plot.append('g') .attr('class', 'marker-container') .selectAll('.markers') .data(features).enter() .append('g'); markers.append('circle') .attr('class', 'marker-point') .attr('cx', d => path.centroid(d.geometry)[0]) .attr('cy', d => path.centroid(d.geometry)[1]) .attr('opacity', markerOpacity) .attr('fill', '#444') .attr('fill-opacity', 0.9) .attr('stroke', '#444') .attr('stroke-width', markerStrokeWidth) .attr('stroke-opacity', 1) } function drawArrowMarkers(features, dim){ const arrowPath = `M 0 0 l 0 -7 l 2 5 l -2 -1 l -2 1 l 2 -5` const markers = plot.append('g') .attr('class', 'marker-container') .selectAll('.markers') .data(features).enter() .append('g') .attr('transform', d => `translate(${path.centroid(d)[0]},${path.centroid(d)[1]})`) markers.append('path') .attr('class', 'marker-arrow') .attr('transform', d => { // negative values flipped upside down const scaleFactor = rScale(Math.abs(d.properties[dim])) const yFlip = d.properties[dim] >= 0 ? 1 : -1 return `scale(${scaleFactor}, ${yFlip * scaleFactor})` }) .attr('d', arrowPath) .attr('opacity', markerOpacity) .attr('fill', '#222') .attr('fill-opacity', 1) .attr('stroke', '#222') .attr('stroke-width', markerStrokeWidth) .attr('stroke-opacity', 1) .attr('stroke-linecap', 'round') } function drawMarkers(features, dim, style){ const markers = plot.append('g') .attr('class', 'marker-container') .selectAll('.markers') .data(features).enter() .append('g'); markers.append('circle') .attr('class', 'marker-point') .attr('cx', d => path.centroid(d)[0]) .attr('cy', d => path.centroid(d)[1]) .attr('r', d => rScale(d.properties[dim])) .attr('opacity', markerOpacity) .attr('fill', markerFill) .attr('fill-opacity', markerFillOpacity) .attr('stroke', markerStroke) .attr('stroke-width', markerStrokeWidth) .attr('stroke-opacity', markerStrokeOpacity) } function addSizeLegend(rScale){ // relies on d3-legend const legend = d3Legend.legendSize() .scale(rScale) .shape('circle') .orient('vertical') .shapePadding(50) .cells([500, 1000, 50000, 200000]) .labelFormat(d3.format("$,")) svg.append('g') .attr('class', 'scaleLegend') .attr('transform', 'translate(100,50)') .call(legend) svg.select('.scaleLegend').selectAll('circle') .attr('opacity', markerOpacity) .attr('fill', markerFill) .attr('fill-opacity', markerFillOpacity) .attr('stroke', markerStroke) .attr('stroke-width', markerStrokeWidth) .attr('stroke-opacity', markerStrokeOpacity) } // plotting drawFeatures(baseLayer.features) drawRegionOutlines(baseLayer, 'region') // Draw job gains drawArrowMarkers(dataLayer, plotDim) // filter to positives // Draw job losses // drawMarkersFromShapeNegative(dataLayer.filter(d => d.properties[plotDim] < 0), plotDim) // filter to negatives // addSizeLegend(rScale) return svg.node(); }39:T86a,buildBarChart = (opts) => { const data = opts.data const plotDim = opts.plotDim const title = opts.title || null const xMax = opts.xMax || 700000 const xRange = opts.xRange || [0, xMax] const height = opts.height || 400 const margin = opts.margin || {top: 20, right: 100, bottom: 40, left: 200} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const xFormat = opts.xFormat || d3.format(",") const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const categories = data.map(d => d.key) const x = d3.scaleLinear() .domain(xRange) .range([0, plotWidth]) const y = d3.scaleBand() .domain(categories) .range([0, plotHeight]) .padding(0.1) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(xFormat)) .call(g => g.select(".domain").remove()) // const yAxis = g => g // .call(d3.axisLeft(y) // .tickValues(d3.ticks(...y.domain(), 5)) // .tickFormat(yFormat)) // .call(g => g.selectAll(".tick line").clone() // .attr("stroke-opacity", d => d === 1 ? null : 0.2) // .attr("x2", width - margin.left - margin.right)) // .call(g => g.select(".domain").remove()) const yAxis = g => g.call(d3.axisLeft(y)) if (title) { svg.append('text') .attr('x',5) .attr('y',20) .text(title) } plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => Math.min(x(0), x(d[plotDim]))) // handles + and - values .attr('y', d => y(d.key)) .attr('height', y.bandwidth()) .attr('width', d => Math.abs(x(d[plotDim]) - x(0))) .attr('fill', d => colorScale.sector(d.key)) plot.append("g").call(xAxis) plot.append("g").call(yAxis) return svg.node(); }3a:Tfc1,buildFacetedBarChartHtml = (opts) => { const data = opts.data const plotDim = opts.plotDim const title = opts.title || null const regions = data.map(d => d.key) .filter(d => d != 'Statewide') const categories = data.find(d => d.key === 'Statewide').values.map(d => d.key) const xMax = opts.xMax || 20000 const xRange = opts.xRange || [0, xMax] const height = opts.height || 600 const margin = opts.margin || {top: 10, right: 20, bottom: 30, left: 140} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const xFormat = opts.xFormat || d3.format("+.1s") // const svg = d3.select(DOM.svg(width, height)) // .style('border', '1px solid #eee'); // const plot = svg.append('g') // .attr('transform', `translate(${margin.left},${margin.top})`) // N across, M down const subPlotDims = [3,3] // across x down const subPlotMarginAcross = 40 const subPlotMarginDown = 40 // const subPlotWidth = plotWidth / subPlotDims[0] - subPlotMarginAcross // const subPlotHeight = plotHeight / subPlotDims[1] - subPlotMarginDown const subPlotWidth = 300 const subPlotHeight = 200 const subPlotMargin = {top: 20, right: 20, bottom: 20, left: 20} const x = d3.scaleLinear() .domain(xRange) .range([0, subPlotWidth - subPlotMargin.left - subPlotMargin.right]) const y = d3.scaleBand() .domain(categories) .range([0, subPlotHeight - subPlotMargin.bottom - subPlotMargin.top]) .padding(0.1) const xAxis = g => g .attr("transform", `translate(0,${subPlotHeight - subPlotMargin.bottom - subPlotMargin.top})`) .call(d3.axisBottom(x).ticks(5).tickFormat(xFormat)) const xGrid = g => g .call(d3.axisTop(x).ticks(5) .tickSize(-subPlotHeight - subPlotMargin.bottom - subPlotMargin.top) .tickFormat("")) .call(g => g.selectAll('line').attr('stroke', '#ddd')) .call(g => g.select('.domain').remove()) const yAxis = g => g.call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) .call(g => g.selectAll(".tick line").remove()) const subPlots = regions.map((region, i) => { const subSvg = d3.select(DOM.svg(subPlotWidth, subPlotHeight)) .attr('class', 'facet-plot') // .style('border', '1px solid #eee') const subPlot = subSvg.append('g') .attr('transform', `translate(${subPlotMargin.left},${subPlotMargin.top})`) const plotData = data.find(d => d.key === region).values subPlot.append("g").call(xGrid) subPlot.append('g') .append('text') .attr('x',subPlotWidth / 2 - 10).attr('y',10) .text(region) const bars = subPlot.append('g') .selectAll('.bar') .data(plotData).enter() bars.append('rect') .attr('x', d => Math.min(x(0), x(d[plotDim]))) // handles + and - values .attr('y', d => y(d.key)) .attr('height', y.bandwidth()) .attr('width', d => Math.abs(x(d[plotDim]) - x(0))) .attr('fill', d => colorScale.sector(d.key)) bars.append('text') .attr('x', d => { return Math.max(x(0), x(d[plotDim])) }) // handles + and - values .attr('y', d => y(d.key)) .attr('dx', 5) .attr('dy', 0.5 * (10 + y.bandwidth())) .attr('class', 'bar-label') .classed('first', i === 0) .text(d => d.key) // x-axis line subPlot.append('g').append('line') .attr('x1', x(0)).attr('y1', 0) .attr('x2', x(0)).attr('y2', subPlotHeight - subPlotMargin.top - subPlotMargin.bottom) .attr('stroke', '#000') .attr('stroke-width', 1) subPlot.append("g").call(xAxis) // subPlot.append("g").call(yAxis) // if (iAcross === 0){ subPlot.append("g").call(yAxis) } return subSvg.node() }) return htmlWrap(subPlots) }3b:Tb0e,regionChangeBarsHtml = { // const geo = 'Statewide' // const curYear = '2016' // const compareYear = '2001' // const filtered = cleanedData // // .filter(d => d.region === geo) // // .filter(d => d.cat !== 'TOTAL') // const nested = d3.nest() // .key(d => d.region) // .key(d => d.TimePeriod) // .key(d => d.cat) // .entries(filtered) // const data = nested.map(region => ({ // key: region.key, // current: region.values.find(d => d.key === curYear), // compare: region.values.find(d => d.key === compareYear) // })) // data.forEach(region => { // region.compare.values.forEach(sector => { // sector.employment = sector.values.reduce((acc, obj) => obj.employment + acc, 0) // // sector.wages = sector.values.reduce((acc, obj) => obj.wages + acc, 0) // }) // // add other sector // const compareTotEmployment = region.compare.values.find(d => d.key === 'TOTAL').employment // const compareAccountedEmployment = region.compare.values // .filter(d => d.key !== 'TOTAL') // .reduce((acc, obj) => obj.employment + acc, 0) // region.compare.values.push({ // key: 'OTHER', // employment: compareTotEmployment - compareAccountedEmployment // }) // region.current.values.forEach(sector => { // sector.employment = sector.values.reduce((acc, obj) => obj.employment + acc, 0) // }) // const curTotEmployment = region.current.values.find(d => d.key === 'TOTAL').employment // const curAccountedEmployment = region.current.values // .filter(d => d.key !== 'TOTAL') // .reduce((acc, obj) => obj.employment + acc, 0) // region.current.values.push({ // key: 'OTHER', // employment: curTotEmployment - curAccountedEmployment // }) // // make comparisons // region.current.values.forEach(sector => { // const compSector = data.find(d => d.key === region.key).compare.values.find(d => d.key === sector.key) // // sector.wageChange = sector.wages - compSector.wages // // sector.wagePerChange = sector.wageChange / compSector.wages // sector.employmentChange = sector.employment - compSector.employment // sector.employmentPerChange = sector.employmentChange / compSector.employment // }) // region.values = region.current.values.filter(d => d.key !== 'TOTAL') // // Add other // }) // return buildFacetedBarChartHtml({ // data: data, // plotDim: 'employmentChange', // xRange: [-5000, 15000], // title: 'Employment change by sector, 2001 to 2016', // // other data displays // // plotDim: 'employment', // // xRange: [0, 50000] // // plotDim: 'employmentPerChange', // // xRange: [0, 2], // // plotDim: 'wageChange', // // xRange: [-100000,1000000] // }) } 3c:Td54,industryComparisonDesktop = { const includeSectors = [ 'farm', 'real_estate_and_rental_and_leasing', 'arts,_entertainment,_and_recreation', 'forestry,_fishing,_and_related_activities', 'retail_trade','construction', 'professional,_scientific,_and_technical_services','finance_and_insurance','state_government', 'federal_civilian', 'manufacturing', 'local_government', 'mining,_quarrying,_and_oil_and_gas_extraction', 'health_care_and_social_assistance', 'military', 'transportation_and_warehousing', ] const region = 'Statewide' const colorChange = d3.scaleLinear() .domain([-0.1, 0, 0.5]) .range(['#fdae61', '#eee', '#a6d96a']) // DATA GROUPING const groupBySystemSectorYearDetail = () => { const data = cleanedData .filter(d => d.region === region) // narrow to geography .filter(d => d.sector !== 'total') // remove sector aggregate .map(d => Object.assign(d, { employment: +d.employment, wages: +d.wages, year: d.TimePeriod })) const grouped = d3.nest() .key(d => d.system) // NAICS OR SIC .key(d => d.sector) .key(d => d.year) .entries(data) grouped .forEach(system => { system.values.forEach(sector => { sector.trend = [] sector.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const employment = year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0) const wages = year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0) const wagesInfAdj = inflationRatios[year.key] ? wages * inflationRatios[year.key] : 0 sector.trend.push({ year: year.key, employment: employment, wages: wagesInfAdj, avgWages: wagesInfAdj / employment, wagesRaw: wages, name: year.values[0], values: year.values }) }) }) }) return grouped } // FURTHER DATA PREP const data = groupBySystemSectorYearDetail() .find(d => d.key === 'NAICS').values // .filter(d => includeSectors.includes(d.key)) .map(sector => { const industry = sector.key const category = cats.sectors[sector.key] const employment16 = +sector.trend.find(d => d.year == '2016').employment const employment01 = +sector.trend.find(d => d.year == '2001').employment const avgWage01 = sector.trend.find(d => d.year == '2001').avgWages * 1000 const avgWage16 = sector.trend.find(d => d.year == '2016').avgWages * 1000 // inflation adjusted const wageChange = (avgWage16 - avgWage01) / avgWage01 const employmentChange = (employment16 - employment01) / employment01 return {industry, avgWage16, employmentChange, employment16, wageChange } }) .sort((a,b) => +b.employment16 - a.employment16) const scatter = buildScatterPlot({ data: data, width: 800, xRange: [0, 120000], // xRange: [0, 70000], yRange: [-0.2, 1], xLabel: 'Avg wage, 2016', yLabel: "Sector employment change, '01 to '16", rDomain: [0, 30000], rRange: [0, 20], }) // return html`

${scatter}

` return scatter // return htmlWrap(scatter, 800) }3d:Teba,industryComparisonMobile = { const includeSectors = [ 'farm', 'real_estate_and_rental_and_leasing', 'arts,_entertainment,_and_recreation', 'forestry,_fishing,_and_related_activities', 'retail_trade','construction', 'professional,_scientific,_and_technical_services','finance_and_insurance','state_government', 'federal_civilian', 'manufacturing', 'local_government', 'mining,_quarrying,_and_oil_and_gas_extraction', 'health_care_and_social_assistance', 'military', 'transportation_and_warehousing', ] const region = 'Statewide' const colorChange = d3.scaleLinear() .domain([-0.1, 0, 0.5]) .range(['#fdae61', '#eee', '#a6d96a']) // DATA GROUPING const groupBySystemSectorYearDetail = () => { const data = cleanedData .filter(d => d.region === region) // narrow to geography .filter(d => d.sector !== 'total') // remove sector aggregate .map(d => Object.assign(d, { employment: +d.employment, wages: +d.wages, year: d.TimePeriod })) const grouped = d3.nest() .key(d => d.system) // NAICS OR SIC .key(d => d.sector) .key(d => d.year) .entries(data) grouped .forEach(system => { system.values.forEach(sector => { sector.trend = [] sector.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const employment = year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0) const wages = year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0) const wagesInfAdj = inflationRatios[year.key] ? wages * inflationRatios[year.key] : 0 sector.trend.push({ year: year.key, employment: employment, wages: wagesInfAdj, avgWages: wagesInfAdj / employment, wagesRaw: wages, name: year.values[0], values: year.values }) }) }) }) return grouped } // FURTHER DATA PREP const data = groupBySystemSectorYearDetail() .find(d => d.key === 'NAICS').values // .filter(d => includeSectors.includes(d.key)) .map(sector => { const industry = sector.key const category = cats.sectors[sector.key] const employment16 = +sector.trend.find(d => d.year == '2016').employment const employment01 = +sector.trend.find(d => d.year == '2001').employment const avgWage01 = sector.trend.find(d => d.year == '2001').avgWages * 1000 const avgWage16 = sector.trend.find(d => d.year == '2016').avgWages * 1000 // inflation adjusted const wageChange = (avgWage16 - avgWage01) / avgWage01 const employmentChange = (employment16 - employment01) / employment01 return {industry, avgWage16, employmentChange, employment16, wageChange } }) .sort((a,b) => +b.employment16 - a.employment16) const showLabels = [ 'farm', 'state_government', 'manufacturing', 'real_estate_and_rental_and_leasing', 'health_care_and_social_assistance', 'arts,_entertainment,_and_recreation', 'mining,_quarrying,_and_oil_and_gas_extraction', 'retail_trade', 'federal_civilian', ] const scatter = buildScatterPlot({ data: data, labelProcess: d => d, xRange: [0, 120000], width: 400, margin: {top: 40, bottom: 20, left: 60, right: 20}, // xRange: [0, 70000], yRange: [-0.2, 1], xLabel: 'Avg wage, 2016', yLabel: "Sector employment change, '01 to '16", rDomain: [0, 30000], rRange: [0, 10], labelFilter: d => showLabels.includes(d.industry), }) return htmlWrap(scatter, 400) }3e:T18da,buildScatterPlot = (opts) => { const data = opts.data const xDim = opts.xDim || 'avgWage16' const yDim = opts.yDim || 'employmentChange' const rDim = opts.rDim || 'employment16' const xLabel = opts.xLabel const yLabel = opts.yLabel const xRange = opts.xRange || d3.extent(data, d => d[xDim]) const yRange = opts.yRange || d3.extent(data, d => d[yDim]) const xFormat = opts.xFormat || d3.format('$,') const yFormat = opts.yFormat || d3.format('+.0%') const rDomain = opts.rDomain || d3.extent(data, d => d[rDim]) const rRange = opts.rRange || [0, 30] const markerStrokeWidth = opts.markerStrokeWidth || 1 const labelFilter = opts.labelFilter || (d => true) // const height = opts.height || 500 const dimRatio = opts.dimRatio || 2/3 // h/w const width = opts.width || 800 const height = width * dimRatio const margin = opts.margin || {top: 40, left: 80, right: 40, bottom: 50} // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style('border', '1px solid #ddd') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) // Scales const xScale = d3.scaleLinear() .domain(xRange) .range([0, plotWidth]) const yScale = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const rScale = d3.scaleSqrt() .domain(rDomain) .range(rRange) const yAxis = g => g .call(d3.axisLeft(yScale) .ticks(4) .tickFormat(yFormat)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 1 ? null : 0.2) .attr("x2", width - margin.left - margin.right)) // .call(g => g.select(".domain").remove()) // const xAxis = d3.axisBottom(xScale) const xAxis = g => g .attr("transform", `translate(0,0)`) .call(d3.axisTop(xScale).ticks(plotWidth / 100).tickSizeOuter(0).tickFormat(xFormat)) // .call(g => g.select(".domain").remove()) plot.append('g') .attr('transform', `translate(0,0)`) .call(yAxis) if (yLabel){ plot.append('g') .attr('transform', 'translate(-50,0) rotate(-90)') .append('text') .attr('x',0).attr('y',0) .attr('text-anchor', 'end') .attr('font-size', 14) .attr('font-family', 'sans-serif') .text(yLabel) } // x-axis plot.append('g') // .attr('transform', `translate(0,${yScale(0)})`) .call(xAxis) if (xLabel){ plot.append('g') .attr('transform', `translate(${plotWidth},${20})`) .append('text') .attr('text-anchor', 'end') .attr('x',0).attr('y',0) .attr('font-size', 14) .attr('font-family', 'sans-serif') .text(xLabel) } // x-guide const guideY = jobGrowth01to16 plot.append('g') .append('line') .attr('x1', 0).attr('y1', yScale(guideY)) .attr('x2', plotWidth).attr('y2', yScale(guideY)) .attr('stroke', '#666') .attr('stroke-dasharray', 4) .attr('stroke-width', 1) plot.append('g') .attr('transform', `translate(${plotWidth},${yScale(guideY) - 5})`) .append('text') .attr('text-anchor', 'end') .attr('x',0).attr('y',0) .attr('font-size', 14) .attr('font-family', 'sans-serif') .text('Statewide job growth') // y-guide const guideX = avgWage16 plot.append('g') .append('line') .attr('x1', xScale(guideX)).attr('y1', 0) .attr('x2', xScale(guideX)).attr('y2', plotHeight) .attr('stroke', '#666') .attr('stroke-dasharray', 4) .attr('stroke-width', 1) plot.append('g') .attr('transform', `translate(${xScale(guideX) + 5},${20})`) .append('text') .attr('text-anchor', 'start') .attr('x',0).attr('y',0) .attr('font-size', 14) .attr('font-family', 'sans-serif') .text('State average') // y=0 line plot.append('g') .append('line') .attr('x1', 0).attr('y1', yScale(0)) .attr('x2', plotWidth).attr('y2', yScale(0)) .attr('stroke', '#000') .attr('stroke-width', 2) // markers const markers = plot.append('g') .selectAll('.marker') .data(data).enter() .filter(d => (Number.isFinite(d[xDim]) && Number.isFinite(d[yDim]) && Number.isFinite(d[rDim]))) .append('g') .attr('class', 'marker') .attr('transform', d => { const dx = xScale(d[xDim]) const dy = yScale(d[yDim]) return `translate(${dx},${dy})` }) .on('click', d => console.log(d)) .on('mouseover', (d,i,g)=>{ d3.selectAll('.marker').filter(marker => marker.industry !== d.industry) .transition().duration(100).attr('opacity',0.2) }) .on('mouseout', (d,i,g)=>{ d3.selectAll('.marker') .transition().duration(100).attr('opacity', 1) }); markers .append('circle') .attr('r', d => rScale(d[rDim])) .attr('cx', 0) .attr('cy', 0) .attr('fill', d => colorScale.sector(cats.sectors[d.industry])) .attr('stroke', d => colorScale.sector(cats.sectors[d.industry])) .attr('stroke-width', markerStrokeWidth) .attr('fill-opacity', 0.5) .attr('stroke-opacity', 0.9) // labels markers .filter(labelFilter) .append('text') .attr('font-size', '12px') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'start') // .attr('dy', d => -(rScale(d[rDim]) - 5)) .attr('dx', d => (rScale(d[rDim]) + 5)) .attr('fill', d => colorScale.sector(cats.sectors[d.industry])) .text(d => displayLabels(d.industry)) function addSizeLegend(rScale){ // relies on d3-legend const legend = d3Legend.legendSize() .scale(rScale) .shape('circle') .orient('vertical') .shapePadding(30) .cells([10000, 50000, 200000, 1000000, 5000000]) .labelFormat(d3.format("$,")) svg.append('g') .attr('class', 'scaleLegend') .attr('transform', 'translate(600,100)') .call(legend) svg.select('.scaleLegend').selectAll('circle') .attr('fill', '#666') .attr('fill-opacity', 0.3) .attr('stroke', '#666') .attr('stroke-width', 1) .attr('stroke-opacity', 0.9) } // addSizeLegend(rScale) return svg.node(); }3f:T7e9,incomePlotData = { const curYear = '2016' const regions = ['US', 'Statewide', 'Mountains', 'Plains', 'Billings', 'Missoula','Great Falls', 'Bozeman', 'Kalispell', 'Helena', 'Butte'] const filtered = incomeData .filter(d => d.TimePeriod == curYear) const data = regions .map(region => { const values = filtered.filter(d => d.region === region) const population = values .filter(d => d.sector === 'total') .reduce((acc, obj) => obj.population + acc, 0) const totalIncome = values .filter(d => d.sector === 'total') .reduce((acc, obj) => obj.income + acc, 0) * 1000 const dividendsAndRent = values .filter(d => d.sector === 'dividends_interest_rent') .reduce((acc, obj) => obj.income + acc, 0) * 1000 const transferReceipts = values .filter(d => d.sector === 'personal_current_transfer_receipts') .reduce((acc, obj) => obj.income + acc, 0) * 1000 const wages = values .filter(d => d.sector === 'wages_and_salaries') .reduce((acc, obj) => obj.income + acc, 0) * 1000 const businessIncome = values .filter(d => d.sector === 'proprietor_income') .reduce((acc, obj) => obj.income + acc, 0) * 1000 const nonWages = totalIncome - wages const perCapitaIncome = totalIncome / population const perCapitaDividends = dividendsAndRent / population const perCapitaTransfers = transferReceipts / population const perCapitaWages = wages / population const perCapitaNonWage = nonWages / population const perCapitaBusiness = businessIncome / population const wagesRelTotal = wages / totalIncome const dividendsRelTotal = dividendsAndRent / totalIncome const transfersRelTotal = transferReceipts / totalIncome const businessRelTotal = businessIncome / totalIncome return { region, perCapitaIncome, perCapitaWages, perCapitaDividends, perCapitaTransfers, perCapitaBusiness, perCapitaNonWage } }) return data }40:Tc2a,buildLaborNonLaborVerticalBar = (opts) => { const data = opts.data const plotDim = opts.plotDim const xCat = opts.xCat const title = opts.title || null const colors = opts.colors || (d => '#666') const yMax = opts.yMax || 50000 const yRange = opts.yRange || [0, yMax] const height = opts.height || 400 const width = opts.width || 600 const margin = opts.margin || {top: 40, right: 10, bottom: 40, left: 50} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.xFormat || d3.format("$,") const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) // define diagonal stripe pattern // hard-coded for now if (colorScale.region.range()){ // only for d3 colorScales - will break on default svg .append('defs') .selectAll('pattern') .data(colorScale.region.range()).enter() .append('pattern') .attr('id', color => `diagonalHatch1px${color}`) .attr('patternUnits', 'userSpaceOnUse') .attr('width', 4) .attr('height', 4) .append('path') .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2') .attr('stroke', color => color) .attr('stroke-width', 1.5) } const categories = data.map(d => d[xCat]) const y = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const x = d3.scaleBand() .domain(categories) .range([0, plotWidth]) .padding(0.2) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x)) const yAxis = g => g.call(d3.axisLeft(y).ticks(5).tickSizeOuter(0).tickFormat(yFormat)) if (title) { svg.append('text') .attr('x',5) .attr('y',20) .text(title) } // horizontal bar const barY = y(data[0].perCapitaIncome) plot.append('g') .append('line') .attr('x1',0).attr('y1',barY) .attr('x2',plotWidth).attr('y2',barY) .attr('stroke', '#666') .attr('stroke-dasharray', 2) plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => x(d[xCat])) .attr('y', d => y(d.perCapitaIncome)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.perCapitaIncome)) .attr('fill-opacity', 1) .attr('fill', d => `url(#diagonalHatch1px${colors(d)})`) .attr('stroke', colors) .attr('stroke-width', 1) plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => x(d[xCat])) .attr('y', d => y(d.perCapitaWages)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.perCapitaWages)) .attr('fill', colors) plot.append("g").call(xAxis) plot.append("g").call(yAxis) return svg.node(); }41:Tbf4,incomeRelNationData = { // grouped by year // const curYear = '2016' const regions = ['US', 'Statewide', 'Mountains', 'Plains', 'Billings', 'Missoula','Great Falls', 'Bozeman', 'Kalispell', 'Helena', 'Butte'] // const filtered = incomeData // .filter(d => d.TimePeriod == curYear) const grouped = d3.nest() .key(d => d.region) .key(d => d.TimePeriod) .key(d => d.sector) .entries(incomeData) const data = grouped .map(geo => { const key = geo.key const values = geo.values.map(year => { const key = year.key const region = geo.key const population = year.values .find(d => d.key === 'total').values .reduce((acc, obj) => obj.population + acc, 0) const income = year.values .find(d => d.key === 'total').values .reduce((acc, obj) => obj.income + acc, 0) * 1000 // x1000 is unit conversion const wages = year.values .find(d => d.key === 'wages_and_salaries').values .reduce((acc, obj) => obj.income + acc, 0) * 1000 const investments = year.values .find(d => d.key === 'dividends_interest_rent').values .reduce((acc, obj) => obj.income + acc, 0) * 1000 const transfers = year.values .find(d => d.key === 'personal_current_transfer_receipts').values .reduce((acc, obj) => obj.income + acc, 0) * 1000 const business = year.values .find(d => d.key === 'proprietor_income').values .reduce((acc, obj) => obj.income + acc, 0) * 1000 const nonWage = income - wages const incomePerCapita = income / population const wagesPerCapita = wages / population const nonWagePerCapita = nonWage / population const investmentsPerCapita = investments / population const transfersPerCapita = transfers / population const businessPerCapita = business / population return {key, region, population, income, incomePerCapita, wagesPerCapita, nonWagePerCapita, investmentsPerCapita, transfersPerCapita, businessPerCapita} }) .sort((a,b) => a.key - b.key) return {key, values} }) // second pass, add comparisons to US total const us = data.find(d => d.key === 'US').values data.forEach(region => { region.values.forEach(year => { const comp = us.find(d => d.key === year.key) year.relIncomePerCapita = year.incomePerCapita / comp.incomePerCapita year.relWagesPerCapita = year.wagesPerCapita / comp.wagesPerCapita year.relNonWagePerCapita = year.nonWagePerCapita / comp.nonWagePerCapita year.relInvestmentsPerCapita = year.investmentsPerCapita / comp.investmentsPerCapita year.relTransfersPerCapita = year.transfersPerCapita / comp.transfersPerCapita year.relBusinessPerCapita = year.businessPerCapita / comp.businessPerCapita }) // region.relIncomePerCapita16 = region.values.find(d => d.key === '2016').relIncomePerCapita }) return data }42:T512,slopeChartIncomeDesktop = { const chart = buildFacetedSlopeChart({ data: incomeRelNationData, valueKey: 'relWagesPerCapita', color: colorScale.region, yRange: [0.4,1.4], yearRange: ['2001','2016'], title: 'Per-capita income, as a percent of US statistic', height: 300, width: 600, margin: {top: 20, left: 10, right: 10, bottom: 0}, subPlotDims: [4,1], subPlotMargins: {top: 30, left: 35, right: 60, bottom: 30}, facets: [ { valueKey: 'relIncomePerCapita', label: 'Total income', showLabels: ['US','Statewide', 'Bozeman', 'Plains', 'Mountains'] }, { valueKey: 'relWagesPerCapita', label: 'Wages', showLabels: ['US','Statewide', 'Billings', 'Bozeman', 'Plains', 'Mountains'], }, { valueKey: 'relInvestmentsPerCapita', label: 'Investments', showLabels: ['US','Statewide', 'Bozeman','Missoula','Kalispell', 'Butte', 'Plains', 'Mountains'] }, { valueKey: 'relTransfersPerCapita', label: 'Transfers', showLabels: ['US','Statewide', 'Bozeman', 'Butte', 'Great Falls', 'Billings', 'Plains', 'Mountains'] }, ] // showLabels: ['US','Statewide', 'Bozeman', 'Plains', 'Mountains'] }) return chart }43:T505,slopeChartIncomeMobile = { const chart = buildFacetedSlopeChart({ data: incomeRelNationData, valueKey: 'relWagesPerCapita', color: colorScale.region, yRange: [0.4,1.4], yearRange: ['2001','2016'], title: 'Per-capita income, as a percent of US statistic', height: 400, width: 300, margin: {top: 20, left: 10, right: 10, bottom: 0}, subPlotDims: [2,2], subPlotMargins: {top: 30, left: 35, right: 60, bottom: 30}, facets: [ { valueKey: 'relIncomePerCapita', label: 'Total income', showLabels: ['US','Statewide', 'Bozeman', 'Plains', 'Mountains'] }, { valueKey: 'relWagesPerCapita', label: 'Wages', showLabels: ['US','Statewide', 'Billings', 'Bozeman', 'Plains', 'Mountains'], }, { valueKey: 'relInvestmentsPerCapita', label: 'Investments', showLabels: ['US','Statewide', 'Bozeman','Missoula', 'Butte', 'Plains', 'Mountains'] }, { valueKey: 'relTransfersPerCapita', label: 'Transfers', showLabels: ['US','Statewide', 'Bozeman', 'Butte', 'Great Falls', 'Billings', 'Plains', 'Mountains'] }, ] // showLabels: ['US','Statewide', 'Bozeman', 'Plains', 'Mountains'] }) return chart }44:Tfcf,buildSlopeChart = (opts) => { const data = opts.data.filter(d => d.key !== 'US') const valueKey = opts.valueKey const color = opts.color const labelProcess = opts.labelProcess || ((d) => d) const title = opts.title || null const plotRecessions = opts.plotRecessions || true // highlights const highlightColor = opts.highlightColor || '#ed2' const sortOrder = ["US", "Statewide", "Mountains", "Plains", "Great Falls", "Butte", "Kalispell", "Bozeman", "Helena", "Missoula", "Billings"] const showLabels = opts.showLabels || data.map(d => d.key) const sector = opts.sector || 'TOTAL' const yMax = opts.yMax || 300000 const yRange = opts.yRange || [0, yMax] const yearRange = opts.yearRange || ['1969', '2016'] const labelData = opts.labelData || data // OR data.slice(0,1) const height = opts.height || 400 const width = opts.width || 1000 const margin = opts.margin || {top: 20, right: 100, bottom: 40, left: 60} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.yFormat || d3.format(",") const yearFormat = opts.yearFormat || d3.format('') const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const line = d3.line() .x(d => x(d.key)) .y(d => y(d[valueKey])) const x = d3.scaleTime() // .domain(d3.extent(cleanedData, d => d.year)) .domain(yearRange) .range([0, plotWidth]) const y = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x).tickValues(yearRange).tickSizeOuter(0).tickFormat(yearFormat)) .call(g => g.select(".domain").remove()) const yAxis = g => g .call(d3.axisLeft(y) .tickValues(d3.ticks(...y.domain(), 5)) .tickFormat(yFormat)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 1 ? null : 0.2) .attr("x2", width - margin.left - margin.right)) .call(g => g.select(".domain").remove()) if (title) { svg.append('text') .attr('x',0) .attr('y',14) .text(title) } plot.append("g") .call(xAxis); plot.append("g") .call(yAxis); // plot variables data // sort to match sortOrder .sort((a,b) => sortOrder.indexOf(b.key) - sortOrder.indexOf(a.key)) .forEach(group => { // lines const plotData = group.values .filter(d => (+d.key === +yearRange[0] || +d.key === +yearRange[1])) plot.append("path") .datum(plotData) .attr('class', 'plot-line') .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) .attr("stroke", color(group.key)) // color gray, or add color for labeled lines // .attr("stroke", showLabels.includes(group.key) ? color(group.key) : '#ddd') // dots plot.append('g') .selectAll('.line-point') .data(plotData).enter() .append('circle') .attr('cx', d => x(d.key)).attr('cy', d => y(d[valueKey])) .attr('r', 3) .attr('stroke', '#fff') .attr('fill', color(group.key)) }) // labels labelData .filter(group => showLabels.includes(group.key)) .forEach(group => { plot.append('text') .datum(group.values) .attr('dx', 5) .attr('dy', 5) .attr('x', d => x(d.slice(-1)[0].key)) .attr('y', d => y(d.slice(-1)[0][valueKey])) .attr('fill', color(group.key)) .attr('text-anchor', 'start') .html(labelProcess(group.key)) }) return svg.node() }45:T1709,buildFacetedSlopeChart = (opts) => { const data = opts.data.filter(d => d.key !== 'US') const valueKey = opts.valueKey const color = opts.color const labelProcess = opts.labelProcess || ((d) => d) const title = opts.title || null const plotRecessions = opts.plotRecessions || true // highlights const highlightColor = opts.highlightColor || '#ed2' const sortOrder = ["US", "Statewide", "Mountains", "Plains", "Great Falls", "Butte", "Kalispell", "Bozeman", "Helena", "Missoula", "Billings"] const showLabels = opts.showLabels || data.map(d => d.key) const facets = opts.facets || [ {valueKey: valueKey, showLabels: showLabels} ] const sector = opts.sector || 'TOTAL' const yMax = opts.yMax || 300000 const yRange = opts.yRange || [0, yMax] const yearRange = opts.yearRange || ['1969', '2016'] const labelData = opts.labelData || data // OR data.slice(0,1) const height = opts.height || 400 const width = opts.width || 1000 const margin = opts.margin || {top: 20, right: 100, bottom: 40, left: 60} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right // N across, M down const subPlotDims = opts.subPlotDims || [3, 3] // across x down const subPlotMargins = opts.subPlotMargins || {top: 30, right: 30, bottom: 30, left: 30} const subPlotPadding = opts.subPlotPadding || 40 // const subPlotMarginAcross = subPlotMargins[0] // const subPlotMarginDown = subPlotMargins[1] const subPlotWidth = plotWidth / subPlotDims[0] - subPlotMargins.right - subPlotMargins.left const subPlotHeight = plotHeight / subPlotDims[1] - subPlotMargins.top - subPlotMargins.bottom const yFormat = opts.yFormat || d3.format(".0%") const yearFormat = opts.yearFormat || d3.format('') const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const x = d3.scaleTime() // .domain(d3.extent(cleanedData, d => d.year)) .domain(yearRange) .range([0, subPlotWidth]) const y = d3.scaleLinear() .domain(yRange) .range([subPlotHeight, 0]) const xAxis = g => g .attr("transform", `translate(0,${subPlotHeight})`) .call(d3.axisBottom(x).tickValues(yearRange).tickSizeOuter(0).tickFormat(yearFormat)) .call(g => g.select(".domain").remove()) const yAxis = g => g .call(d3.axisLeft(y) .tickValues(d3.ticks(...y.domain(), 5)) .tickFormat(yFormat)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 1 ? null : 0.2) .attr("x2", subPlotWidth)) .call(g => g.select(".domain").remove()) if (title) { svg.append('text') .attr('x',0) .attr('y',14) .text(title) } facets.forEach((facet, i) => { if (facet.key === '') return null// allows blanks const iAcross = (i % subPlotDims[0]) const iDown = Math.floor(i / subPlotDims[0]) const shiftAcross = subPlotMargins.left + iAcross*(subPlotWidth + subPlotMargins.right + subPlotMargins.left) const shiftDown = subPlotMargins.top + iDown*(subPlotHeight + subPlotMargins.top + subPlotMargins.bottom) const subPlot = plot.append('g') .attr('transform', `translate(${shiftAcross},${shiftDown})`) // const regionData = data.find(d => d.key === region) const focusLines = facet.showLabels || data.map(d => d.key) const line = d3.line() .x(d => x(d.key)) .y(d => y(d[facet.valueKey])) subPlot.append('g') .attr('transform', `translate(${0},${-3})`) .append('text') .attr('font-family', 'sans-serif') .attr('font-size', 12) .attr('text-anchor', 'start') .attr('font-weight', 'bold') .text(facet.label) subPlot.append("g") .call(xAxis); subPlot.append("g") .call(yAxis); // plot variables data // sort to match sortOrder .sort((a,b) => sortOrder.indexOf(b.key) - sortOrder.indexOf(a.key)) .forEach(group => { // lines const plotData = group.values .filter(d => (+d.key === +yearRange[0] || +d.key === +yearRange[1])) subPlot.append("path") .datum(plotData) .attr('class', 'plot-line') .attr("fill", "none") .attr("stroke-width", 2) .attr('stroke-opacity',focusLines.includes(group.key) ? 1 : 0.2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) .attr("stroke", color(group.key)) // color gray, or add color for labeled lines // .attr("stroke", focusLines.includes(group.key) ? color(group.key) : '#ddd') // dots subPlot.append('g') .selectAll('.line-point') .data(plotData).enter() .append('circle') .attr('cx', d => x(d.key)).attr('cy', d => y(d[facet.valueKey])) .attr('r', 3) .attr('stroke', '#fff') .attr('fill', color(group.key)) }) // labels labelData .filter(group => focusLines.includes(group.key)) .forEach(group => { subPlot.append('text') .datum(group.values) .attr('dx', 5) .attr('dy', 5) .attr('x', d => x(d.slice(-1)[0].key)) .attr('y', d => y(d.slice(-1)[0][facet.valueKey])) .attr('fill', color(group.key)) .attr('text-anchor', 'start') .attr('font-family', 'sans-serif') .attr('font-size', 12) .html(labelProcess(group.key)) }) }) return svg.node() }46:Tf57,buildIncomeLineChart = (opts) => { const data = opts.data const valueKey = opts.valueKey const color = opts.color const labelProcess = opts.labelProcess || ((d) => d) const title = opts.title || null const plotRecessions = opts.plotRecessions || true // highlights const highlightColor = opts.highlightColor || '#ed2' const sector = opts.sector || 'TOTAL' const yMax = opts.yMax || 300000 const yRange = opts.yRange || [0, yMax] const yearRange = opts.yearRange || ['1969', '2016'] const labelData = opts.labelData || data // OR data.slice(0,1) const height = opts.height || 400 const margin = opts.margin || {top: 20, right: 100, bottom: 40, left: 60} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.yFormat || d3.format(",") const yearFormat = opts.yearFormat || d3.format('') const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const line = d3.line() .x(d => x(d.key)) .y(d => y(d[valueKey])) const x = d3.scaleTime() // .domain(d3.extent(cleanedData, d => d.year)) .domain(yearRange) .range([0, plotWidth]) const y = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(yearFormat)) .call(g => g.select(".domain").remove()) const yAxis = g => g .call(d3.axisLeft(y) .tickValues(d3.ticks(...y.domain(), 5)) .tickFormat(yFormat)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 1 ? null : 0.2) .attr("x2", width - margin.left - margin.right)) .call(g => g.select(".domain").remove()) if (title) { svg.append('text') .attr('x',0) .attr('y',14) .text(title) } plot.append("g") .call(xAxis); plot.append("g") .call(yAxis); // plot recession shading if (plotRecessions) { plot.append('g') .selectAll('.recession') .data(recessions).enter() .append('rect') .attr('class', 'recession') .attr('x', d => x(d.start)) .attr('y', 0) .attr('width', d => x(d.end) - x(d.start)) .attr('height', plotHeight) .attr('fill', highlightColor) .attr('fill-opacity', 0.2) } // lines data.forEach(group => { const plotData = group.values .filter(d => (+d.year >= yearRange[0] && +d.year <= yearRange[1])) plot.append("path") .datum(group.values) .attr('class', 'plot-line') .attr("fill", "none") .attr("stroke", color(group.key)) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) .on('click', d => console.log(d[0].region)) .on('mouseover', (d)=>{ d3.selectAll('.plot-line') .filter(d => group.values[0].region !== d[0].region) .transition().duration(100).attr('opacity',0.2) }) .on('mouseout', ()=>{ d3.selectAll('.plot-line') .transition().duration(100).attr('opacity', 1) }) }) // labels labelData.forEach(group => { plot.append('text') .datum(group.values) .attr('dx', 5) .attr('dy', 5) .attr('x', d => x(d.slice(-1)[0].key)) .attr('y', d => y(d.slice(-1)[0][valueKey])) .attr('fill', color(group.key)) .attr('text-anchor', 'start') .html(labelProcess(group.key)) }) return svg.node() }47:Ta4f,buildNonLaborCatsBar = (opts) => { const data = opts.data const plotDim = opts.plotDim const xCat = opts.xCat const title = opts.title || null const colors = opts.colors || (d => '#666') const yMax = opts.yMax || 50000 const yRange = opts.yRange || [0, yMax] const height = opts.height || 400 const margin = opts.margin || {top: 40, right: 500, bottom: 40, left: 50} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.xFormat || d3.format(",") const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const categories = data.map(d => d[xCat]) const y = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const x = d3.scaleBand() .domain(categories) .range([0, plotWidth]) .padding(0.2) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x)) const yAxis = g => g.call(d3.axisLeft(y).tickSizeOuter(0).tickFormat(yFormat)) if (title) { svg.append('text') .attr('x',5) .attr('y',20) .text(title) } const cats = ['perCapitaDividends', 'perCapitaTransfers', 'perCapitaBusiness'] // 1 - bottom plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => x(d[xCat])) .attr('y', d => y(d.perCapitaDividends)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.perCapitaDividends)) // .attr('opacity', 1) .attr('fill', '#377eb8') // 2 plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => x(d[xCat])) .attr('y', d => y(d.perCapitaDividends + d.perCapitaTransfers)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.perCapitaTransfers)) // .attr('opacity', 0.7) .attr('fill', '#4daf4a') //3 plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => x(d[xCat])) .attr('y', d => y(d.perCapitaDividends + d.perCapitaTransfers + d.perCapitaBusiness)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.perCapitaBusiness)) // .attr('opacity', 0.3) .attr('fill', '#984ea3') plot.append("g").call(xAxis) plot.append("g").call(yAxis) return svg.node(); }48:T6c2,buildVerticalBarChart = (opts) => { const data = opts.data const plotDim = opts.plotDim const xCat = opts.xCat const title = opts.title || null const colors = opts.colors || (d => '#666') const yMax = opts.yMax || 50000 const yRange = opts.yRange || [0, yMax] const height = opts.height || 400 const margin = opts.margin || {top: 20, right: 500, bottom: 40, left: 50} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.xFormat || d3.format(",") const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const categories = data.map(d => d[xCat]) const y = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const x = d3.scaleBand() .domain(categories) .range([0, plotWidth]) .padding(0.2) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x)) const yAxis = g => g.call(d3.axisLeft(y).tickSizeOuter(0).tickFormat(yFormat)) if (title) { svg.append('text') .attr('x',5) .attr('y',20) .text(title) } plot.append('g') .selectAll('.bar') .data(data).enter() .append('rect') .attr('x', d => x(d[xCat])) .attr('y', d => y(d[plotDim])) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d[plotDim])) .attr('fill', colors) plot.append("g").call(xAxis) plot.append("g").call(yAxis) return svg.node(); }49:Td45,incomeTable2001 = { // const curYear = '2001' // const regions = [... new Set(incomeData.map(d => d.region))] // const filtered = incomeData // .filter(d => d.TimePeriod == curYear) // const tableData = regions.map(region => { // const values = filtered.filter(d => d.region === region) // const population = values // .filter(d => d.sector === 'total') // .reduce((acc, obj) => obj.population + acc, 0) // const totalIncome = values // .filter(d => d.sector === 'total') // .reduce((acc, obj) => obj.income + acc, 0) // const dividendsAndRent = values // .filter(d => d.sector === 'dividends_interest_rent') // .reduce((acc, obj) => obj.income + acc, 0) // const transferReceipts = values // .filter(d => d.sector === 'personal_current_transfer_receipts') // .reduce((acc, obj) => obj.income + acc, 0) // const wages = values // .filter(d => d.sector === 'wages_and_salaries') // .reduce((acc, obj) => obj.income + acc, 0) // const businessIncome = values // .filter(d => d.sector === 'proprietor_income') // .reduce((acc, obj) => obj.income + acc, 0) // const perCapitaIncome = totalIncome / population // const wagesRelTotal = wages / totalIncome // const dividendsRelTotal = dividendsAndRent / totalIncome // const transfersRelTotal = transferReceipts / totalIncome // const businessRelTotal = businessIncome / totalIncome // return { region, perCapitaIncome, wagesRelTotal, dividendsRelTotal, transfersRelTotal, businessRelTotal } // }) // const barLength = d3.scaleLinear() // .domain([0,1]) // .range([0, 100]) // function buildPercentBar(val, color){ // const formatted = d3.format('.0%')(val) // return html` //

// ${formatted} //

// ` // } // const regionSortOrder = // ['Statewide','Plains', 'Mountains', // 'Billings', 'Missoula','Great Falls', // 'Bozeman', 'Kalispell', 'Helena', 'Butte'] // const data = tableData // .sort((a,b) => regionSortOrder.indexOf(a.region) - regionSortOrder.indexOf(b.region)) // return table(tableData, { // columns: { // region: { // formatter(val){ // const color = colorScale.region(val) // const display = val // return html` // // ${display} // ` // } // }, // perCapitaIncome: { // title: 'Per capita income', // formatter(val){ return d3.format('$,.0f')(val * 1000)} // }, // wagesRelTotal: { // title: 'Wages', // formatter(val){return buildPercentBar(val, '#e41a1c')} // }, // dividendsRelTotal: { // title: 'Investments', // formatter(val){ return buildPercentBar(val, '#377eb8')} // }, // transfersRelTotal: { // title: 'Transfers', // formatter(val){ return buildPercentBar(val, '#4daf4a')} // }, // businessRelTotal: { // title: 'Business', // formatter(val){ return buildPercentBar(val, '#984ea3')} // }, // }, // }) }4a:T472,avgWagesBySector = { const includeSectors = [ 'farm', 'real_estate_and_rental_and_leasing', 'arts,_entertainment,_and_recreation', 'forestry,_fishing,_and_related_activities', 'retail_trade','construction', 'professional,_scientific,_and_technical_services','finance_and_insurance','state_government', 'federal_civilian', 'utilities', 'manufacturing', 'local_government', 'mining,_quarrying,_and_oil_and_gas_extraction', 'health_care_and_social_assistance', 'military', 'transportation_and_warehousing' ] const data = mtJobsBySystemSectorYearDetail.map(system => ({ key: system.key, values: system.values.filter(sector => includeSectors.includes(sector.key)) })) return buildLineChart({ data: data, yearRange: ['2001','2016'], labelData: data.slice(0,1), labelProcess: displayLabels, valueKey: 'avgWages', // or 'wages' color: (key) => colorScale.sector(cats.sectors[key]), yRange: [0, 120], // yMax: 80000, title: 'MT Avg earnings ($1Ks/yr) by select sectors', margin: {top: 40, right: 300, bottom: 30, left: 50}, height: 600, }) }4b:T46a,employmentBySector = { const includeSectors = [ 'farm', 'real_estate_and_rental_and_leasing', 'arts,_entertainment,_and_recreation', 'forestry,_fishing,_and_related_activities', 'retail_trade','construction', 'professional,_scientific,_and_technical_services','finance_and_insurance','state_government', 'federal_civilian', 'utilities', 'manufacturing', 'local_government', 'mining,_quarrying,_and_oil_and_gas_extraction', 'health_care_and_social_assistance', 'military', 'transportation_and_warehousing' ] const data = mtJobsBySystemSectorYearDetail.map(system => ({ key: system.key, values: system.values.filter(sector => includeSectors.includes(sector.key)) })) return buildLineChart({ data: data, yearRange: ['2001','2016'], labelData: data.slice(0,1), labelProcess: displayLabels, valueKey: 'employment', // or 'wages' color: (key) => colorScale.sector(cats.sectors[key]), // yRange: [0, 120], yMax: 80000, title: 'MT employment by select sectors', margin: {top: 40, right: 300, bottom: 30, left: 50}, height: 600, }) }4c:T612,incomeBySystemRegionTime = { const cat = incomeType const filtered = incomeData .filter(d => d.sector === cat) // takes one sector at a time // .filter(d => d.region !== 'Statewide') // remove total category const data = d3.nest() .key(d => d.system) // INCOME here .key(d => d.region) .key(d => d.TimePeriod) .entries(filtered) data .forEach(system => { system.values.forEach(region => { region.trend = [] region.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const population = year.values .reduce((accumulator, obj) => accumulator + +obj.population, 0) const income = year.values.reduce((accumulator, obj) => accumulator + +obj.income, 0) const totalIncome = incomeData.filter(d => (d.region === region.key) && (d.TimePeriod === year.key) && (d.sector ==='total') ).reduce((accumulator, obj) => accumulator + +obj.income, 0) // sum multiple counties const incomeDataCompleteness = year.values.filter(d => d.income != "").length / year.values.length region.trend.push({ year: year.key, income: income, population: population, incomeDataCompleteness: incomeDataCompleteness, perCapitaIncome: income / population, incomeRelTotal: income / totalIncome, name: year.values[0], values: year.values }) }) }) }) return data }4d:Tb12,{ const includeSectors = [ 'farm', 'real_estate_and_rental_and_leasing', 'arts,_entertainment,_and_recreation', 'forestry,_fishing,_and_related_activities', 'retail_trade','construction', 'professional,_scientific,_and_technical_services','finance_and_insurance','state_government', 'federal_civilian', 'manufacturing', 'local_government', 'mining,_quarrying,_and_oil_and_gas_extraction', 'health_care_and_social_assistance', 'military', 'transportation_and_warehousing', ] const colorChange = d3.scaleLinear() .domain([-0.1, 0, 0.5]) .range(['#fdae61', '#eee', '#a6d96a']) const data = mtJobsBySystemSectorYearDetail .find(d => d.key === 'NAICS').values // .filter(d => includeSectors.includes(d.key)) .map(sector => { const industry = sector.key const category = cats.sectors[sector.key] const employment16 = +sector.trend.find(d => d.year == '2016').employment const employment01 = +sector.trend.find(d => d.year == '2001').employment const avgWage01 = sector.trend.find(d => d.year == '2001').avgWages const avgWage16 = sector.trend.find(d => d.year == '2016').avgWages // inflation adjusted const wageChange = (avgWage16 - avgWage01) / avgWage01 const employmentChange = (employment16 - employment01) / employment01 return {industry, avgWage16, wageChange, employmentChange, employment16} }) .sort((a,b) => +b.avgWage16 - a.avgWage16) return table(data, { style: 'compact', columns: { industry: { formatter(val){ const color = colorScale.sector(cats.sectors[val]) const display = displayLabels(val) const capitalized = display[0].toUpperCase() + display.slice(1) return html`${capitalized}` } }, employment16: { title: '2016 employment', formatter(val){return d3.format(',')(val)} }, employmentChange: { title: 'employment change since 2001', formatter(val){ const display = d3.format('+.1%')(val) const color = colorChange(val) // return display return html`${display}` } }, avgWage16: { title: '2016 per-job earnings', formatter(val){return d3.format('$,.0f')(val * 1000)} }, wageChange: { title: 'change since 2001', formatter(val){ const display = d3.format('+.1%')(val) const color = colorChange(val) // return display return html`${display}` } }, } }) }4e:Tce4,industryComparisonBozeman = { const includeSectors = [ 'farm', 'real_estate_and_rental_and_leasing', 'arts,_entertainment,_and_recreation', 'forestry,_fishing,_and_related_activities', 'retail_trade','construction', 'professional,_scientific,_and_technical_services','finance_and_insurance','state_government', 'federal_civilian', 'manufacturing', 'local_government', 'mining,_quarrying,_and_oil_and_gas_extraction', 'health_care_and_social_assistance', 'military', 'transportation_and_warehousing', ] const region = industryCompRegion const colorChange = d3.scaleLinear() .domain([-0.1, 0, 0.5]) .range(['#fdae61', '#eee', '#a6d96a']) // DATA GROUPING const groupBySystemSectorYearDetail = () => { const data = cleanedData .filter(d => d.region === region) // narrow to geography .filter(d => d.sector !== 'total') // remove sector aggregate .map(d => Object.assign(d, { employment: +d.employment, wages: +d.wages, year: d.TimePeriod })) const grouped = d3.nest() .key(d => d.system) // NAICS OR SIC .key(d => d.sector) .key(d => d.year) .entries(data) grouped .forEach(system => { system.values.forEach(sector => { sector.trend = [] sector.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const employment = year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0) const wages = year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0) const wagesInfAdj = inflationRatios[year.key] ? wages * inflationRatios[year.key] : 0 sector.trend.push({ year: year.key, employment: employment, wages: wagesInfAdj, avgWages: wagesInfAdj / employment, wagesRaw: wages, name: year.values[0], values: year.values }) }) }) }) return grouped } // FURTHER DATA PREP const data = groupBySystemSectorYearDetail() .find(d => d.key === 'NAICS').values // .filter(d => includeSectors.includes(d.key)) .map(sector => { const industry = sector.key const category = cats.sectors[sector.key] const employment16 = +sector.trend.find(d => d.year == '2016').employment const employment01 = +sector.trend.find(d => d.year == '2001').employment const avgWage01 = sector.trend.find(d => d.year == '2001').avgWages * 1000 const avgWage16 = sector.trend.find(d => d.year == '2016').avgWages * 1000 // inflation adjusted const wageChange = (avgWage16 - avgWage01) / avgWage01 const employmentChange = (employment16 - employment01) / employment01 return {industry, avgWage16, employmentChange, employment16, wageChange } }) .sort((a,b) => +b.employment16 - a.employment16) const scatter = buildScatterPlot({ data: data, xRange: [0, 120000], // xRange: [0, 70000], yRange: [-0.5, 2], xLabel: 'Avg wage, 2016', yLabel: "Sector employment change, '01 to '16", rDomain: [0, 30000], rRange: [0, 20], }) return scatter }4f:Tc6d,incomeTable = { const curYear = '2016' const regions = [... new Set(incomeData.map(d => d.region))] const filtered = incomeData .filter(d => d.TimePeriod == curYear) const tableData = regions.map(region => { const values = filtered.filter(d => d.region === region) const population = values .filter(d => d.sector === 'total') .reduce((acc, obj) => obj.population + acc, 0) const totalIncome = values .filter(d => d.sector === 'total') .reduce((acc, obj) => obj.income + acc, 0) const dividendsAndRent = values .filter(d => d.sector === 'dividends_interest_rent') .reduce((acc, obj) => obj.income + acc, 0) const transferReceipts = values .filter(d => d.sector === 'personal_current_transfer_receipts') .reduce((acc, obj) => obj.income + acc, 0) const wages = values .filter(d => d.sector === 'wages_and_salaries') .reduce((acc, obj) => obj.income + acc, 0) const businessIncome = values .filter(d => d.sector === 'proprietor_income') .reduce((acc, obj) => obj.income + acc, 0) const perCapitaIncome = totalIncome / population const wagesRelTotal = wages / totalIncome const dividendsRelTotal = dividendsAndRent / totalIncome const transfersRelTotal = transferReceipts / totalIncome const businessRelTotal = businessIncome / totalIncome return { region, perCapitaIncome, wagesRelTotal, dividendsRelTotal, transfersRelTotal, businessRelTotal } }) const barLength = d3.scaleLinear() .domain([0,1]) .range([0, 150]) function buildPercentBar(val, color){ const formatted = d3.format('.0%')(val) return html`

${formatted}

` } const regionSortOrder = ['Statewide','Plains', 'Mountains', 'Billings', 'Missoula','Great Falls', 'Bozeman', 'Kalispell', 'Helena', 'Butte'] const data = tableData .sort((a,b) => regionSortOrder.indexOf(a.region) - regionSortOrder.indexOf(b.region)) return table(tableData, { columns: { region: { formatter(val){ const color = colorScale.region(val) const display = val return display // return html` // // ${display} // ` } }, perCapitaIncome: { title: 'Per capita income', formatter(val){ return d3.format('$,.0f')(val * 1000)} }, wagesRelTotal: { title: 'Wages', formatter(val){return buildPercentBar(val, '#e41a1c')} }, dividendsRelTotal: { title: 'Investments', formatter(val){ return buildPercentBar(val, '#377eb8')} }, transfersRelTotal: { title: 'Transfers', formatter(val){ return buildPercentBar(val, '#4daf4a')} }, businessRelTotal: { title: 'Business', formatter(val){ return buildPercentBar(val, '#984ea3')} }, }, }) }50:T7f6,buildStatePictogram = (opts) => { const data = opts.data const year = opts.year const geo = opts.geo const template = opts.template || mtTemplate const boxCount = opts.boxCount || 800 // from manually created diagram const boxWidth = opts.boxWidth || 8 const boxMargin = opts.boxWidth || 0 const boxStroke = opts.boxStroke || '#fff' const boxStrokeWidth = opts.boxStroke || 1 const height = opts.height || 250 // width is supplied automatically const margin = opts.margin || ({top: 10, right: 10, bottom: 10, left: 10}) /// set box positions const boxes = []; template.forEach((col, iCol) => { for(let iRow=col[0]; iRow d.key === year).values .find(region => region.key === geo).values .filter(sector => sector.key !== 'TOTAL') // Avoids double-counting jobs in total .forEach(sector => { sector.boxCount = Math.round(sector.employmentRelState * boxCount) sector.firstBox = cumulativeCount sector.lastBox = (cumulativeCount += sector.boxCount) - 1 for(let i=sector.firstBox; i<=sector.lastBox; i++){ boxes[i].cat = sector.key boxes[i].color = sector.color } }) const svg = d3.select(DOM.svg(width, height)); const plot = svg.attr('transform', `translate(${margin.left},${margin.top})`) plot.append("g") .selectAll("rect") .data(boxes) .enter().append("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", boxWidth) .attr("height", boxWidth) .attr("fill", d => d.color) .attr('stroke', boxStroke) .attr('stroke-width', boxStrokeWidth) return svg.node(); }51:T40a, subSectorTable = table(mtJobsByYearRegionSectorDetail .find(d => d.key === year).values .find(d => d.key === geo).values .filter(d => cats.sectors[d.key] === selectSector) .map(d => { return { 'Sector': d.key, 'Jobs': d.employment, '% of Regional Jobs': d.employmentRelRegion, '% of MT Jobs': d.employmentRelState, 'Wages': d.wages, }}), { columns: { Sector: { formatter(val){ let color = '#ddd' if (!['OTHER','TOTAL'].includes(val)) { color = colorScale.sector(cats.sectors[val]) } return html`${val}` } }, Jobs: { formatter(val){ return d3.format(',')(val) } }, Wages: { formatter(val){ return d3.format('$,')(val * 1000) } }, '% of Regional Jobs': { formatter(val){ return d3.format('.1%')(val) } }, '% of MT Jobs': { formatter(val){ return d3.format('.1%')(val) } } } } )52:T55b,// Used for by Sector line chart mtJobsBySystemSectorYear = { const data = cleanedData .filter(d => d.region === 'Statewide') // narrow to geography .filter(d => d.cat !== 'TOTAL') // remove sector aggregate .map(d => Object.assign(d, { employment: +d.employment, wages: +d.wages, year: d.TimePeriod })) const grouped = d3.nest() .key(d => d.system) // NAICS OR SIC .key(d => d.cat) .key(d => d.year) .entries(data) grouped .forEach(system => { system.values.forEach(sector => { sector.trend = [] sector.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const employment = year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0) const wages = year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0) const wagesInfAdj = inflationRatios[year.key] ? wages * inflationRatios[year.key] : 0 sector.trend.push({ year: year.key, employment: employment, wages: wagesInfAdj, avgWages: wagesInfAdj / employment, wagesRaw: wages, name: year.values[0], values: year.values }) }) }) }) return grouped }53:T563,// Used for by SubSector line charts mtJobsBySystemSectorYearDetail = { const data = cleanedData .filter(d => d.region === geo) // narrow to geography .filter(d => d.sector !== 'total') // remove sector aggregate .map(d => Object.assign(d, { employment: +d.employment, wages: +d.wages, year: d.TimePeriod })) const grouped = d3.nest() .key(d => d.system) // NAICS OR SIC .key(d => d.sector) .key(d => d.year) .entries(data) grouped .forEach(system => { system.values.forEach(sector => { sector.trend = [] sector.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const employment = year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0) const wages = year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0) const wagesInfAdj = inflationRatios[year.key] ? wages * inflationRatios[year.key] : 0 sector.trend.push({ year: year.key, employment: employment, wages: wagesInfAdj, avgWages: wagesInfAdj / employment, wagesRaw: wages, name: year.values[0], values: year.values }) }) }) }) return grouped }54:T756,groupDataBySystemRegionYear = (opts) => { const flatData = opts.flatData const systemFilter = opts.systemFilter || (d => true) // both SIC and NAICS const regionFilter = opts.regionFilter || (d => d.region !== 'Statewide') // Remove total const sectorFilter = opts.sectorFilter || (d => d.cat === 'TOTAL') // default to 'TOTAL' category const yearFilter = opts.yearFilter || (d => true) const filtered = flatData .filter(systemFilter) .filter(regionFilter) .filter(sectorFilter) .filter(yearFilter) const grouped = d3.nest() .key(d => d.system) // NAICS OR SIC .key(d => d.region) .key(d => d.year) .entries(filtered) grouped .forEach(system => { system.values.forEach(region => { region.trend = [] region.values .sort((a,b) => +a.key - +b.key) .forEach(year => { const population = year.values // sum across counties in region .filter(d => d.cat === 'TOTAL') .reduce((accumulator, obj) => accumulator + +obj.population, 0) const employment = year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0) const wages = year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0) const employmentDataCompleteness = year.values.filter(d => d.employment != "").length / year.values.length region.trend.push({ year: year.key, employment: employment, wages: wages, population: population, employmentDataCompleteness: employmentDataCompleteness, perCapitaEmployment: employment / population, perCapitaWages: wages / population, avgWage: wages / employment, name: year.values[0], values: year.values }) }) }) }) return grouped }55:Ta3b,lineChartBySector = { // const height = 400 // const svg = d3.select(DOM.svg(width, height)) // const margin = {top: 20, right: 60, bottom: 30, left: 60} // const format = d3.format(",") // const yearFormat = d3.format('') // const valueKey = 'employment' // const data = mtJobsBySystemSectorYear // const line = d3.line() // .x(d => x(d.year)) // .y(d => y(d[valueKey])) // const x = d3.scaleTime() // .domain(d3.extent(cleanedData, d => d.year)) // HACKY // .range([margin.left, width - margin.right]) // const y = d3.scaleLinear() // // .domain([0, d3.max(grouped, system => d3.max(system, sector => d3.max(sector.trend, year => year[valueKey] ))) * 1.2]) // .domain([0,300000]) // .range([height - margin.bottom, margin.top]) // const xAxis = g => g // .attr("transform", `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(yearFormat)) // .call(g => g.select(".domain").remove()) // const yAxis = g => g // .attr("transform", `translate(${margin.left},0)`) // .call(d3.axisLeft(y) // .tickValues(d3.ticks(...y.domain(), 5)) // .tickFormat(format)) // .call(g => g.selectAll(".tick line").clone() // .attr("stroke-opacity", d => d === 1 ? null : 0.2) // .attr("x2", width - margin.left - margin.right)) // .call(g => g.select(".domain").remove()) // // Title // svg.append('text') // .attr('x',0) // .attr('y',14) // .text(`Trend: ${valueKey} by sector, ${geo}`) // svg.append("g") // .call(xAxis); // svg.append("g") // .call(yAxis); // // Lines // data // .forEach(system => { // system.values.forEach(sector => { // svg.append("path") // .datum(sector.trend) // .attr("fill", "none") // .attr("stroke", colorScale.sector(sector.key)) // .attr("stroke-width", 3) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", line) // .on('click', d => console.log(d[0].name.sector)) // }) // }) // // Line labels // data // .forEach(system => { // system.values.forEach(sector => { // svg.append('text') // .datum(sector.trend) // .attr('x', d => x(d.slice(-1)[0].year)) // .attr('y', d => y(d.slice(-1)[0][valueKey])) // .attr('fill', colorScale.sector(sector.key)) // .attr('text-anchor', 'end') // .html(sector.key) // }) // }) // return svg.node(); }56:Tac9,//NB: Pretty sure this inadvertantly counts totals lineChartByRegion = { // const height = 400 // const svg = d3.select(DOM.svg(width, height)); // const margin = {top: 20, right: 100, bottom: 30, left: 60} // const format = d3.format(",") // const yearFormat = d3.format('') // const sector = 'TOTAL' // const data = mtJobsBySystemRegionYear // const valueKey = 'employment' // // const valueKey = 'wages' // const line = d3.line() // .x(d => x(d.year)) // .y(d => y(d[valueKey])) // const x = d3.scaleTime() // .domain(d3.extent(cleanedData, d => d.year)) // .range([margin.left, width - margin.right]) // const y = d3.scaleLinear() // // .domain([0, d3.max(grouped, system => d3.max(system, sector => d3.max(sector.trend, year => year[valueKey] ))) * 1.2]) // .domain([0,150000]) // .range([height - margin.bottom, margin.top]) // const xAxis = g => g // .attr("transform", `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(yearFormat)) // .call(g => g.select(".domain").remove()) // const yAxis = g => g // .attr("transform", `translate(${margin.left},0)`) // .call(d3.axisLeft(y) // .tickValues(d3.ticks(...y.domain(), 5)) // .tickFormat(format)) // .call(g => g.selectAll(".tick line").clone() // .attr("stroke-opacity", d => d === 1 ? null : 0.2) // .attr("x2", width - margin.left - margin.right)) // .call(g => g.select(".domain").remove()) // svg.append('text') // .attr('x',0) // .attr('y',14) // .text(`Trend: ${valueKey} by region, ${sector}`) // svg.append("g") // .call(xAxis); // svg.append("g") // .call(yAxis); // data // .forEach(system => { // system.values.forEach(region => { // svg.append("path") // .datum(region.trend) // .attr("fill", "none") // .attr("stroke", colorScale.region(region.key)) // .attr("stroke-width", 3) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", line) // .on('click', d => console.log(d[0].name.region)) // }) // }) // // labels // data.slice(0,1) // .forEach(system => { // system.values.forEach(region => { // svg.append('text') // .datum(region.trend) // .attr('dx', 5) // .attr('dy', 5) // .attr('x', d => x(d.slice(-1)[0].year)) // .attr('y', d => y(d.slice(-1)[0][valueKey])) // .attr('fill', colorScale.region(region.key)) // .attr('text-anchor', 'start') // .html(region.key) // }) // }) // return svg.node(); }57:Te68,buildLineChart = (opts) => { const data = opts.data const valueKey = opts.valueKey const color = opts.color const labelProcess = opts.labelProcess || ((d) => d) const title = opts.title || null const plotRecessions = opts.plotRecessions || true // highlights const highlightColor = opts.highlightColor || '#ed2' const sector = opts.sector || 'TOTAL' const yMax = opts.yMax || 300000 const yRange = opts.yRange || [0, yMax] const yearRange = opts.yearRange || ['1969', '2016'] const labelData = opts.labelData || data // OR data.slice(0,1) const height = opts.height || 400 const margin = opts.margin || {top: 20, right: 100, bottom: 40, left: 60} const plotHeight = height - margin.bottom - margin.top const plotWidth = width - margin.left - margin.right const yFormat = opts.yFormat || d3.format(",") const yearFormat = opts.yearFormat || d3.format('') const svg = d3.select(DOM.svg(width, height)) .style('border', '1px solid #eee'); const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) const line = d3.line() .x(d => x(d.year)) .y(d => y(d[valueKey])) const x = d3.scaleTime() // .domain(d3.extent(cleanedData, d => d.year)) .domain(yearRange) .range([0, plotWidth]) const y = d3.scaleLinear() .domain(yRange) .range([plotHeight, 0]) const xAxis = g => g .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(yearFormat)) .call(g => g.select(".domain").remove()) const yAxis = g => g .call(d3.axisLeft(y) .tickValues(d3.ticks(...y.domain(), 5)) .tickFormat(yFormat)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 1 ? null : 0.2) .attr("x2", width - margin.left - margin.right)) .call(g => g.select(".domain").remove()) if (title) { svg.append('text') .attr('x',0) .attr('y',14) .text(title) } plot.append("g") .call(xAxis); plot.append("g") .call(yAxis); // plot recession shading if (plotRecessions) { plot.append('g') .selectAll('.recession') .data(recessions).enter() .append('rect') .attr('class', 'recession') .attr('x', d => x(d.start)) .attr('y', 0) .attr('width', d => x(d.end) - x(d.start)) .attr('height', plotHeight) .attr('fill', highlightColor) .attr('fill-opacity', 0.2) } // lines data .forEach(system => { system.values.forEach(group => { const plotData = group.trend .filter(d => (+d.year >= yearRange[0] && +d.year <= yearRange[1])) plot.append("path") .datum(plotData) .attr("fill", "none") .attr("stroke", color(group.key)) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) }) }) // labels labelData .forEach(system => { system.values.forEach(group => { plot.append('text') .datum(group.trend) .attr('dx', 5) .attr('dy', 5) .attr('x', d => x(d.slice(-1)[0].year)) .attr('y', d => y(d.slice(-1)[0][valueKey])) .attr('fill', color(group.key)) .attr('text-anchor', 'start') .html(labelProcess(group.key)) }) }) return svg.node() }58:Td50,mtJobsByYearRegionSector = { const boxCount = 800 // const filteredData = cleanedData.filter(d => d.GeoName === geography) const filteredData = cleanedData // .filter(d => d.TimePeriod === '2016') // group and sum let grouped = d3.nest() .key(d => d.TimePeriod) // year .key(d => d.region) .key(d => d.cat) .entries(filteredData) // exclude total line // iterate through years grouped.sort((a,b) => +a.key - +b.key).forEach(year => { const statewide = year.values.find(d => d.key === 'Statewide') // Sum things up by each geography year.values.forEach(region => { const regionTotal = region.values .find(sector => sector.key === 'TOTAL') // Sum for 'TOTAL' sector across geographies in region region.population = +regionTotal.values.reduce((accumulator, obj) => accumulator + +obj['population'], 0) region.employment = +regionTotal.values.reduce((accumulator, obj) => accumulator + +obj['employment'], 0) region.wages = +regionTotal.values.reduce((accumulator, obj) => accumulator + +obj['wages'], 0) region.perCapEmployment = region.employment / region.population region.avgWages = region.wages / region.employment || 0 // 0 for zero employment // Sum values across industries in sector for each sector in region region.values.forEach(sector => { sector.color = colorScale.sector(sector.key) sector.employment = sector.values.reduce((accumulator, obj) => accumulator + +obj['employment'], 0) sector.wages = sector.values.reduce((accumulator, obj) => accumulator + +obj['wages'], 0) // calculated per region sector.perCapEmployment = sector.employment / region.population sector.perCapWages = sector.wages / region.population sector.employmentRelRegion = sector.employment / region.employment || 0 sector.wagesRelRegion = sector.wages / region.wages || 0 sector.employmentRelState = sector.employment / statewide.employment || 0 sector.employmentRelState2016 = sector.employment / total2016jobs sector.wagesRelState = sector.wages / statewide.wages || 0 }) // Add 'other' category const nonCatEmployment = region.employment - region.values .filter(d => d.key !== 'TOTAL') .reduce((acc, obj) => acc + obj.employment, 0) const nonCatWages = region.wages - region.values .filter(d => d.key !== 'TOTAL') .reduce((acc, obj) => acc + obj.wages, 0) const otherSector = { key: 'OTHER', color: '#bbb', employment: nonCatEmployment, wages: nonCatWages, // calculated values employmentRelRegion: nonCatEmployment / region.employment, wagesRelRegion: nonCatWages / region.wages, employmentRelState: nonCatEmployment / statewide.employment, employmentRelState2016: nonCatEmployment / total2016jobs, wagesRelState: nonCatWages / statewide.wages, } region.values.push(otherSector) // Add additional totals region.employmentRelState = regionTotal.employmentRelState region.wagesRelState = regionTotal.wagesRelState region.popRelState = region.population / statewide.population // sort by employment count, descending statewide.values.sort((a,b) => a.employment - b.employment) }) }) return grouped; }59:Td36,// used by detail table mtJobsByYearRegionSectorDetail = { const boxCount = 800 // const filteredData = cleanedData.filter(d => d.GeoName === geography) const filteredData = cleanedData // .filter(d => d.TimePeriod === '2016') // group and sum let grouped = d3.nest() .key(d => d.TimePeriod) // year .key(d => d.region) .key(d => d.sector) .entries(filteredData) // exclude total line // iterate through years grouped.forEach(year => { const statewide = year.values.find(d => d.key === 'Statewide') // Sum things up by each geography year.values.forEach(region => { const regionTotal = region.values .find(sector => sector.key === 'total') // Sum for 'TOTAL' sector across geographies in region region.population = +regionTotal.values.reduce((accumulator, obj) => accumulator + +obj['population'], 0) region.employment = +regionTotal.values.reduce((accumulator, obj) => accumulator + +obj['employment'], 0) region.wages = +regionTotal.values.reduce((accumulator, obj) => accumulator + +obj['wages'], 0) region.perCapEmployment = region.employment / region.population region.avgWages = region.wages / region.employment // Sum values across industries in sector for each sector in region region.values.forEach(sector => { sector.employment = sector.values.reduce((accumulator, obj) => accumulator + +obj['employment'], 0) sector.wages = sector.values.reduce((accumulator, obj) => accumulator + +obj['wages'], 0) sector.perCapEmployment = sector.employment / region.population sector.perCapWages = sector.wages / region.population // fraction by region sector.employmentRelRegion = sector.employment / region.employment sector.wagesRelRegion = sector.wages / region.wages sector.employmentRelState = sector.employment / statewide.employment sector.wagesRelState = sector.wages / statewide.wages sector.color = colorScale.sector(cats.sectors[sector.key]) // assign color for category }) // Add other category const nonCatEmployment = region.employment - region.values .filter(sector => sector.key !== 'total') .reduce((acc, obj) => acc + obj.employment, 0) const nonCatWages = region.wages - region.values .filter(sector => sector.key !== 'total') .reduce((acc, obj) => acc + obj.wages, 0) region.values.push({ key: 'OTHER', employment: nonCatEmployment, wages: nonCatWages, employmentRelRegion: nonCatEmployment / region.employment, wagesRelRegion: nonCatWages / region.wages, employmentRelState: nonCatEmployment / statewide.employment, wagesRelState: nonCatWages / statewide.wages, color: '#ddd' }) // Add additional totals region.employmentRelState = region.values.find(sector => sector.key === 'total').employmentRelState region.wagesRelState = region.values.find(sector => sector.key === 'total').wagesRelState region.popRelState = region.population / statewide.population // sort by employment count, descending statewide.values.sort((a,b) => a.employment - b.employment) }) }) grouped.sort((a,b) => +a.key - +b.key) // sort by year return grouped; }5a:Te89,cats = { return { sectors: { 'total': 'TOTAL', 'farm': 'NATURAL RESOURCES', 'forestry,_fishing,_and_related_activities': 'NATURAL RESOURCES', // NAICS 'forestry': 'NATURAL RESOURCES', //SIC 'mining,_quarrying,_and_oil_and_gas_extraction': 'NATURAL RESOURCES', // NAICS 'mining': 'NATURAL RESOURCES', // SIC 'utilities': 'NATURAL RESOURCES', 'construction': 'CONSTRUCTION', 'manufacturing': 'MANUFACTURING', 'wholesale_trade': 'TRADE', 'retail_trade': 'TRADE', 'transportation_and_warehousing': 'TRADE', // NAICS 'transportation_and_utilities': 'TRADE', // SIC 'information': 'SERVICES', 'finance_and_insurance': 'SERVICES', // NAICS 'finances': 'SERVICES', // SIC 'real_estate_and_rental_and_leasing': 'SERVICES', 'professional,_scientific,_and_technical_services': 'SERVICES', 'management_of_companies_and_enterprises': 'SERVICES', 'administrative_and_support_and_waste_management_and_remediation_services': 'SERVICES', 'educational_services': 'SERVICES', // NAICS, includes ONLY private education 'health_care_and_social_assistance': 'HEALTHCARE', 'arts,_entertainment,_and_recreation': 'SERVICES', 'accommodation_and_food_services': 'SERVICES', 'other_services_(except_government_and_government_enterprises)': 'SERVICES', 'services': 'SERVICES', // SIC 'government_and_government_enterprises': 'GOVERNMENT', 'federal_civilian': 'GOVERNMENT', 'military': 'GOVERNMENT', 'state_government': 'GOVERNMENT', 'local_government': 'GOVERNMENT', }, regions: { 'United States': 'US', 'Montana': 'Statewide', 'Beaverhead County': 'Mountains', 'Big Horn County': 'Plains', 'Blaine County': 'Plains', 'Broadwater County': 'Mountains', 'Carbon County': 'Plains', 'Carter County': 'Plains', 'Cascade County': 'Great Falls', 'Chouteau County': 'Plains', 'Custer County': 'Plains', 'Daniels County': 'Plains', 'Dawson County': 'Plains', 'Deer Lodge County': 'Butte', 'Fallon County': 'Plains', 'Fergus County': 'Plains', 'Flathead County': 'Kalispell', 'Gallatin County': 'Bozeman', 'Garfield County': 'Plains', 'Glacier County': 'Plains', 'Golden Valley County': 'Plains', 'Granite County': 'Mountains', 'Hill County': 'Plains', 'Jefferson County': 'Mountains', 'Judith Basin County': 'Plains', 'Lake County': 'Mountains', 'Lewis and Clark County': 'Helena', 'Liberty County': 'Plains', 'Lincoln County': 'Mountains', 'McCone County': 'Plains', 'Madison County': 'Mountains', 'Meagher County': 'Mountains', 'Mineral County': 'Mountains', 'Missoula County': 'Missoula', 'Musselshell County': 'Plains', 'Park County': 'Mountains', 'Petroleum County': 'Plains', 'Phillips County': 'Plains', 'Pondera County': 'Plains', 'Powder River County': 'Plains', 'Powell County': 'Mountains', 'Prairie County': 'Plains', 'Ravalli County': 'Missoula', 'Richland County': 'Plains', 'Roosevelt County': 'Plains', 'Rosebud County': 'Plains', 'Sanders County': 'Mountains', 'Sheridan County': 'Plains', 'Silver Bow County': 'Butte', 'Stillwater County': 'Plains', 'Sweet Grass County': 'Plains', 'Teton County': 'Plains', 'Toole County': 'Plains', 'Treasure County': 'Plains', 'Valley County': 'Plains', 'Wheatland County': 'Plains', 'Wibaux County': 'Plains', 'Yellowstone County': 'Billings', } } }5b:T6fb,displayLabels = (key) => { const labels = { 'total': 'Total', 'farm': 'Farm', 'forestry,_fishing,_and_related_activities': 'Forestry', // NAICS 'forestry': 'Forestry', //SIC 'mining,_quarrying,_and_oil_and_gas_extraction': 'Mining & oil', // NAICS 'mining': 'Mining & oil', // SIC 'utilities': 'Utilities', 'construction': 'Construction', 'manufacturing': 'Manufacturing', 'wholesale_trade': 'Wholesale trade', 'retail_trade': 'Retail trade', 'transportation_and_warehousing': 'Transporation', // NAICS 'transportation_and_utilities': 'Transportation', // SIC 'information': 'Information', 'finance_and_insurance': 'Finance', // NAICS 'finances': 'Finance/insurance', // SIC 'real_estate_and_rental_and_leasing': 'Real estate', 'professional,_scientific,_and_technical_services': 'Professional services', 'management_of_companies_and_enterprises': 'Business management', 'administrative_and_support_and_waste_management_and_remediation_services': 'Admin support', 'educational_services': 'Private education', // NAICS, includes ONLY private education 'health_care_and_social_assistance': 'Healthcare & social work', 'arts,_entertainment,_and_recreation': 'Arts & recreation', 'accommodation_and_food_services': 'Hotels & restaurants', 'other_services_(except_government_and_government_enterprises)': 'Other services', 'services': 'Services', // SIC 'government_and_government_enterprises': 'Government', 'federal_civilian': 'Federal civilian', 'military': 'Military', 'state_government': 'State government', 'local_government': 'Local government', } if (labels[key]) { return labels[key] } }5c:T4f3,colorScale = { return { sector: d3.scaleOrdinal() .domain(['NATURAL RESOURCES','CONSTRUCTION','MANUFACTURING','TRADE','SERVICES','HEALTHCARE','GOVERNMENT', 'TOTAL', 'OTHER', 'US']) // .range(['#8dd3c7','#ffff68','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69']) .range(['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02','#a6761d','#ccc','#ccc','#ccc']) , region: d3.scaleOrdinal() .domain(["Statewide", "Mountains", "Plains", // rural "Billings","Missoula","Great Falls", // metros "Bozeman","Kalispell","Helena","Butte" //non-metro cities ]) .range(['#444444', '#e5ae89','#f2df91', '#86bf86','#86bf86','#86bf86', '#86bf86','#86bf86','#86bf86','#86bf86' ]) // // New - urban areas scaled // .range(['#444444', // '#fa9fb5','#fed98e', // '#08519c','#2171b5','#4292c6', // '#6baed6','#9ecae1','#c6dbef','#deebf7' // ]) // OLD VERSION // .range(['#444444', // '#fdbf6f','#ff7f00', // '#08519c','#3182bd','#6baed6', // '#006d2c','#31a354','#74c476','#bae4b3' // ]) } }5d:[] 2f:{"title":"Montana's economy, visualized (DRAFT)","cells":[{"id":0,"value":"md`# Montana's economy, visualized (DRAFT)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"md`## The big picture`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5276,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5303,"value":"mtPicto2017 = buildDetailStatePictogram({\n data: detailJobsGrouped,\n height: 400,\n width: 800,\n margin: {left: 100, right: 100, top: 40, bottom: 20},\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5272,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2634,"value":"md`## By region`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2643,"value":"md` Job numbers in most blue-collar sectors — farming, manufacturing and mining, for example — haven't dropped much since the turn of the century, but haven't grown much either. Instead, most job creation has been in services and healthcare.\n\nThe bulk of Montana's new jobs have also been created in urban areas.\n\nTODO: Add sector key of some sort in here\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4580,"value":"mtJobsByCounty = mapJobsByCounty({\n dataLayer: countyData,\n baseLayer: mtCounties,\n plotDim: 'employment16',\n markerStyle: {\n fill: '#000',\n fillOpacity: 1,\n stroke: 'none',\n strokeWidth: 1,\n },\n baseLayerStyle: {\n fill: d => colorScale.region(d.properties.region),\n // fill: '#ddd',\n // fill: d => ['Mountains','Plains'].includes(d.properties.region) ? '#ddd' : '#ccc',\n // fill: d => {\n // if (d.properties.region === 'Mountains') return '#ffe4cc'\n // if (d.properties.region === 'Plains') return '#ffd'\n // else return '#bdb'\n // },\n stroke: '#fff',\n strokeWidth: 1,\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4584,"value":"mtJobChangeByCounty = mapChangeByCounty({\n dataLayer: countyData,\n baseLayer: mtCounties,\n plotDim: 'employmentChange',\n markerStyle: { fill: '#4575b4'},\n baseLayerStyle: {\n fill: d => colorScale.region(d.properties.region),\n stroke: '#fff',\n strokeWidth: 1,\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4640,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"regionPict = buildRegionPictogram({\n data: mtJobsByYearRegionSector,\n year: '2016',\n groupSpacing: 75,\n height: 250\n // compareYear: '2001',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3328,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4975,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2797,"value":"regionChangeBarsDesktop = {\n const chart = buildFacetedBarHorz({\n data: regionChangeData,\n facetKeys: [\n '','Bozeman','Billings', 'Missoula',\n 'Kalispell', 'Helena',\n '','Great Falls', 'Butte',\n '','Mountains', 'Plains',\n ],\n plotDim: 'employmentChange',\n title: '',\n yRange: [0,15000],\n yLabels: [0,5000,10000,15000],\n width: 600,\n height: 400,\n fontSize: 14,\n subPlotDims: [3,4],\n subPlotMargins: [50,50],\n subPlotPadding: 40,\n margin: {top: 30, bottom: -20, left: 80, right: 10},\n \n // other data displays\n // plotDim: 'employment',\n // xRange: [0, 50000]\n // plotDim: 'employmentPerChange',\n // xRange: [0, 2],\n // plotDim: 'wageChange',\n // xRange: [-100000,1000000]\n })\n return htmlWrap(chart, 500)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4532,"value":"md`TODO - create HTML-based label key for colors, to use across these graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4490,"value":"regionChangeBarsMobile = {\n const chart = buildFacetedBarHorz({\n data: regionChangeData,\n plotDim: 'employmentChange',\n facetKeys: [\n '','Bozeman','Billings',\n 'Missoula','Kalispell','Helena',\n '','Great Falls', 'Butte',\n '','Mountains', 'Plains',\n ],\n title: '',\n width: 300,\n height: 400,\n yRange: [0,15000],\n yLabels: [0, 5000, 10000, 15000],\n margin: {left: 35, top: 20, right: -30, bottom: -10},\n subPlotDims: [3,4],\n subPlotMargins: [40,40],\n subPlotPadding: 35,\n // other data displays\n // plotDim: 'employment',\n // xRange: [0, 50000]\n // plotDim: 'employmentPerChange',\n // xRange: [0, 2],\n // plotDim: 'wageChange',\n // xRange: [-100000,1000000]\n })\n return htmlWrap(chart, 300)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4496,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4914,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4166,"value":"md`TODO -- Look at breaking above chart down into squares (overlay grid lines, adjust bar height)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3876,"value":"countyData = {\n const filtered = cleanedData.filter(d => d.GeoName !== 'Montana')\n const nested = d3.nest()\n .key(d => d.GeoName)\n .key(d => d.TimePeriod)\n .entries(filtered)\n \n const data = nested.map(county => {\n const geo = mtCounties.features.find(d => `${d.properties.label}, MT` === county.key)\n const countyTot16 = county.values\n .find(year => year.key === '2016').values\n .find(sector => sector.sector === 'total')\n const countyTot01 = county.values\n .find(year => year.key === '2001').values\n .find(sector => sector.sector === 'total')\n return {\n // build GeoJson\n type: 'Feature',\n geometry: geo.geometry,\n properties: {\n name: county.key,\n label: county.key.replace(', MT', ''),\n region: geo.properties.region,\n employment16: countyTot16.employment,\n employmentChange: countyTot16.employment - countyTot01.employment,\n }\n }\n \n })\n \n return data\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4483,"value":"md`Regional sorting: Rural Mountains, Rural Plains, Growth urban region, Minimal growth urban region`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4169,"value":"md`### Where new jobs have been since 2001`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3865,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":4046,"value":"mergedRegions = {\n const regions = [... new Set(mtCounties.features.map(d => d.properties.region))]\n const countiesTopojson = topoServer.topology({counties: mtCounties}, 430)\n // merge and return as array of GeoJson features\n const mergedRegions = regions.map(region => {\n const geometries = countiesTopojson.objects.counties.geometries\n const filtered = geometries.filter(d => d.properties.region == region)\n return { type: 'Feature', geometry: topojson.merge(countiesTopojson, filtered) }\n })\n return mergedRegions\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4078,"value":"us = await d3.json('https://unpkg.com/us-atlas@1/us/10m.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2793,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3261,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":3193,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"md`\n\"Plains\" and \"Mountains\" represent north-central/eastern and western rural parts of the state, respectively.\n\nSome urban areas include adjacent counties (Ravalli for Missoula, Jefferson for Helena, Deer Lodge for Butte)\n\n'Service' is a pretty broad category - explain with annotations\n\nTakeaways (will annotate in Illustrator)\n- More/most natural resource jobs in rural areas ('plains')\n- More gov't jobs in plains - rural areas especially.\n- Healthcare jobs clustered in urban areas, especially on the plains.\n- Helena's economy is the same size as Great Falls (by job counts)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"md`## Scenery economy employment outstrips natural resource work\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"sectorChange1 = {\n const includeSectors = [\n 'farm',\n 'forestry',\n 'forestry,_fishing,_and_related_activities',\n 'mining',\n 'mining,_quarrying,_and_oil_and_gas_extraction',\n ]\n const data = mtJobsBySystemSectorYearDetail\n .map(system => ({key: system.key, values: system.values\n .filter(sector => includeSectors.includes(sector.key))\n // .map(sector => ({ key: sector.key, trend: sector.trend\n // .map(year => Object.assign(year, { empRel2016: year.employment / total2016jobs}) )\n // }))\n }))\n \n return buildLineChart({\n data: data,\n labelData: data,\n labelProcess: displayLabels,\n valueKey: 'employment', // or 'wages'\n color: (key) => colorScale.sector(cats.sectors[key]),\n title: '',\n yearRange: ['1970','2016'],\n margin: {top: 10, right: 400, bottom: 30, left: 50},\n height: 200,\n yMax: 60000\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"sectorChange2 = {\n const includeSectors = [\n 'construction',\n 'real_estate_and_rental_and_leasing',\n 'arts,_entertainment,_and_recreation',\n 'accommodation_and_food_services'\n \n ]\n const data = mtJobsBySystemSectorYearDetail\n // .filter(system => system.key === 'NAICS')\n .map(system => ({key: system.key, values: system.values\n .filter(sector => includeSectors.includes(sector.key))\n }))\n \n return buildLineChart({\n data: data,\n valueKey: 'employment', // or 'wages'\n labelProcess: displayLabels,\n color: (key) => colorScale.sector(cats.sectors[key]),\n title: '',\n margin: {top: 10, right: 400, bottom: 30, left: 50},\n yMax: 60000,\n yearRange: ['1970', '2016'],\n height: 200,\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"md`TODO\n- look at what's driving the post-2010 mining boom (presumably the Bakken, but check geographies).\n- look at 1970s farm crash\n- look at 1980s mining up-and-down\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2039,"value":"md`## Average wages by industry\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3415,"value":"md`\nThe service industries that have carried much of Montana's job growth so far this century tend to have below average wages — an indication that they either pay poorly or that their jobs tend to be part-time.\n\nHealthcare has, on the whole, both above-average wages and growing employment. \n\nMany growing service industries have fairly low average wages -- either part-time or low per-hour wage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4441,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3336,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":3338,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":2356,"value":"md`## Non-wage income\n\nWhat's important here:\n- Overall per-capita income is similar to US in Bozeman/Billings. State as a whole is lower. Rural areas much lower. Graphic story - why is that?\n- TODO: Look at per-capita income from various sources between regions.\n\nTrends aren't super interesting here. Relative positioning of regions over time is. Focus on 2016 ranking, maybe look at change since 01\n\nLess wage income, relatively speaking in rural areas (Plains especially), higher personal transfer receipts (Social Security?)\n\nTable is a good way to present this --> replace percentage columns with a divided bar chart?\n\nTODO\n- Add national figure for comparison?\n- Look at comparisons (is non-wage income as a percent of overall income up?)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2570,"value":"md`### 2016 income breakdown by Montana region\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3744,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":3774,"value":"md` ### The rest of the story\n\nWage income represents less than half of Montanans' overall income — with the remainder a combination of investment income (e.g. stock dividends and property rent), transfer payments (e.g. social security and other government benefits) and business owners' income.\n\nRural areas in particular have a low portion of income coming from wages and a comparatively high portion coming from transfer benefits.\n\nTODO - polishing these graphics, make the data hierarchy clearer. Possibly add MT average line.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3661,"value":"perCapIncomeRegionDesktop = buildLaborNonLaborVerticalBar({\n data: incomePlotData,\n plotDim: 'perCapitaIncome',\n xCat: 'region',\n colors: (d => colorScale.region(d.region)),\n height: 200,\n width: 600,\n yRange: [0, 60000],\n margin: {top: 30, left: 50, right: 50, bottom: 30},\n title: 'Per-capita income overall, wage versus non-wage',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5255,"value":"perCapIncomeRegionMobile = buildLaborNonLaborVerticalBar({\n data: incomePlotData,\n plotDim: 'perCapitaIncome',\n xCat: 'region',\n colors: (d => colorScale.region(d.region)),\n height: 200,\n width: 300,\n yRange: [0, 60000],\n title: 'Per-capita income overall, wage versus non-wage',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3838,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":3810,"value":"buildNonLaborCatsBar({\n data: incomePlotData,\n plotDim: 'perCapitaIncome',\n xCat: 'region',\n yRange: [0, 50000],\n colors: (d => colorScale.region(d.region)),\n height: 200,\n title: 'Non-wage income, per-capita by major type',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4310,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":5055,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":5236,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":5052,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":5108,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":4344,"value":"incomeLineChart = buildIncomeLineChart({\n data: incomeRelNationData,\n valueKey: 'relIncomePerCapita',\n color: colorScale.region,\n yRange: [0.5,1.5],\n yearRange: ['2001','2016'],\n title: 'Per Capita income relative to US figure',\n})\n\n// dims in data\n// relIncomePerCapita, relWagesPerCapita, relNonWagePerCapita\n// relInvestmentsPerCapita, relTransfersPerCapita, relbusinessPerCapita","pinned":false,"hidden":false,"mode":"ojs"},{"id":4400,"value":"relWagesLineChart = buildIncomeLineChart({\n data: incomeRelNationData,\n valueKey: 'relWagesPerCapita',\n color: colorScale.region,\n yRange: [0.5,1.5],\n yearRange: ['2001','2016'],\n title: 'Per Capita WAGE income relative to US figure',\n})\n\n// dims in data\n// relIncomePerCapita, relWagesPerCapita, relNonWagePerCapita\n// relInvestmentsPerCapita, relTransfersPerCapita, relbusinessPerCapita","pinned":false,"hidden":false,"mode":"ojs"},{"id":4404,"value":"relInvestmentIncomeLineChart = buildIncomeLineChart({\n data: incomeRelNationData,\n valueKey: 'relInvestmentsPerCapita',\n color: colorScale.region,\n yRange: [0.5,1.5],\n yearRange: ['2001','2016'],\n title: 'Per Capita INVESTMENT income relative to US figure',\n})\n\n// dims in data\n// relIncomePerCapita, relWagesPerCapita, relNonWagePerCapita\n// relInvestmentsPerCapita, relTransfersPerCapita, relbusinessPerCapita","pinned":false,"hidden":false,"mode":"ojs"},{"id":5037,"value":"relTransfersIncomeLineChart = buildIncomeLineChart({\n data: incomeRelNationData,\n valueKey: 'relTransfersPerCapita',\n color: colorScale.region,\n yRange: [0.5,1.5],\n yearRange: ['2001','2016'],\n title: 'Per Capita INVESTMENT income relative to US figure',\n})\n\n// dims in data\n// relIncomePerCapita, relWagesPerCapita, relNonWagePerCapita\n// relInvestmentsPerCapita, relTransfersPerCapita, relbusinessPerCapita","pinned":false,"hidden":false,"mode":"ojs"},{"id":5086,"value":"relBusinessIncomeLineChart = buildIncomeLineChart({\n data: incomeRelNationData,\n valueKey: 'relBusinessPerCapita',\n color: colorScale.region,\n yRange: [0.5,1.5],\n yearRange: ['2001','2016'],\n title: 'Per Capita BUSINESS income relative to US figure',\n})\n\n// dims in data\n// relIncomePerCapita, relWagesPerCapita, relNonWagePerCapita\n// relInvestmentsPerCapita, relTransfersPerCapita, relbusinessPerCapita","pinned":false,"hidden":false,"mode":"ojs"},{"id":4342,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":3835,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":3668,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":3651,"value":"md`\nNeed a better way of displaying this one - that gives space to explain categories, highlihgts differences\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2620,"value":"md`Takeways here:\n- Need to explain transfers (social security, welfare payments, etc.)\n- Low wage and high investments and transfer figures for rural Mountains may indicate a high retiree population\n- Note that rural areas have lower per-capita income\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2613,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":2367,"value":"groupIncomeByYearRegionCategory = {\n \n const grouped = d3.nest()\n .key(d => d.system)\n .key(d => d.TimePeriod)\n .key(d => d.region)\n .entries(incomeData)\n \n return grouped\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"md`## Postscript\n\n- Data citation\n- Link to nerd box\n\nSomething along the lines of: _Have questions about this? Let us know — we’ll be discussing a follow-ups (including what this data misses about the Montana economy) in the next couple installments of our Long Streets newsletter._\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2665,"value":"md`# Other charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2731,"value":"md`### Long-term trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2667,"value":"{\n const data = mtJobsBySystemSectorYear\n \n return buildLineChart({\n data: data,\n yearRange: ['1980','2016'],\n labelData: data.slice(0,1),\n valueKey: 'employment', // or 'wages'\n color: colorScale.sector,\n title: 'Employment trend, total by sector category (Note SIC to NAICS categorization system break 2000-2001)',\n margin: {top: 40, right: 200, bottom: 30, left: 50}\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2670,"value":"{\n const sector = 'TOTAL'\n const valueKey = 'employment' // or 'wages'\n const data = groupDataBySystemRegionYear({\n flatData: cleanedData,\n sectorFilter: d => d.cat === sector,\n // regionFilter: d => ['Plains', 'Mountains'].includes(d.region),\n })\n\n return buildLineChart({\n data: data,\n yearRange: ['1980','2016'],\n labelData: data.slice(0,1),\n yMax: 150000,\n valueKey: valueKey,\n color: colorScale.region,\n title: `Trend in ${valueKey} by region, ${sector} sector`,\n height: 300\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"{\n const sector = 'TOTAL'\n const valueKey = 'population' // or 'wages'\n const data = groupDataBySystemRegionYear({\n flatData: cleanedData,\n sectorFilter: d => d.cat === sector,\n // regionFilter: d => ['Plains', 'Mountains'].includes(d.region),\n })\n\n return buildLineChart({\n data: data,\n yearRange: ['1980','2016'],\n labelData: data.slice(0,1),\n yMax: 250000,\n valueKey: valueKey,\n color: colorScale.region,\n title: `Trend in ${valueKey} by region, ${sector} sector`,\n height: 300\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2733,"value":"md`### Break-down by sector\n\nColors represent the broader categories I'm grouping things in\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2698,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2729,"value":"md`### Looking at non-wage incomes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"viewof incomeType = DOM.select(['total', 'wages_and_salaries', 'dividends_interest_rent', 'personal_current_transfer_receipts','proprietor_income'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2687,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"{\n const valueKey = 'incomeRelTotal' // 'income', 'perCapitaIncome', 'incomeRelTotal', 'population'\n\n return buildLineChart({\n data: incomeBySystemRegionTime,\n yearRange: ['2000','2016'],\n // yRange: [0.1, 0.3],\n yRange: [0,1],\n valueKey: valueKey,\n color: colorScale.region,\n title: `Trend in ${valueKey} by region, ${incomeType}`,\n height: 300\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"{\n const valueKey = 'perCapitaIncome' // 'income', 'perCapitaIncome', 'incomeRelTotal', 'population'\n const cat = incomeType\n // total, dividends_interest_rent, personal_current_transfer_receipts,\n // wages_and_salaries, proprietor_income\n\n return buildLineChart({\n data: incomeBySystemRegionTime,\n yearRange: ['2000','2016'],\n // labelData: data.slice(0,1),\n yRange: [0, 50],\n // yRange: [10,25],\n valueKey: valueKey,\n color: colorScale.region,\n title: `Trend in ${valueKey} by region, ${cat}`,\n height: 500\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3526,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs"},{"id":4453,"value":"viewof industryCompRegion = DOM.select(mtJobsByYearRegionSector[0].values.map(d => d.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4449,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs"},{"id":5719,"value":"md`### Old versions of graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3846,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs"},{"id":5717,"value":"mtPicto2016 = buildStatePictogram({\n data: mtJobsByYearRegionSector,\n geo: 'Statewide',\n year: '2016',\n height: 200,\n width: 600,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5714,"value":"$50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"md`# Data management`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"locatorMap = {\n// const width = 800;\n// const height = 400;\n// const path = d3.geoPath();\n \n// const data = mtCounties.features\n \n// data.forEach(feature => {\n// // accidentally deleted cell\n// const match = byCounty.find(county => county.fips === feature.id)\n// feature.properties.region = match.region\n// })\n\n// const svg = d3.select(DOM.svg(width, height))\n// .style(\"width\", \"100%\")\n// .style(\"height\", \"auto\")\n// .style('border', '1px solid black');\n\n// svg.append(\"g\")\n// .attr(\"transform\", `translate(-350,50) rotate(-9) scale(2.5)`)\n// .selectAll(\"path\")\n// .data(data).enter()\n// .append(\"path\")\n// .attr(\"fill\", d => colorScale.region(d.properties.region))\n// .attr(\"stroke-width\", 0.5)\n// .attr(\"stroke\", \"#fff\")\n// .attr(\"stroke-linejoin\", \"round\")\n// .attr(\"d\", path)\n// .on('click', d=> console.log(d.properties.region));\n\n// return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3507,"value":"avgWage16 = {\n const mt16 = cleanedData\n .filter(d => d.TimePeriod === '2016')\n .find(d => d.region === 'Statewide' && d.cat === 'TOTAL')\n return Math.round(mt16.wages * 1000 / mt16.employment)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3519,"value":"jobGrowth01to16 = {\n const mt16 = cleanedData\n .filter(d => d.TimePeriod === '2016')\n .find(d => d.region === 'Statewide' && d.cat === 'TOTAL')\n const mt01 = cleanedData\n .filter(d => d.TimePeriod === '2001')\n .find(d => d.region === 'Statewide' && d.cat === 'TOTAL')\n return mt16.employment / mt01.employment - 1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3521,"value":"popGrowth01to16 = {\n const mt16 = cleanedData\n .filter(d => d.TimePeriod === '2016')\n .find(d => d.region === 'Statewide' && d.cat === 'TOTAL')\n const mt01 = cleanedData\n .filter(d => d.TimePeriod === '2001')\n .find(d => d.region === 'Statewide' && d.cat === 'TOTAL')\n return mt16.population / mt01.population - 1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"md`## Explore by year/region`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"viewof geo = DOM.select(mtJobsByYearRegionSector[0].values.map(d => d.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"viewof year = DOM.select(mtJobsByYearRegionSector.reverse().map(d => d.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"// from https://beta.observablehq.com/@tmcw/tables\nsectorTable = table(mtJobsByYearRegionSector\n .find(d => d.key === year).values\n .find(d => d.key === geo).values\n .map(d => {\n return {\n 'Sector': d.key,\n 'Jobs': d.employment,\n '% of Regional Jobs': d.employmentRelRegion,\n '% of MT Jobs': d.employmentRelState,\n 'Wages': d.wages,\n }}), {\n // sortable: true,\n columns: {\n Sector: {\n formatter(val){\n let color = '#ddd'\n if (!['OTHER','TOTAL'].includes(val)) { color = colorScale.sector(val) }\n return html`${val}`\n }\n },\n Jobs: {\n formatter(val){ return d3.format(',')(val) }\n },\n Wages: { formatter(val){ return d3.format('$,')(val * 1000) } },\n '% of Regional Jobs': { formatter(val){ return d3.format('.1%')(val) } },\n '% of MT Jobs': { formatter(val){ return d3.format('.1%')(val) } }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1607,"value":"viewof selectSector = DOM.select(mtJobsByYearRegionSector[1].values[5].values.map(d => d.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"$51","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"viewof selectMetric = DOM.select(['employment', 'wages', 'population', 'avgWage', 'perCapitaEmployment','perCapitaWages', 'employmentDataCompleteness'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1935,"value":"{\n // const sector = 'CONSTRUCTION'\n // const valueKey = 'perCapitaEmployment' // or 'wages'\n const valueKey = selectMetric\n const data = groupDataBySystemRegionYear({\n flatData: cleanedData,\n sectorFilter: d => d.cat === selectSector\n })\n // return data\n const yMax = d3.max(data, system => \n d3.max(system.values, region => \n d3.max(region.trend, year => year[valueKey])))\n\n return buildLineChart({\n data: data,\n labelData: data.slice(0,1),\n yMax: yMax * 1.2,\n valueKey: valueKey,\n color: colorScale.region,\n title: `Trend in ${valueKey} by region, ${selectSector} sector`\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3269,"value":"sectorChange3 = {\n const includeSectors = [\n 'local_government', 'federal_civilian','state_government','military'\n // 'real_estate_and_rental_and_leasing',\n // 'arts,_entertainment,_and_recreation',\n // 'accommodation_and_food_services'\n \n ]\n const data = mtJobsBySystemSectorYearDetail\n // .filter(system => system.key === 'NAICS')\n .map(system => ({key: system.key, values: system.values\n .filter(sector => includeSectors.includes(sector.key))\n }))\n \n return htmlWrap(buildLineChart({\n data: data,\n valueKey: 'employment', // or 'wages'\n labelProcess: displayLabels,\n color: (key) => colorScale.sector(cats.sectors[key]),\n title: '',\n margin: {top: 10, right: 400, bottom: 30, left: 50},\n yMax: 60000,\n yearRange: ['1980', '2016'],\n height: 200,\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4693,"value":"tempPatternGenerator = {\n const patterns = [\n {key: 1, d: 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2', w: 4, color: 'gray', strokeWidth: 1},\n {key: 2, d: 'M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2', w: 8, color: 'gray', strokeWidth: 2},\n {key: 3, d: 'M7,-1 l2,2 M0,0 l8,8 M-1,7 l2,2 M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2', w: 4, color: 'gray', strokeWidth: 1}\n ]\n const svg = DOM.svg(width, 100)\n svg\n .append('defs')\n .selectAll('pattern')\n .data(patterns).enter()\n .append('pattern')\n .attr('id', d => `diagonalHatch${d.key}`)\n .attr('patternUnits', 'userSpaceOnUse')\n .attr('width', d => d.w)\n .attr('height', d => d.w)\n .append('path')\n .attr('d', d => d.d)\n .attr('stroke', d => d.color)\n .attr('stroke-width', d => d.strokeWidth)\n const applyFill = (key) => {\n let pattern = patterns[0].key\n if (key === 'Mountains') return '#ffe4cc'\n if (key === 'Plains') return '#ffd'\n return `url(#diagonalHatch${pattern})`\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"$52","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"$53","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"// used by by region line chart\n\nmtJobsBySystemRegionYear = {\n const data = cleanedData\n .filter(d => d.region !== 'Statewide') // remove aggregate\n .map(d => Object.assign(d, {\n employment: +d.employment,\n wages: +d.wages,\n year: d.TimePeriod\n }))\n const grouped = d3.nest()\n .key(d => d.system) // NAICS OR SIC \n .key(d => d.region)\n .key(d => d.year)\n .entries(data)\n \n grouped\n .forEach(system => {\n system.values.forEach(region => {\n region.trend = []\n region.values\n .sort((a,b) => +a.key - +b.key)\n .forEach(year => {\n region.trend.push({\n year: year.key,\n employment: year.values.reduce((accumulator, obj) => accumulator + +obj.employment, 0),\n wages: year.values.reduce((accumulator, obj) => accumulator + +obj.wages, 0),\n name: year.values[0],\n values: year.values\n })\n })\n })\n })\n return grouped\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"$54","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"$55","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"$56","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"$57","pinned":false,"hidden":false,"mode":"ojs"},{"id":1690,"value":"total2016jobs = 669432","pinned":false,"hidden":false,"mode":"ojs"},{"id":2756,"value":"box800ratio = total2016jobs / 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":2758,"value":"[\n 3160, // sectors for highlights - match note in .ai file\n 5185,\n 11335,\n 5785,\n 7533,\n 43165,\n 25484,\n 2881,\n 7836,\n 24281\n].map( d => Math.round(d / box800ratio))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2747,"value":"{\n return cleanedData.find(d => (d.TimePeriod === '2016' && d.region === 'Statewide'))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"$58","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"$59","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"incomeData = {\n \n const raw = await d3.csv('https://gist.githubusercontent.com/eidietrich/43884a74e7c1763bcd2d5838bc99684e/raw/8f8b73169995a979152df65235e2f0791a089e48/mt-county-income-trends-01-16.csv')\n \n return raw.map(d => Object.assign(d, {\n // names are already present - this replaces to allow aggregation tweaking here\n rawIncome: +d.income || 0,\n income: +d.income * inflationRatios[d.TimePeriod] || 0,\n population: +d.population || 0,\n region: cats.regions[d.GeoName.replace(', MT',' County')]\n }))\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5266,"value":"mtJobsDetail = {\n // Detailed data just for 2017\n const rawData = await d3.csv('https://gist.githubusercontent.com/eidietrich/a5d4a6c1de72bf4380d14e83dfa1606d/raw/be977bfb705eebb32e1ca85e07913299b782493e/mt-statewide-employment-detail-sa25n-2017.csv')\n return rawData\n .map(d => Object.assign(d, {\n TimePeriod: '2017',\n // names are already present - this replaces to allow aggregation tweaking here\n employment: +d.employment || 0,\n cat: cats.sectors[d.sector],\n region: cats.regions[d.GeoName.replace(', MT',' County')]\n })) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"recessions = {\n const parseDate = d3.timeParse(\"%B %Y\")\n const getYear = d3.timeFormat('%Y')\n const recessions = [\n {\n \"Start\": \"December 1969\",\n \"End\": \"November 1970\"\n },\n {\n \"Start\": \"November 1973\",\n \"End\": \"March 1975\"\n },\n {\n \"Start\": \"January 1980\",\n \"End\": \"July 1980\"\n },\n {\n \"Start\": \"July 1981\",\n \"End\": \"November 1982\"\n },\n {\n \"Start\": \"July 1990\",\n \"End\": \"March 1991\"\n },\n {\n \"Start\": \"March 2001\",\n \"End\": \"November 2001\"\n },\n {\n \"Start\": \"December 2007\",\n \"End\": \"June 2009\"\n }\n ]\n return recessions.map(d => ({\n 'start': getYear(parseDate(d.Start)),\n 'end': getYear(parseDate(d.End))\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3850,"value":"mtCounties = { \n const rawMtCounties = await d3.json('https://gist.githubusercontent.com/eidietrich/1f4727a8fb1a32bda14c921b29028bfd/raw/2479b3ae8ca3aa09c2b9f2cb9c9ca7f892250a96/mt-counties.geojson')\n const mtCounties = { type: 'FeatureCollection' }\n mtCounties.features = rawMtCounties.features.map(county => {\n return Object.assign(county, {\n properties: {\n key: `${county.properties.NAMELABEL} County`,\n label: county.properties.NAMELABEL,\n fips5: county.properties.ALLFIPS,\n region: cats.regions[`${county.properties.NAMELABEL} County`],\n }\n })\n })\n return mtCounties\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"// factors for converting historical dollars into 2016 equivalents\n// Manually downloaded from https://data.bls.gov/cgi-bin/cpicalc.pl\ninflationRatios = ({\n '2001': 1.35,\n '2002': 1.34,\n '2003': 1.31,\n '2004': 1.27,\n '2005': 1.24,\n '2006': 1.19,\n '2007': 1.16,\n '2008': 1.10,\n '2009': 1.12,\n '2010': 1.11,\n '2011': 1.07,\n '2012': 1.05,\n '2013': 1.03,\n '2014': 1.01,\n '2015': 1.01,\n '2016': 1.00,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2716,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"cleanedData = {\n\n const rawData = await d3.csv('https://gist.githubusercontent.com/eidietrich/a09fb57ebbd045befbd74b8a9c46ca66/raw/1b8f782369c18be6adaa850c11558885491d7d9c/mt-county-econ-trends-bea-69-16.csv')\n \n return rawData\n .filter(d => d.GeoName !== 'United States')\n .map(d => Object.assign(d, {\n // names are already present - this replaces to allow aggregation tweaking here\n employment: +d.employment || 0,\n wages: +d.wages || 0,\n population: +d.population || 0,\n cat: cats.sectors[d.sector],\n region: cats.regions[d.GeoName.replace(', MT',' County')]\n })) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"/* template for MT cartogram\n array of columns, each column has [start, len] coords\n*/\nmtTemplate = [\n [0,6], // col 0, start at top and go down for 6\n [0,8],\n [0,9],\n [0,11],\n [0,18], [0,18], // the nose\n [0,17],\n [0,18],\n [0,20],\n [0,21],\n [0,23], // southernmost point\n [0,22], [0,22], [0,22], [0,22], \n [0,21],\n [0,22], // tip of Gallatin County\n // rectangular part of state, 20 tall, x 25 wide\n [0,20], [0,20], [0,20], [0,20], [0,20],\n [0,20], [0,20], [0,20], [0,20], [0,20],\n [0,20], [0,20], [0,20], [0,20], [0,20],\n [0,20], [0,20], [0,20], [0,20], [0,20],\n [0,20], [0,20], [0,20], [0,20], [0,20],\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"// mtCounties = {\n// const usRaw = await d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")\n// return {\n// type: \"FeatureCollection\",\n// features: topojson.feature(usRaw, usRaw.objects.counties).features\n// .filter(d => d.id.slice(0,2) == '30') // filter to MT by FIPS\n// } \n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1951,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4050,"value":"topoServer = require('topojson-server')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3344,"value":"d3Legend = require('d3-svg-legend')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3295,"value":"maxWidth = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"md`### Export`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3286,"value":"// NEED TO USE ONE STYLE B/C stylesheet is apparently global\nhtmlWrap = (svg, width) => {\n const style = html`\n`\n\n return html`\n ${style}\n

\n ${svg}\n

\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"DOM.download(serialize(mtPicto2017), 'file.svg', \"Download SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2651,"value":"DOM.download(serialize(industryComparison), 'html-file.html', 'Download HTML')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W5d","stdlib":"1","titling":"auto"}