2f:T9f4,function two_way(pd, title=null) { 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, title })); 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:T9f8,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:[{"id":"8ef0c5f0b68b68debf5c0184d57a49770e94857eeb55f521198df64039ae678a1ae37732f827a44439e9a7ab1579a8caa1f0d0691a218b0264c69be4dd4fedaa","href":"https://static.observableusercontent.com/files/8ef0c5f0b68b68debf5c0184d57a49770e94857eeb55f521198df64039ae678a1ae37732f827a44439e9a7ab1579a8caa1f0d0691a218b0264c69be4dd4fedaa","name":"bike-4.json","type":"application/json","lastModified":1680804419966.416,"size":4127398}] 2d:{"title":"PDPilot User Study Figures","cells":[{"id":0,"value":"# PDPilot User Study Figures","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = FileAttachment(\"bike-4.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"## One-way","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"hr = data.one_way_pds.filter(d => d.id === 'hr')[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"wd = data.one_way_pds.filter(d => d.id === 'workingday')[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"wd_values = wd.x_values","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"wd_pd = d3.zip(wd_values, wd['mean_predictions']).map(([x, y]) => ({ x, y }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"hr_values = hr.x_values","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"hr_ice_lines = hr.ice.ice_lines","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"pd = d3.zip(hr_values, hr['mean_predictions']).map(([x, y]) => ({ x, y }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"ice = hr_ice_lines.map((ice, i) => d3.zip(hr_values, ice).map(([x, y]) => ({ x, y, i }))).flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: {\n domain: [0, 23]\n },\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.line([], { x: 'x', y: 'y', z: 'i', stroke: 'rgb(171, 171, 171)' }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: {\n domain: [0, 23]\n },\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.dot(ice.filter(d => d.i < 1 && d.x < 1), { x: 'x', y: 'y', z: 'i', fill: 'rgb(171, 171, 171)', r: 5 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: {\n domain: [0, 23]\n },\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.dot(ice.filter(d => d.i < 1 && d.x < 2), { x: 'x', y: 'y', z: 'i', fill: 'rgb(171, 171, 171)', r: 5 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: {\n domain: [0, 23]\n },\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.dot(ice.filter(d => d.i < 1), { x: 'x', y: 'y', z: 'i', fill: 'rgb(171, 171, 171)', r: 5 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: {\n domain: [0, 23]\n },\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.line(ice.filter(d => d.i < 1), { x: 'x', y: 'y', z: 'i', stroke: 'rgb(171, 171, 171)' }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"Plot.plot({\n height: 500,\n width: 800,\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.line(ice.filter(d => d.i < 10), { x: 'x', y: 'y', z: 'i', stroke: 'rgb(171, 171, 171)' }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"Plot.plot({\n height: 500,\n width: 800,\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.line(ice, { x: 'x', y: 'y', z: 'i', stroke: 'rgb(171, 171, 171)', strokeOpacity: 0.15, strokeWidth: 0.5 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"Plot.plot({\n height: 500,\n width: 800,\n y: {\n domain: [0, 1000],\n },\n marks: [\n Plot.line(ice, { x: 'x', y: 'y', z: 'i', stroke: 'rgb(171, 171, 171)', strokeOpacity: 0.15, strokeWidth: 0.5 }),\n Plot.line(pd, { x: 'x', y: 'y', stroke: 'black', strokeWidth: 2 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"Plot.plot({\n height: 500,\n width: 800,\n y: {\n domain: [0, 500],\n },\n marks: [\n Plot.line(pd, { x: 'x', y: 'y', stroke: 'black', strokeWidth: 2 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"hour\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"Plot.plot({\n height: 500,\n width: 800,\n x: {\n type: 'point'\n },\n y: {\n domain: [0, 500],\n },\n marks: [\n Plot.line(wd_pd, { x: 'x', y: 'y', stroke: 'black', strokeWidth: 2 }),\n Plot.dot(wd_pd, { x: 'x', y: 'y', fill: 'black', r: 3 }),\n\n Plot.axisX({anchor: \"bottom\", label: \"workingday\", labelAnchor: \"center\", marginLeft: 50}),\n Plot.axisY({anchor: \"left\", label: \"bikes rented\", labelAnchor: \"center\", marginBottom: 35}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"## Two-way","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"hr_workingday = data.two_way_pds.filter(d => d.id === 'hr_workingday')[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"temp_hum = data.two_way_pds.filter(d => d.id === 'hum_temp')[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"import { Legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"two_way(hr_workingday)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"two_way_no_interaction(hr_workingday)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"two_way_interaction(hr_workingday)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}