2f:T9e1,function two_way(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleSequential() .domain([pd.pdp_min, pd.pdp_max]) .nice() .interpolator(d3.interpolateYlGnBu) const rectWidth = x(xDiff) - x(0); const rectHeight = y(0) - y(yDiff); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i] - xDiff / 2)) .attr('y', i => y(pd.y_values[i] + yDiff / 2)) .attr('width', rectWidth) .attr('height', rectHeight) .attr('fill', i => color(pd.mean_predictions[i])); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }30:T9f9,function two_way_no_interaction(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleSequential() .domain([pd.pdp_min, pd.pdp_max]) .nice() .interpolator(d3.interpolateYlGnBu) const rectWidth = x(xDiff) - x(0); const rectHeight = y(0) - y(yDiff); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i] - xDiff / 2)) .attr('y', i => y(pd.y_values[i] + yDiff / 2)) .attr('width', rectWidth) .attr('height', rectHeight) .attr('fill', i => color(pd.no_interactions[i] + pd.mean)); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }31:T9f9,function two_way_interaction(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleDiverging() .domain([pd.interaction_min, 0, pd.interaction_max]) .nice() .interpolator(d3.interpolateBrBG); const rectWidth = x(xDiff) - x(0); const rectHeight = y(0) - y(yDiff); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i] - xDiff / 2)) .attr('y', i => y(pd.y_values[i] + yDiff / 2)) .attr('width', rectWidth) .attr('height', rectHeight) .attr('fill', i => color(pd.interactions[i])); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }32:Tc14,function two_way_border(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 100, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const colorPrediction = d3.scaleSequential() .domain([pd.pdp_min, pd.pdp_max]) .nice() .interpolator(d3.interpolateGreens); const colorInteraction = d3.scaleDiverging() .domain([pd.interaction_min, 0, pd.interaction_max]) .nice() .interpolator(d3.interpolatePuOr) const rectWidth = x(xDiff) - x(0); const rectHeight = y(0) - y(yDiff); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const strokeWidth = 3; g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i] - xDiff / 2) + strokeWidth / 2) .attr('y', i => y(pd.y_values[i] + yDiff / 2) + strokeWidth / 2) .attr('width', rectWidth - strokeWidth) .attr('height', rectHeight - strokeWidth) .attr('stroke', i => colorInteraction(pd.interactions[i])) .attr('stroke-width', strokeWidth) .attr('fill', i => colorPrediction(pd.mean_predictions[i])); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -${margin.top})`) .append(() => Legend(colorPrediction, { width, title: 'Prediction' })); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(colorInteraction, { width, title: 'Interaction' })); return svg.node(); }33:Tb58,function two_way_size_by_interaction(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleSequential() .domain([pd.pdp_min, pd.pdp_max]) .nice() .interpolator(d3.interpolateYlGnBu) const maxRectWidth = x(xDiff) - x(0); const maxRectHeight = y(0) - y(yDiff); const rectWidth = d3.scaleSqrt() .domain([0, pd.interaction_max]) .range([0, maxRectWidth]); const rectHeight = d3.scaleSqrt() .domain([0, pd.interaction_max]) .range([0, maxRectHeight]); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i]) - rectWidth(Math.abs(pd.interactions[i])) / 2) .attr('y', i => y(pd.y_values[i]) - rectHeight(Math.abs(pd.interactions[i])) / 2) .attr('width', i => rectWidth(Math.abs(pd.interactions[i]))) .attr('height', i => rectHeight(Math.abs(pd.interactions[i]))) .attr('fill', i => color(pd.mean_predictions[i])); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }34:Tb75,function two_way_size_by_prediction(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleDiverging() .domain([pd.interaction_min, 0, pd.interaction_max]) .nice() .interpolator(d3.interpolateBrBG) const maxRectWidth = x(xDiff) - x(0); const maxRectHeight = y(0) - y(yDiff); const rectWidth = d3.scaleSqrt() .domain([pd.pdp_min, pd.pdp_max]) .range([0, maxRectWidth]); const rectHeight = d3.scaleSqrt() .domain([pd.pdp_min, pd.pdp_max]) .range([0, maxRectHeight]); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i]) - rectWidth(Math.abs(pd.mean_predictions[i])) / 2) .attr('y', i => y(pd.y_values[i]) - rectHeight(Math.abs(pd.mean_predictions[i])) / 2) .attr('width', i => rectWidth(Math.abs(pd.mean_predictions[i]))) .attr('height', i => rectHeight(Math.abs(pd.mean_predictions[i]))) .attr('fill', i => color(pd.interactions[i])); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }35:Tcb4,function two_way_squares_prediction(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleSequential() .domain([pd.pdp_min, pd.pdp_max]) .nice() .interpolator(d3.interpolateBlues) const maxRectWidth = x(xDiff) - x(0); const maxRectHeight = y(0) - y(yDiff); const rectWidth = d3.scaleSqrt() .domain([0, pd.interaction_max]) .range([0, maxRectWidth]); const rectHeight = d3.scaleSqrt() .domain([0, pd.interaction_max]) .range([0, maxRectHeight]); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i] - xDiff / 2)) .attr('y', i => y(pd.y_values[i] + yDiff / 2)) .attr('width', maxRectWidth) .attr('height', maxRectHeight) .attr('fill', i => color(pd.mean_predictions[i])); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i]) - rectWidth(Math.abs(pd.interactions[i])) / 2) .attr('y', i => y(pd.y_values[i]) - rectHeight(Math.abs(pd.interactions[i])) / 2) .attr('width', i => rectWidth(Math.abs(pd.interactions[i]))) .attr('height', i => rectHeight(Math.abs(pd.interactions[i]))) .attr('stroke', i => pd.interactions[i] < 0 ? 'orange' : 'green') .attr('fill', 'none'); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }36:Tc99,function two_way_squares_interaction(pd) { const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a)); const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a)); const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0] - (xDiff / 2), pd.x_axis[pd.x_axis.length - 1] + (xDiff / 2)]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.y_axis[0] - (yDiff / 2), pd.y_axis[pd.y_axis.length - 1] + (yDiff / 2)]) .range([height, 0]); const color = d3.scaleDiverging() .domain([pd.interaction_min, 0, pd.interaction_max]) .nice() .interpolator(d3.interpolateBrBG) const maxRectWidth = x(xDiff) - x(0); const maxRectHeight = y(0) - y(yDiff); const rectWidth = d3.scaleSqrt() .domain([0, pd.pdp_max]) .range([0, maxRectWidth]); const rectHeight = d3.scaleSqrt() .domain([0, pd.pdp_max]) .range([0, maxRectHeight]); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickValues(pd.y_axis.length < 13 ? pd.y_axis : y.ticks()) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i] - xDiff / 2)) .attr('y', i => y(pd.y_values[i] + yDiff / 2)) .attr('width', maxRectWidth) .attr('height', maxRectHeight) .attr('fill', i => color(pd.interactions[i])); g.append('g') .selectAll('rect') .data(I) .join('rect') .attr('x', i => x(pd.x_values[i]) - rectWidth(Math.abs(pd.mean_predictions[i])) / 2) .attr('y', i => y(pd.y_values[i]) - rectHeight(Math.abs(pd.mean_predictions[i])) / 2) .attr('width', i => rectWidth(Math.abs(pd.mean_predictions[i]))) .attr('height', i => rectHeight(Math.abs(pd.mean_predictions[i]))) .attr('stroke', 'black') .attr('fill', 'none'); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text(pd.y_feature); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width })); return svg.node(); }37:T94e,function lines(pd) { const margin = { top: 50, right: 20, bottom: 40, left: 50 }; const width = 400; const height = 400; const I = d3.range(pd.x_values.length); const x = d3.scaleLinear() .domain([pd.x_axis[0], pd.x_axis[pd.x_axis.length - 1]]) .range([0, width]); const y = d3.scaleLinear() .domain([pd.pdp_min, pd.pdp_max]) .range([height, 0]); const color = d3.scaleSequential() .domain([pd.y_axis[0], pd.y_axis[pd.y_axis.length - 1]]) .nice() .interpolator(d3.interpolateCividis); const xAxis = d3.axisBottom(x) .tickValues(pd.x_axis.length < 13 ? pd.x_axis : x.ticks()) .tickFormat(d3.format('~')); const yAxis = d3.axisLeft(y) .tickFormat(d3.format('~')); const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const lineData = d3.rollup( I, g => g.map(i => ({ x: pd.x_values[i], y: pd.mean_predictions[i], })), i => pd.y_values[i] ); const line = d3.line() .x(d => x(d.x)) .y(d => y(d.y)); g.append('g') .selectAll('path') .data(lineData) .join('path') .attr('stroke', ([series, values]) => color(series)) .attr('fill', 'none') .attr('d', ([series, values]) => line(values)); g.append('g') .attr('transform', `translate(0,${height})`) .call(xAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('x', width / 2) .attr('y', 25) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .text(pd.x_feature); g.append('g') .call(yAxis) .call(g => g.select('.domain').remove()) .append('text') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('transform', `translate(-40, ${height / 2}) rotate(270)`) .text('prediction'); g.append('g') .attr('transform', `translate(0, -55)`) .append(() => Legend(color, { width, title: pd.y_feature })); return svg.node(); }38:[{"id":"8ef0c5f0b68b68debf5c0184d57a49770e94857eeb55f521198df64039ae678a1ae37732f827a44439e9a7ab1579a8caa1f0d0691a218b0264c69be4dd4fedaa","href":"https://static.observableusercontent.com/files/8ef0c5f0b68b68debf5c0184d57a49770e94857eeb55f521198df64039ae678a1ae37732f827a44439e9a7ab1579a8caa1f0d0691a218b0264c69be4dd4fedaa","name":"bike@4.json","type":"application/json","lastModified":1679682799604.652,"size":4127398}] 2d:{"title":"Two-way PDP and Interaction Plots","cells":[{"id":0,"value":"# Two-way PDP and Interaction Plots","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = FileAttachment(\"bike@4.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"hr_workingday = data.two_way_pds.filter(d => d.id === 'hr_workingday')[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"days_since_2011_hr = data.two_way_pds.filter(d => d.id === 'days_since_2011_hr')[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"two_way(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"two_way_no_interaction(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"two_way_interaction(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"getPlotData(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"function getPlotData(pd) {\n const xDiff = d3.min(d3.pairs(pd.x_axis, (a, b) => b - a));\n const yDiff = d3.min(d3.pairs(pd.y_axis, (a, b) => b - a));\n \n return d3.zip(pd.x_values, pd.y_values, pd.mean_predictions, pd.interactions, pd.no_interactions)\n .map(\n ([x, y, prediction, interaction, no_interaction]) => ({\n x1: x - xDiff / 2,\n x2: x + xDiff / 2,\n y1: y - yDiff / 2,\n y2: y + yDiff / 2,\n prediction,\n interaction,\n no_interaction,\n x_feature: pd.x_feature,\n y_feature: pd.y_feature\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"Plot.plot({\n width: 400,\n height: 400,\n x: {\n ticks: hr_workingday.x_axis,\n },\n y: {\n ticks: hr_workingday.y_axis\n },\n color: {\n scheme: \"ylgnbu\",\n },\n marks: [\n Plot.rect(getPlotData(hr_workingday), {x1: \"x1\", y1: \"y1\", x2: \"x2\", y2: \"y2\", fill: \"prediction\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"import { Legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"two_way_border(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"two_way_border(days_since_2011_hr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"two_way_size_by_interaction(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"two_way_size_by_interaction(days_since_2011_hr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"two_way_size_by_prediction(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"two_way_size_by_prediction(days_since_2011_hr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"two_way_squares_prediction(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"two_way_squares_prediction(days_since_2011_hr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"two_way_squares_interaction(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"two_way_squares_interaction(days_since_2011_hr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"lines(days_since_2011_hr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"lines(hr_workingday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"linearData = d3.cross(d3.range(25), d3.range(25), (a, b) => ({ a, b, prediction: a + b}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"Plot.plot({\n width: 600,\n height: 600,\n color: {\n scheme: 'Blues',\n legend: true\n },\n y: {\n reverse: true\n },\n marks: [\n Plot.cell(linearData, {x: \"a\", y: \"b\", fill: \"prediction\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"Plot.plot({\n color: {\n scheme: 'Blues',\n legend: true\n },\n marks: [\n Plot.line(linearData, {x: \"a\", y: \"prediction\", z: \"b\", stroke: \"b\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}