2d:null 2e:["$","title",null,{"children":"Urban Accessibility-v1 | leonardo Nicoletti | Observable"}] 33:T3c2e,chart0 = { const grid = d3.select(DOM.svg(width*5, height*2.15)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) const svg2 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width-10}, ${0})`) const svg3 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width*2-20}, ${0})`) const svg4 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width*3-30}, ${0})`) const svg5 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width*4-40}, ${0})`) // const svg6 = grid // .append("g") // // .attr("viewBox", [0, -height, width*2, height*2]) // .style("overflow", "visible") // .attr('transform', `translate(${width*5}, ${0})`) const svg6 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${0}, ${height+10})`) const svg7 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width-10}, ${height+10})`) const svg8 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width*2-20}, ${height+10})`) const svg9 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width*3-30}, ${height+10})`) const svg10 = grid .append("g") // .attr("viewBox", [0, -height, width*2, height*2]) .style("overflow", "visible") .attr('transform', `translate(${width*4-40}, ${height+10})`) var symbol = d3.symbol().size(12); svg9.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Seattle').attr("fill", "steelblue").style("font", "16px Georgia") svg.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Chicago').attr("fill", "purple").style("font", "16px Georgia") svg7.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Vancouver').attr("fill", "orange").style("font", "16px Georgia") svg8.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Miami').attr("fill", "green").style("font", "16px Georgia") svg3.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('San Francisco').attr("fill", "brown").style("font", "16px Georgia") svg6.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Philadelphia').attr("fill", "lightblue").style("font", "16px Georgia") svg4.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Los Angeles').attr("fill", "red").style("font", "16px Georgia") svg2.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Montreal').attr("fill", "black").style("font", "16px Georgia") svg10.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('Houston').attr("fill", "grey").style("font", "16px Georgia") svg5.append('text').attr('x',xScale(0)).attr('y',12).attr('class', 'cityAnnot').text('New York City').attr("fill", "#0cc795").style("font", "16px Georgia") // svg10.append('text').attr('x',xScale(0)).attr('y',10).attr('class', 'cityAnnot').text('Toronto') // legend svg.append('text') .attr('x',xScale(0.6)) .attr('y',yScaleP(0.2)) .text('A (accessibility)') // .attr('font-weight', "bold") .attr('class', 'legendAnnot') svg.append('text') .attr('x',xScale(0.6)) .attr('y',yScaleP(0.1)) .text('P (population)') // .attr('font-weight', "bold") .attr('class', 'legendAnnot') grid.append("g").selectAll("circle") .data([{x:0.55, y:0.215}]) .join('circle') .attr('cx',d=>xScale(+d.x)) .attr('cy',d=>yScaleP(+d.y)) .attr("r", 2) .attr("fill", "purple") grid.append("g").selectAll(".dots") .data([{x:0.55, y:0.115}]) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','purple') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.x)+","+yScaleP(+d.y)+")"; }); // plots svg9 .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxis); const SE = getRandomSubarray(cities.filter(d=> (d.city==="Seattle")), 500) const lineA9 = svg9 .selectAll("circle") .data(SE) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "steelblue") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP9 = svg9.selectAll(".dots") .data(SE) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','steelblue') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg // .append("g") // .attr("class", "x-axis") // .attr('class', 'Axis') // .call(xAxis) // .call(g => g.select(".tick:last-of-type text").clone() // .attr("x", 3) // .attr("text-anchor", "start") // .attr("font-weight", "bold") // .text("log(a)")); svg .append("g") .attr("class", "y-axis") .attr('class', 'Axis') .call(yAxisP) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("log(cdf)")) // svg2 // svg2 // .append("g") // .attr("class", "x-axis") // .attr('class', 'Axis') // .call(xAxis); // svg2 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const CHI = getRandomSubarray(cities.filter(d=> (d.city==="Chicago")), 500) const lineA = svg .selectAll("circle") .data(CHI) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "purple") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP = svg.selectAll(".dots") .data(CHI) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','purple') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg3 svg7 .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxis); // svg3 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const CV = getRandomSubarray(cities.filter(d=> (d.city==="Vancouver")), 500) const lineA7 = svg7 .selectAll("circle") .data(CV) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "orange") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP7 = svg7.selectAll(".dots") .data(CV) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','orange') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 svg8 .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxis); // svg4 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const MIAMI = cities.filter(d=> (d.city==="Miami")) const lineA8 = svg8 .selectAll("circle") .data(MIAMI) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "green") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP8 = svg8.selectAll(".dots") .data(MIAMI) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','green') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 // svg3 // .append("g") // .attr("class", "x-axis") // .attr('class', 'Axis') // .call(xAxis); // svg5 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const SF = cities.filter(d=> (d.city==="San Francisco")) const lineA3 = svg3 .selectAll("circle") .data(SF) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "brown") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP3 = svg3.selectAll(".dots") .data(SF) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','brown') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 svg6 .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxis) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 7) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("A"));; svg6 .append("g") .attr("class", "y-axis") .attr('class', 'Axis') .call(yAxisP) const PHILLY = getRandomSubarray(cities.filter(d=> (d.city==="Philadelphia")), 500) const lineA6 = svg6 .selectAll("circle") .data(PHILLY) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "lightblue") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP6 = svg6.selectAll(".dots") .data(PHILLY) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','lightblue') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 // svg4 // .append("g") // .attr("class", "x-axis") // .attr('class', 'Axis') // .call(xAxis); // svg7 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const LA = getRandomSubarray(cities.filter(d=> (d.city==="Los Angeles")), 500) const lineA4 = svg4 .selectAll("circle") .data(LA) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "red") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP4 = svg4.selectAll(".dots") .data(LA) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','red') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 // svg2 // .append("g") // .attr("class", "x-axis") // .attr('class', 'Axis') // .call(xAxis); // svg8 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const CM = getRandomSubarray(cities.filter(d=> (d.city==="Montreal")), 500) const lineA2 = svg2 .selectAll("circle") .data(CM) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "black") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP2 = svg2.selectAll(".dots") .data(CM) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','black') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 svg10 .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxis); // svg9 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const HOUST = getRandomSubarray(cities.filter(d=> (d.city==="Houston")), 500) const lineA10 = svg10 .selectAll("circle") .data(HOUST) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "grey") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP10 = svg10.selectAll(".dots") .data(HOUST) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','grey') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg4 // svg5 // .append("g") // .attr("class", "x-axis") // .attr('class', 'Axis') // .call(xAxis); // svg10 // .append("g") // .attr("class", "y-axis") // .attr('class', 'Axis') // .call(yAxisP) const NYC = getRandomSubarray(cities.filter(d=> (d.city==="New York City")), 500) const lineA5 = svg5 .selectAll("circle") .data(NYC) .join("circle") .attr("cx", d => xScale(+d.a_log)) .attr("cy", d => yScaleA(+d.ccdfa_log)) .attr("r", 1) .attr("fill", "#0cc795") .attr("stroke", "none") .style('fill-opacity',0.3) const lineP5 = svg5.selectAll(".dots") .data(NYC) .join("path") .attr("d", symbol.type((d)=> d3.symbolTriangle)) .attr("fill", "none") .attr('stroke','#0cc795') .attr('stroke-width',0.3) .style('opacity',0.8) .attr('transform',function(d){ return "translate("+xScale(+d.a_log)+","+yScaleP(+d.ccdfp_log)+")"; }); // svg10 // .selectAll("circle") // .data(cities.filter(d=> (d.city==="Toronto"))) // &(d.accessibil_sc>0.01)&(d.ccdf>0.01) // .join("circle") // .attr("cx", d => xScale(+d.a_log)) // .attr("cy", d => yScaleP(+d.ccdfp_log)) // .style('fill-opacity',0.2) // .attr("r", 2) // .attr('fill','violet') return grid.node(); }34:T594,md`#### Key Messages: Fig 1 and 4 together - In most cities accessibility is distributed heterogenously across space and population - In figure 2A, each dot or triangle represents a spatial unit. On the y-axis the dotted line represents the log of the cumulative density of accessibility, and the triangle symbol line represents the log of the cumulative density of population. The x-axis represents the accessibility score A. - The dotted lines in fig 2A show that, for each city, there is a large number of spatial units with low accessibility scores and a few spatial units with higher accessibility scores. - The line made up of triangle symbols, however, paints a different picture. When it is closely aligned with the dotted line, it shows that there is a large share of the population that benefits from low accessibility scores and a small share of the population that benefits from higher accessibility scores. Houston and Seattle are extreme examples of such cases. In those cities, accessibility is a benefit for few people. - Fig 2B illustrates this metric for every city within our study. It shows that, in cities where curves are heavily shifted to the right and which start to ressemble a sigmoid curve, there is a larger share of people that benefits from higher accessibility scores, and the share of people with smaller accessibility scores is smaller. Cities like Zurich, for example, exhibit this pattern.`35:T170c,chart3 = { const grid = d3.select(DOM.svg(widthSingle+50, heightSingle)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) // Annotations // svg.append('text') // .attr('x',xScaleSingle(0.4)) // .attr('y',yScalePsingle(0.6)) // .text('10 Case Cities') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "orange") // svg.append('text') // .attr('x',xScaleSingle(0.8)) // .attr('y',yScalePsingle(0.8)) // .text('44 world cities') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "grey") // svg.append('text') // .attr('x',xScaleWide(new Date(2020,2,8))) // .attr('y',yScale(-80)) // .text('Paris') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', cityColors("Paris")) // svg1 svg .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxisSingle) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 7) .text("log(rank(A))") .attr("class", "yAxisAnnot") );; svg .append("g") .attr("class", "y-axis") .attr('class', 'Axis') .call(yAxisPsingle) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .html("A") .attr("class", "yAxisAnnot") ); // svg.append('line') // .attr('x1',0+margin.left) // .attr('x2',widthWide-margin.right) // .attr('y1',yScale(0)) // .attr('y2',yScale(0)) // .attr('stroke','grey') // .attr('stroke-width', '0.5') // .style("stroke-dasharray", ("2, 2")) // .style("opacity", 0.5); // const line = svg // .selectAll('circle') // .data(cityAccessR.filter(d=>d.code==="Zurich")) // .join('circle') // .attr("cx", d => xScaleSingle(d.access.a_log)) // .attr("cy", d => yScalePsingle(d.access.ccdfp_log)) // // .attr("cx", d => xScaleSingle(d.access.a_log)) // // .attr("cy", d => yScalePsingle(d.access.ccdfp_log)) // .attr("r", 2) // // .attr("fill", "steelblue") // // .style('fill-opacity',0.5) // .attr("fill", "grey") // .attr("stroke", "none") // .attr("stroke-width", "0.05") // .style('fill-opacity',0.5) const lineGrey = svg .selectAll('.circlenhl') .data(getRandomSubarray(cities.filter(d=>(d.city !== "Vancouver")|(d.city !== "Montreal")| (d.city !== "Toronto")|(d.city !== "Chicago")| (d.city === "New York City")|(d.city !== "Los Angeles")| (d.city !== "Seattle")|(d.city === "Philadelphia")| (d.city !== "Miami")|(d.city !== "San Francisco")|(d.city !== "Houston")), 100000)) .join('circle') .attr("cx", d => xScaleSingle(d.rank_a_log)) .attr("cy", d => yScalePsingle(d.a_log)) .style("r", 1) .attr('fill', 'lightgrey') .style("fill-opacity", 0.5) const line = svg .selectAll('.circlehl') .data(getRandomSubarray(cities.filter(d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")|(d.city === "Houston")), 10000)) .join('circle') .attr("cx", d => xScaleSingle(d.rank_a_log)) .attr("cy", d => yScalePsingle(d.a_log)) .style("r", 2) .attr('fill', d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": (d.city === "Houston")?"grey":'lightgrey') .style("fill-opacity", 1) svg.append('text').attr('x',xScaleSingle(0.3)).attr('y',yScalePsingle(0.8)).text('Houston').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleSingle(0.5)).attr('y',yScalePsingle(0.74)).text('Seattle').attr('class', 'cityAnnot').style('fill', "steelblue") svg.append('text').attr('x',xScaleSingle(0.45)).attr('y',yScalePsingle(0.9)).text('Montreal').attr('class', 'cityAnnot').style('fill', "black") svg.append('text').attr('x',xScaleSingle(0.92)).attr('y',yScalePsingle(0.5)).text('Chicago').attr('class', 'cityAnnot').style('fill', "purple") svg.append('text').attr('x',xScaleSingle(0.55)).attr('y',yScalePsingle(0.6)).text('Vancouver').attr('class', 'cityAnnot').style('fill', "orange") svg.append('text').attr('x',xScaleSingle(0.77)).attr('y',yScalePsingle(0.55)).text('LA').attr('class', 'cityAnnot').style('fill', "red") svg.append('text').attr('x',xScaleSingle(0.23)).attr('y',yScalePsingle(0.865)).text('Philadelphia').attr('class', 'cityAnnot').style('fill', "lightblue") svg.append('text').attr('x',xScaleSingle(0.865)).attr('y',yScalePsingle(0.43)).text('NYC').attr('class', 'cityAnnot').style('fill', "#0cc795") svg.append('text').attr('x',xScaleSingle(0.8)).attr('y',yScalePsingle(0.6)).text('SF').attr('class', 'cityAnnot').style('fill', "brown") svg.append('text').attr('x',xScaleSingle(0.8)).attr('y',yScalePsingle(0.37)).text('Miami').attr('class', 'cityAnnot').style('fill', "green") return grid.node(); }36:T136c,chart2 = { const grid = d3.select(DOM.svg(widthSingle+20, heightSingle)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) // // Annotations // svg.append('text') // .attr('x',xScaleSingle(0.4)) // .attr('y',yScalePsingle(0.6)) // .text('10 Case Cities') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "orange") // svg.append('text') // .attr('x',xScaleSingle(0.1)) // .attr('y',yScalePsingle(0.9)) // .text('44 world cities') // .attr('font-weight', "bold") // .attr('class', 'cityAnnot') // .style('fill', "grey") // svg1 svg .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxisSingle) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 7) // .text("log(P)") .text("A") .attr("class", "yAxisAnnot") );; svg .append("g") .attr("class", "y-axis") .attr('class', 'Axis') .call(yAxisPsingle) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) // .text("log(A)") .text("log(cdf(P))") .attr("class", "yAxisAnnot") ); const line = svg .selectAll('circle') .data(getRandomSubarray(cities, 100000)) .join('circle') .attr("cx", d => xScaleSingle(d.a_log)) .attr("cy", d => yScalePsingle(d.ccdfp_log)) .style("r", d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")? 2:1) // .attr('fill',d=>(d.city === "Vancouver")|(d.city === "Montreal")| // (d.city === "Toronto")|(d.city === "Chicago")| // (d.city === "New York City")|(d.city === "Los Angeles")| // (d.city === "Seattle")|(d.city === "Philadelphia")| // (d.city === "Miami")|(d.city === "San Francisco")? 'orange':'lightgrey') .attr('fill', d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": (d.city === "Houston")?"grey":'lightgrey') .style("fill-opacity", d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")|(d.city === "Houston")? 1:0.5) svg.append('text').attr('x',xScaleSingle(0.15)).attr('y',yScalePsingle(0.9)).text('Houston').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleSingle(0.19)).attr('y',yScalePsingle(0.82)).text('Seattle').attr('class', 'cityAnnot').style('fill', "steelblue") svg.append('text').attr('x',xScaleSingle(0.5)).attr('y',yScalePsingle(0.9)).text('Montreal').attr('class', 'cityAnnot').style('fill', "black") svg.append('text').attr('x',xScaleSingle(0.28)).attr('y',yScalePsingle(0.62)).text('Chicago').attr('class', 'cityAnnot').style('fill', "purple") svg.append('text').attr('x',xScaleSingle(0.2)).attr('y',yScalePsingle(0.45)).text('Vancouver').attr('class', 'cityAnnot').style('fill', "orange") svg.append('text').attr('x',xScaleSingle(0.12)).attr('y',yScalePsingle(0.5)).text('LA').attr('class', 'cityAnnot').style('fill', "red") svg.append('text').attr('x',xScaleSingle(0.07)).attr('y',yScalePsingle(0.07)).text('Philadelphia').attr('class', 'cityAnnot').style('fill', "lightblue") svg.append('text').attr('x',xScaleSingle(0.04)).attr('y',yScalePsingle(0.5)).text('NYC').attr('class', 'cityAnnot').style('fill', "#0cc795") svg.append('text').attr('x',xScaleSingle(0.35)).attr('y',yScalePsingle(0.81)).text('SF').attr('class', 'cityAnnot').style('fill', "brown") svg.append('text').attr('x',xScaleSingle(0.15)).attr('y',yScalePsingle(0.57)).text('Miami').attr('class', 'cityAnnot').style('fill', "green") svg.append('text').attr('x',xScaleSingle(0.31)).attr('y',yScalePsingle(0.5)).text('Zurich').attr('class', 'cityAnnot').style('fill', "lightgrey") return grid.node(); }37:T462,viewof metric = { const form = html``; form.onchange = () => form.dispatchEvent(new CustomEvent("input")); // Safari form.oninput = () => form.value = form.radio.value; form.value = form.radio.value; return form; }38:Te67,chart4 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width+10, height]); svg.append("g") // .attr("stroke", "#ccc") .attr("stroke-width", 0.4) .selectAll("line") .data(data) .join("line") .attr("stroke", d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": (d.city === "Houston")?"grey":'lightgrey') .attr("x1", xLP(0)) // .attr("x1", (metric === "absolute")|(metric === "relative") ? xLP(0): // metric === "AUCA" ? xLP(d3.extent(data, d => +d.areas_A)[0]):xLP(d3.extent(data, d => +d.areas_P)[0])) .attr("x2", d => metric === "absolute" ? xLP(+d.areas_AP): metric === "relative" ? xLP(+d.areas_AP /+d.areas_P ): metric === "AUCA" ? xLP(+d.areas_A):xLP(+d.areas_P)) .attr("y1", (d, i) => yLP(i)) .attr("y2", (d, i) => yLP(i)); svg.append("g") .call(xAxisLP); svg.append("g") .call(yAxisLP); svg.append("g") .selectAll("circle") .data(data) .join("circle") // .attr("fill", d => d3.schemeSet1[+d.areas_AP > 0 ? 1 : 0]) .attr("fill", d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": (d.city === "Houston")?"grey":'lightgrey') .attr("cx", d => metric === "absolute" ? xLP(+d.areas_AP): metric === "relative" ? xLP(+d.areas_AP /+d.areas_A ): metric === "AUCA" ? xLP(+d.areas_A):xLP(+d.areas_P)) .attr("cy", (d, i) => yLP(i)) .attr("r", 1.5); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 2.5) .selectAll("text") .data(data) .join("text") .attr("text-anchor", d => +d.areas_AP < 0 ? "end" : "start") // .attr("x", d => metric === "absolute" ? xLP(+d.areas_AP) + Math.sign(+d.areas_AP - 0) * 4 :xLP(+d.areas_AP /+d.areas_A )+ Math.sign(+d.areas_AP - 0) * 4) .attr("x", d => metric === "absolute" ? xLP(+d.areas_AP)+ Math.sign(+d.areas_AP - 0) * 4 : metric === "relative" ? xLP(+d.areas_AP /+d.areas_P )+ Math.sign(+d.areas_AP - 0) * 4 : metric === "AUCA" ? xLP(+d.areas_A)+ Math.sign(+d.areas_AP - 0) * 4 : xLP(+d.areas_P)+ Math.sign(+d.areas_AP - 0) * 4) .attr("y", (d, i) => yLP(i) + yLP.bandwidth() / 2) .attr("dy", "0.35em") .text(d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")|(d.city === "Houston")? format(+d.areas_AP):""); return svg.node(); }39:T1d0f,chart6 = { const grid = d3.select(DOM.svg(widthSingle+150, heightSingle)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxisAreaA) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 7) // .text("log(P)") .text("Area Under CDF of Accessibility") .attr("class", "yAxisAnnot") );; svg .append("g") .attr("class", "y-axis") .attr('class', 'Axis') .call(yAxisAreaP) svg.append('line') .attr('x1',xScaleAreaA((d3.max(data, d=>+d.areas_A)+d3.min(data, d=>+d.areas_A))/2)) .attr('x2',xScaleAreaA((d3.max(data, d=>+d.areas_A)+d3.min(data, d=>+d.areas_A))/2)) .attr('y1',yScaleAreaP(0.66)) .attr('y2',yScaleAreaP(0.94)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('line') .attr('x1',xScaleAreaA(0.71)) .attr('x2',xScaleAreaA(0.83)) .attr('y1',yScaleAreaP((d3.max(data, d=>+d.areas_P)+d3.min(data, d=>+d.areas_P))/2)) .attr('y2',yScaleAreaP((d3.max(data, d=>+d.areas_P)+d3.min(data, d=>+d.areas_P))/2)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); // quadrants svg.append('text').attr('x',xScaleAreaA(0.832)).attr('y',yScaleAreaP(0.94)).text('Q1: Few Blocks with Low Access - Many People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleAreaA(0.885)).attr('y',yScaleAreaP(0.94)).text('Q2: Many Blocks with Low Access - Many People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleAreaA(0.832)).attr('y',yScaleAreaP(0.67)).text('Q3: Few Blocks with Low Access - Few People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleAreaA(0.885)).attr('y',yScaleAreaP(0.67)).text('Q4: Many Blocks with Low Access - Few People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") const circles = svg .selectAll('circle') .data(data) const dots = circles.join('circle') .attr("cx", d => xScaleAreaA(d.areas_A)) .attr("cy", d => yScaleAreaP(d.areas_P)) .style("r", d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")|(d.city === "Houston")? 5:2.5) // .attr('fill',d=>(d.city === "Vancouver")|(d.city === "Montreal")| // (d.city === "Toronto")|(d.city === "Chicago")| // (d.city === "New York City")|(d.city === "Los Angeles")| // (d.city === "Seattle")|(d.city === "Philadelphia")| // (d.city === "Miami")|(d.city === "San Francisco")? 'orange':'lightgrey') .attr('fill', d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": // (d.city === "Zurich")?"blue": (d.city === "Houston")?"grey":'lightgrey') .style("fill-opacity", d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")|(d.city === "Houston")? 1:1) const text = circles.join('text') .attr("x", d =>(d.city === "Montreal")|(d.city === "Montreal")? xScaleAreaA(d.areas_A)-55: (d.city === "Los Angeles")? xScaleAreaA(d.areas_A)-75: xScaleAreaA(d.areas_A)+8) .attr("y", d => yScaleAreaP(d.areas_P)) .attr('class', 'cityAnnot') .attr('fill', d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": (d.city === "Houston")?"grey":'lightgrey') .text(d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")| (d.city === "Houston")|(d.city === "Sydney")| (d.city === "Milan")|(d.city === "Zurich")|(d.city === "Buenos Aires")|(d.city === "Amsterdam")?d.city:"") // svg.append('text').attr('x',xScaleSingle(0.15)).attr('y',yScalePsingle(0.9)).text('Houston').attr('class', 'cityAnnot').style('fill', "grey") // svg.append('text').attr('x',xScaleSingle(0.19)).attr('y',yScalePsingle(0.82)).text('Seattle').attr('class', 'cityAnnot').style('fill', "steelblue") // svg.append('text').attr('x',xScaleSingle(0.5)).attr('y',yScalePsingle(0.9)).text('Montreal').attr('class', 'cityAnnot').style('fill', "black") // svg.append('text').attr('x',xScaleSingle(0.28)).attr('y',yScalePsingle(0.62)).text('Chicago').attr('class', 'cityAnnot').style('fill', "purple") // svg.append('text').attr('x',xScaleSingle(0.2)).attr('y',yScalePsingle(0.45)).text('Vancouver').attr('class', 'cityAnnot').style('fill', "orange") // svg.append('text').attr('x',xScaleSingle(0.12)).attr('y',yScalePsingle(0.5)).text('LA').attr('class', 'cityAnnot').style('fill', "red") // svg.append('text').attr('x',xScaleSingle(0.07)).attr('y',yScalePsingle(0.07)).text('Philadelphia').attr('class', 'cityAnnot').style('fill', "lightblue") // svg.append('text').attr('x',xScaleSingle(0.04)).attr('y',yScalePsingle(0.5)).text('NYC').attr('class', 'cityAnnot').style('fill', "#0cc795") // svg.append('text').attr('x',xScaleSingle(0.35)).attr('y',yScalePsingle(0.81)).text('SF').attr('class', 'cityAnnot').style('fill', "brown") // svg.append('text').attr('x',xScaleSingle(0.15)).attr('y',yScalePsingle(0.57)).text('Miami').attr('class', 'cityAnnot').style('fill', "green") return grid.node(); } 3a:T1e88,chart7 = { const norm_data = auc.map(function(d) {return { city: d.city, // areas_A: +d.areas_A, // areas_P: +d.areas_P, // areas_AP: +d.areas_AP, areas_A_norm: normScaleA(+d.areas_A), areas_P_norm: normScaleP(+d.areas_P) }}) const grid = d3.select(DOM.svg(widthSingle+150, heightSingle)); const svg = grid .append("g") // .attr("viewBox", [0, 0, width*2, height*2]) .style("overflow", "visible") // .attr('transform', `translate(${width}, ${height})`) // svg1 svg .append("g") .attr("class", "x-axis") .attr('class', 'Axis') .call(xAxisAreaAnorm) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 7) // .text("log(P)") .text("Area Under CDF of Accessibility") .attr("class", "yAxisAnnot") );; svg .append("g") .attr("class", "y-axis") .attr('class', 'Axis') .call(yAxisAreaPnorm) svg.append('line') .attr('x1',xScaleAreaAnorm(0.5)) .attr('x2',xScaleAreaAnorm(0.5)) .attr('y1',yScaleAreaPnorm(0)) .attr('y2',yScaleAreaPnorm(0.98)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); svg.append('line') .attr('x1',xScaleAreaAnorm(0)) .attr('x2',xScaleAreaAnorm(0.98)) .attr('y1',yScaleAreaPnorm(0.5)) .attr('y2',yScaleAreaPnorm(0.5)) .attr('stroke','grey') .attr('stroke-width', '0.5') .style("stroke-dasharray", ("2, 2")) .style("opacity", 0.5); // quadrants svg.append('text').attr('x',xScaleAreaAnorm(0.01)).attr('y',yScaleAreaPnorm(0.96)).text('Q1: Few Blocks with Low Access - Many People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleAreaAnorm(0.51)).attr('y',yScaleAreaPnorm(0.96)).text('Q2: Many Blocks with Low Access - Many People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleAreaAnorm(0.01)).attr('y',yScaleAreaPnorm(0.04)).text('Q3: Few Blocks with Low Access - Few People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") svg.append('text').attr('x',xScaleAreaAnorm(0.51)).attr('y',yScaleAreaPnorm(0.04)).text('Q4: Many Blocks with Low Access - Few People with Low Access').attr('class', 'cityAnnot').style('fill', "grey") const circles = svg .selectAll('circle') .data(norm_data) const dots = circles.join('circle') .attr("cx", d => xScaleAreaAnorm(d.areas_A_norm)) .attr("cy", d => yScaleAreaPnorm(d.areas_P_norm)) .style("r", d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")| (d.city === "Houston")|(d.city === "Sydney")| (d.city === "Milan")|(d.city === "Zurich")|(d.city === "Buenos Aires")? 5:2.5) // .attr('fill',d=>(d.city === "Vancouver")|(d.city === "Montreal")| // (d.city === "Toronto")|(d.city === "Chicago")| // (d.city === "New York City")|(d.city === "Los Angeles")| // (d.city === "Seattle")|(d.city === "Philadelphia")| // (d.city === "Miami")|(d.city === "San Francisco")? 'orange':'lightgrey') .attr('fill', d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": // (d.city === "Zurich")?"blue": (d.city === "Houston")?"grey":'lightgrey') .style("fill-opacity", d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")|(d.city === "Houston")? 1:1) const text = circles.join('text') .attr("x", d =>(d.city === "Montreal")? xScaleAreaAnorm(d.areas_A_norm)-55: (d.city === "Los Angeles")?xScaleAreaAnorm(d.areas_A_norm)-75: (d.city === "San Francisco")?xScaleAreaAnorm(d.areas_A_norm)-83: xScaleAreaAnorm(d.areas_A_norm)+8) .attr("y", d => yScaleAreaPnorm(d.areas_P_norm)) .attr('class', 'cityAnnot') .attr('fill', d=>(d.city === "Vancouver")?"orange": (d.city === "Montreal")?"black": (d.city === "Toronto")?"": (d.city === "Chicago")?"purple": (d.city === "New York City")?"#0cc795": (d.city === "Los Angeles")?"red": (d.city === "Seattle")?"steelblue": (d.city === "Philadelphia")?"lightblue": (d.city === "Miami")?"green": (d.city === "San Francisco")?"brown": (d.city === "Houston")?"grey":'lightgrey') .text(d=>(d.city === "Vancouver")|(d.city === "Montreal")| (d.city === "Toronto")|(d.city === "Chicago")| (d.city === "New York City")|(d.city === "Los Angeles")| (d.city === "Seattle")|(d.city === "Philadelphia")| (d.city === "Miami")|(d.city === "San Francisco")| (d.city === "Houston")|(d.city === "Sydney")| (d.city === "Milan")|(d.city === "Zurich")|(d.city === "Buenos Aires")|(d.city === "Amsterdam")?d.city:"") // svg.append('text').attr('x',xScaleSingle(0.15)).attr('y',yScalePsingle(0.9)).text('Houston').attr('class', 'cityAnnot').style('fill', "grey") // svg.append('text').attr('x',xScaleSingle(0.19)).attr('y',yScalePsingle(0.82)).text('Seattle').attr('class', 'cityAnnot').style('fill', "steelblue") // svg.append('text').attr('x',xScaleSingle(0.5)).attr('y',yScalePsingle(0.9)).text('Montreal').attr('class', 'cityAnnot').style('fill', "black") // svg.append('text').attr('x',xScaleSingle(0.28)).attr('y',yScalePsingle(0.62)).text('Chicago').attr('class', 'cityAnnot').style('fill', "purple") // svg.append('text').attr('x',xScaleSingle(0.2)).attr('y',yScalePsingle(0.45)).text('Vancouver').attr('class', 'cityAnnot').style('fill', "orange") // svg.append('text').attr('x',xScaleSingle(0.12)).attr('y',yScalePsingle(0.5)).text('LA').attr('class', 'cityAnnot').style('fill', "red") // svg.append('text').attr('x',xScaleSingle(0.07)).attr('y',yScalePsingle(0.07)).text('Philadelphia').attr('class', 'cityAnnot').style('fill', "lightblue") // svg.append('text').attr('x',xScaleSingle(0.04)).attr('y',yScalePsingle(0.5)).text('NYC').attr('class', 'cityAnnot').style('fill', "#0cc795") // svg.append('text').attr('x',xScaleSingle(0.35)).attr('y',yScalePsingle(0.81)).text('SF').attr('class', 'cityAnnot').style('fill', "brown") // svg.append('text').attr('x',xScaleSingle(0.15)).attr('y',yScalePsingle(0.57)).text('Miami').attr('class', 'cityAnnot').style('fill', "green") return grid.node(); } 3b:T54c,md`#### Key Messages: Fig 5 and 6 - These two linear relationships - cdf of accessibility with accessibility and cdf of population with accessibility - can also be illustrated in a scatter plot, as presented by figure 3A. In this figure, we plot each city's area under its cdf of accessibility (normalized) on the x-axis and area under cdf of population (normalized) on the y-axis. We are left with four quadrants, each representing a unique scenario. - Cities that fall in the top left quadrant (Q1) represent the most undesirable scenario: where a large number of spatial units has high accessibility scores but the majority of the population is concentrated in spatial units of low accessibility. This scenario is highly unlikely, hence the scarcity of points within this quadrant. - Cities that fall in the top right quadrant (Q2) also represent an undesirable scenario: where a large number of spatial units has low accessibility scores and the majority of the population is concentrated in spatial units of low accessibility. This scenario is very common, as many cities fall within this quadrant. It makes sense that cities like Los Angeles, Houston, or Seattle, where a majority of the urban area is characterised by low-density suburban built form, find themselves in this quadrant. - Cities that fall in two bottom quadrants (Q3 and Q4) both re.`3c:T509,md`##### Notes from dad: 1) hypothetical reasoning: - Zipf's explain: - Powerlaw: given that we know that this is a universal law(zipfs), what is the worst we can observe? Use that as a benchmark? --> rank cities based on how well they can differentiate from worst case --> OR, another way would be to find Zipf's law that makes 50% of blocks in at 0.5 access -powerlawpop: if goal of public policy is to maximize the access for the largest share of the population in a city, then we would expect that accessibility is distributed across population as a sigma. --> draw a theoretical/ideal sigma function on plot: propose that a realistic policy goal were at least 50% of the population has a level of accessibility that is the median level (0.5, --> inflection is at 0.5/0.5) ---> BENCHMARK (https://scipy-cookbook.readthedocs.io/items/Matplotlib_SigmoidalFunctions.html) ---> metric is: how far you are from the benchmark! - think about reasons why discrepancy in pop/access - 1) Cultural (american suburbia) (Segregation (de facto)) - 3) Discriminatory (segregation (de jure)) - geographical limitation - zoning laws/restrictions --> scatter: x = measure of average distance from theoretical sigma, y = average rent/elasticity of housing supply/cultural diversity etc.`3d:T20fb,function showKdes(div) { // Filter city of interest const citiesG = d3.nest() .key(function(d) { return d.city; }) .entries(citiesNA); // console.log(citiesG) // // filter for paper // cities = cities.filter(d=>(d.key === "Paris")|(d.key === "Tokyo")|(d.key === "Bogota")| // (d.key === "Taipei")|(d.key === "Sydney")|(d.key === "Istanbul")| // (d.key === "Nairobi")|(d.key === "Ho Chi Minh")|(d.key === "Houston")) // d3.select("#charts").selectAll("svg").remove() // append the svg object to the body of the page const svg = d3.select(div).selectAll("svg") .data(citiesG) .enter().append("svg") .attr("width", widthSM + marginSM.left) .attr("height", heightSM + marginSM.top + marginSM.bottom) .append("g") .attr("transform", "translate(" + marginSM.left + "," + marginSM.top + ")") var symbol = d3.symbol().size(12); // add the x Axis // maxAccess = d3.max(access) const x = d3.scaleLinear() .domain([0, 1]) .range([0, widthSM]) svg.append("g") .attr("transform", "translate(0," + heightSM + ")") .call(d3.axisBottom(x).tickSize(0).ticks(5)) .attr("id", "xAxis") // d3.selectAll("path.domain").remove(); // add the y Axis const y = d3.scaleLinear() .range([heightSM, 0]) .domain([0, 12]); svg.append("g") .call(d3.axisLeft(y)) .attr("id", "yAxisKde"); const line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(+d[0]); }) .y(function(d) { return y(+d[1]); }); const cScale = d3.scaleSequential(d3.interpolateOranges) .domain([0.2, 0.7]); // console.log(d3.interpolateOranges) // Compute kernel density estimation const kde = kernelDensityEstimator(kernelEpanechnikov(0.007), x.ticks(30)) // var density = kde(data.features.map(function(d){ return +d.properties.accessibil_sc; })) // var density = cities.map(function(d){ return kde(+d.values.properties); }) // var test = cities.filter(function(d){ return +d.values.properties.accessibil_sc; }) // test = cities.map(function(d) {return { // key: d.key, // values: d.values[100].properties.accessibil_sc}}) var density = citiesG.map(function(d) {return { key: d.key, a_log: d.values.map(d=>d.a_log), accessibil_median: d3.median(d.values.map(d=>d.a_log)), values: kde(d.values.map(d=>d.a_log)), pop_log: d.values.map(d=>d.pop_log), p_median: d3.median(d.values.map(d=>d.pop_log)), p_values: kde(d.values.map(d=>d.pop_log))}}) // density.sort(function(x, y){ // // return d3.ascending(x.MV - x.LV, y.MV - y.LV); // return d3.descending(+x.accessibil_median, +y.accessibil_median); // }) // DRAW KDE curves density = density.sort(function(a,b) { return d3.descending(+a.accessibil_median, +b.accessibil_median) }) // var density_p = density.sort(function(a,b) { return d3.descending(+a.p_median, +b.p_median) }) console.log(density) // Plot the curves const dist = svg.append("g") .attr("id", "curves") .append("path") .attr("class", "mypath") .data(density) .attr("fill", "none") .attr("opacity", "1") // .attr("stroke", d=>cScale(+d.accessibil_median)) .attr("stroke", d=>(d.key === "Vancouver")?"orange": (d.key === "Montreal")?"black": (d.key === "Toronto")?"": (d.key === "Chicago")?"purple": (d.key === "New York City")?"#0cc795": (d.key === "Los Angeles")?"red": (d.key === "Seattle")?"steelblue": (d.key === "Philadelphia")?"lightblue": (d.key === "Miami")?"green": (d.key === "San Francisco")?"brown": (d.key === "Houston")?"grey":'lightgrey') .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("d", function(d) {return line(d.values); }) const dist_p = svg.append("g") .attr("id", "curves") .append("path") .attr("class", "mypath") .data(density) .attr("fill", "none") .attr("opacity", "0.5") .attr("stroke", d=>cScale(+d.accessibil_median)) .attr("stroke", d=>(d.key === "Vancouver")?"orange": (d.key === "Montreal")?"black": (d.key === "Toronto")?"": (d.key === "Chicago")?"purple": (d.key === "New York City")?"#0cc795": (d.key === "Los Angeles")?"red": (d.key === "Seattle")?"steelblue": (d.key === "Philadelphia")?"lightblue": (d.key === "Miami")?"green": (d.key === "San Francisco")?"brown": (d.key === "Houston")?"grey":'lightgrey') .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("d", function(d) {return line(d.p_values); }) // .attr("d", symbol.type((d)=> d3.symbolTriangle)) // // .attr("fill", "none") // // .attr('stroke','steelblue') // .attr('stroke-width',0.3) // .style('opacity',0.8) // .attr('transform',function(d){ return "translate("+x(+d.ccdfp_log)+","+y(+d.p_values[1])+")"; }); // dist.attr("fill", d=>cScale(+d.accessibil_median)) // .attr("fill-opac", ".1") // Add Labels svg.append("text") .data(density) // .data(density.sort(function(a,b) { return +a.accessibil_median - +b.accessibil_median })) .attr("x", (0)) .attr("y", heightSM + 30) // -85 previously .style("text-anchor", "left") // .style("font-size", "12px") .style("font", "16px Georgia") // .attr("fill", "#ff6d00") // .attr("fill", d=>cScale(+d.accessibil_median)) .attr("fill", d=>(d.key === "Vancouver")?"orange": (d.key === "Montreal")?"black": (d.key === "Toronto")?"": (d.key === "Chicago")?"purple": (d.key === "New York City")?"#0cc795": (d.key === "Los Angeles")?"red": (d.key === "Seattle")?"steelblue": (d.key === "Philadelphia")?"lightblue": (d.key === "Miami")?"green": (d.key === "San Francisco")?"brown": (d.key === "Houston")?"grey":'lightgrey') // .attr("fill", function (d) { return myColor(d.values[0].party); }) .text(function(d) { return d.key; }); svg.append("text") .data(density) // .data(density.sort(function(a,b) { return +a.accessibil_median - +b.accessibil_median })) .attr("x",d=>x(+d.accessibil_median)) // .attr("y", heightSM + 45) // -85 previously .attr("y", 80) .style("text-anchor", "left") // .style("font-size", "12px") .style("font", "10px Arial") // .attr("fill", function (d) { return myColor(d.values[0].party); }) // .text("Median Accessibility: ") // // .attr("fill", "rgb(167, 167, 167)") // .attr("fill", "black") // .append("tspan") .attr("font-weight", "bold") // .attr("fill", "rgb(167, 167, 167)") .attr("fill", "rgb(167, 167, 167)") .text(d=>Math.round(+d.accessibil_median*100)/100); // median line svg.append("line") .data(density) .attr("x1", d=>x(+d.accessibil_median)) .attr("x2", d=>x(+d.accessibil_median)) // .attr("y1", 50) .attr("y1", 80) .attr("y2", 126) // .attr("d", function(d) {return line((+d.accessibil_median, +d.accessibil_median)); }) .attr("stroke", "grey") .style("stroke-dasharray", ("3, 3")) .attr("fill", "rgb(167, 167, 167)") .attr("stroke-width", "0.5px") // median label const medText = d3.select("#charts").select("svg") .data(density) // .attr("class", "description") .append("text") .text("Median accessibility") .attr("x", d=>x(+d.accessibil_median)) .attr("y", 110) .style("font-family", "arial") .style("font-size", "10") .attr("text-anchor", "middle") .attr("fill", "rgb(167, 167, 167)") };3e:T8eb,yAxisLP = g => g .attr("transform", `translate(${xLP(0)},0)`) // .attr("transform", (metric === "absolute")|(metric === "relative")? `translate(${xLP(0)},0)`: `translate(${xLP(0.8)},0)`) .attr("stroke-width", 0).attr("class","lAxis")//.attr("font-color", "red") // .attr("transform", `translate(${xLP(-0.000022)},0)`).attr("stroke-width", 0.5).attr("class","lAxis") .call(d3.axisLeft(yLP).tickFormat(d => data[d].city).tickSize(0).tickPadding(6)) .call(g => g.selectAll(".tick text") .attr("transform", `translate(0,-0.5)`) .attr("color", d=>(data[d].city === "Vancouver")?"orange": (data[d].city === "Montreal")?"black": (data[d].city === "Toronto")?"": (data[d].city === "Chicago")?"purple": (data[d].city === "New York City")?"#0cc795": (data[d].city === "Los Angeles")?"red": (data[d].city === "Seattle")?"steelblue": (data[d].city === "Philadelphia")?"lightblue": (data[d].city === "Miami")?"green": (data[d].city === "San Francisco")?"brown": (data[d].city === "Houston")?"grey":'black') .attr("font-weight", d=>(data[d].city === "Vancouver")|(data[d].city === "Montreal")| (data[d].city === "Toronto")|(data[d].city === "Chicago")| (data[d].city === "New York City")|(data[d].city === "Los Angeles")| (data[d].city === "Seattle")|(data[d].city === "Philadelphia")| (data[d].city === "Miami")|(data[d].city === "San Francisco")|(data[d].city === "Houston")? "700":"500") .attr("opacity", d=>(data[d].city === "Vancouver")|(data[d].city === "Montreal")| (data[d].city === "Toronto")|(data[d].city === "Chicago")| (data[d].city === "New York City")|(data[d].city === "Los Angeles")| (data[d].city === "Seattle")|(data[d].city === "Philadelphia")| (data[d].city === "Miami")|(data[d].city === "San Francisco")|(data[d].city === "Houston")? "1":"0.7") .attr("font-size", 2.5).attr("x", -2) .filter(i => +data[i].areas_AP < 0) .attr("text-anchor", "start") .attr("x", 3)) .attr("class", "AxisLP") // .attr("font-size", 2))3f:T554,html`styles`40:[] 31:{"id":"8ea8adb6c641db6e","slug":"urban-accessibility-v1","title":"Urban Accessibility-v1","thumbnail":"fa35ce34b6802a7500929367168e190590fa64bac05e43254ae7a52bf89de67f","access_level":"public","create_time":"$D2021-01-11T17:09:13.420Z","update_time":"$D2021-04-05T21:56:21.094Z","view_time":null,"first_public_time":"$D2022-04-21T13:22:43.955Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"405a122b348425fd","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":"starter_2024"},"version":1847,"publish_version":1847,"role":null,"authored":false,"authors":[{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null}],"members":[{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Urban Accessibility-v1","cells":[{"id":0,"value":"md`# Urban Accessibility-v1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`#### 1) Figure of 10 case cities\n- y = log(ccdf) for both A and P\n- x = A\n- Ranked by median accessibility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"md`#### 2) Figure of 10 case cities accessibility KDEs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"showKdes(\"#charts\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"md`#### 3) Zipf's law of accessibility by for all cities in the world, with highlighted case cities.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`#### 4) Population law of accessibility for all cities in the world, with highlighted case cities.\n- increase font size of the ticks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"md`introduce sigmoid curve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"md`#### 4) Radar plot chicago`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"md`#### 5) Ranking of cities based on area_A (area under ccdf(A)xA) - area_P (area under ccdf(P)xA)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"md`#### 6) The four quadrants of accessibility: where does each city stand?\n##### Not Normalized`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"md`##### Normalized\n- make size of the things proportional to aucA - aucP`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"function kernelEpanechnikov(k) {\n return function(v) {\n return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;\n };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"// Function to compute density\n function kernelDensityEstimator(kernel, X) {\n return function(V) {\n return X.map(function(x) {\n return [x, d3.mean(V, function(v) { return kernel(x - v); })];\n });\n };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"function getRandomSubarray(arr, size) {\n var shuffled = arr.slice(0), i = arr.length, min = i - size, temp, index;\n while (i-- > min) {\n index = Math.floor((i + 1) * Math.random());\n temp = shuffled[index];\n shuffled[index] = shuffled[i];\n shuffled[i] = temp;\n }\n return shuffled.slice(min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"lineGeneratorA = d3.line()\n .defined(function(d) { return ((d.tot_mobility!==0)); })\n .x((d)=>xScale(d.accessibil_sc))\n .y((d)=>yScaleA(d.ccdf_access))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"lineGeneratorP = d3.line()\n .defined(function(d) { return ((d.tot_mobility!==0)); })\n .x((d)=>xScale(d.accessibil_sc))\n .y((d)=>yScaleP(d.ccdf))\n .curve(d3.curveBasis);\n // .curve(d3.curveBundle.beta(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"function formatPower(x) {\n const e = Math.log10(x);\n if (e !== Math.floor(e)) return; // Ignore non-exact power of ten.\n return `10${(e + \"\").replace(/./g, c => \"⁰¹²³⁴⁵⁶⁷⁸⁹\"[c] || \"⁻\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`#### Axes and Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"normScaleA = d3.scaleLinear().domain([d3.min(data, d=> +d.areas_A)-0.005,d3.max(data, d=> +d.areas_A)+0.005]).range([0, 1]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"normScaleP = d3.scaleLinear().domain([d3.min(data, d=> +d.areas_P)-0.005,d3.max(data, d=> +d.areas_P)+0.005]).range([0, 1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"xLP = d3.scaleLinear()\n // .domain((metric === \"absolute\")|(metric === \"relative\")? d3.extent(data, d => +d.areas_AP):\n // metric === \"AUCA\"? d3.extent(data, d => +d.areas_A):\n // d3.extent(data, d => +d.areas_P))\n // .domain((metric === \"absolute\")|(metric === \"relative\")? d3.extent(data, d => +d.areas_AP):\n // metric === \"AUCA\"? [0.5,1]:\n // [0.5,1])\n .domain([0,1])\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"yLP = d3.scalePoint()\n .domain(d3.range(data.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"xAxisLP = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .attr(\"font-size\", 2.5).attr(\"stroke-width\", 0.3)\n .attr(\"class\", \"AxisLP\")\n .call(d3.axisTop(xLP).ticks(width / 80).tickSize(2).tickFormat(tickFormat))\n .call(g => g.select(\".domain\").remove()).attr(\"font-size\", 2.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"yAxisAreaPnorm = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n // .attr(\"transform\", `translate(${widthSingle/2+margin.left},0)`)\n .call(d3.axisLeft(yScaleAreaPnorm))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Area Under CDF of Population\"))\n .attr('id', 'yAxis')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"yAxisAreaP = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleAreaP))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Area Under CDF of Population\"))\n .attr('id', 'yAxis')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"yAxisPsingle = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScalePsingle).ticks(5))\n .call(g => g.select(\".domain\").remove())\n // .call(g => g.select(\".tick:last-of-type text\").clone()\n // .attr(\"x\", 3)\n // .attr(\"text-anchor\", \"start\")\n // .attr(\"font-weight\", \"bold\")\n // .text(\"Cumulative Population Proportion\"))\n .attr('class', 'yAxisSingle')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"yAxisP = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleP).ticks(5))\n .call(g => g.select(\".domain\").remove())\n // .call(g => g.select(\".tick:last-of-type text\").clone()\n // .attr(\"x\", 3)\n // .attr(\"text-anchor\", \"start\")\n // .attr(\"font-weight\", \"bold\")\n // .text(\"Cumulative Population Proportion\"))\n .attr('id', 'yAxis')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"yAxisPlog = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScalePlog).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Cumulative Population Proportion\"))\n .attr('id', 'yAxis')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"yAxisA = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleA).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Cumulative Accessibility Proportion\"))\n .attr('id', 'yAxis')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"xAxisAreaAnorm = g =>\n g.attr(\"transform\", `translate(0,${heightSingle - margin.bottom})`).call(\n // g.attr(\"transform\", `translate(0,${heightSingle/2 - margin.bottom})`).call(\n\n d3\n .axisBottom(xScaleAreaAnorm)\n .ticks(9)\n .tickSize(5)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"xAxisAreaA = g =>\n g.attr(\"transform\", `translate(0,${heightSingle - margin.bottom})`).call(\n d3\n .axisBottom(xScaleAreaA)\n .ticks(9)\n .tickSize(5)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"xAxisSingle = g =>\n g.attr(\"transform\", `translate(0,${heightSingle - margin.bottom})`).call(\n d3\n .axisBottom(xScaleSingle)\n .ticks(5)\n .tickSize(5)\n .tickSizeOuter(0)\n )\n.attr('class', 'xAxisSingle')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(xScale)\n .ticks(5)\n .tickSize(5)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"yScalePsingle = d3\n // .scaleLog() //.clamp(true)\n .scaleLinear()\n .domain(ccdfExtent)\n .range([heightSingle - margin.bottom, margin.top])\n // .nice()\n // .base(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"yScaleP = d3\n // .scaleLog() //.clamp(true)\n .scaleLinear()\n .domain(ccdfExtent)\n .range([height - margin.bottom, margin.top])\n // .nice()\n // .base(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"yScalePlog = d3\n .scaleLog().base(10)\n // .scaleLinear()\n .domain(ccdfExtentLog)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"yScaleA = d3\n // .scaleLog().base(10)\n .scaleLinear()\n .domain(ccdfaExtent)\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"yScaleAreaPnorm = d3\n // .scaleLog().base(10)\n .scaleLinear()\n .domain([0, 1])\n // .domain(d3.extent(data, d=>+d.areas_P))\n .range([heightSingle - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"yScaleAreaP = d3\n // .scaleLog().base(10)\n .scaleLinear()\n // .domain([0.67, 0.95])\n .domain(d3.extent(data, d=>+d.areas_P))\n .range([heightSingle - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"xScaleAreaAnorm = d3\n // .scaleLog().base(10)\n .scaleLinear()\n // .domain(d3.extent(data, d=>+d.areas_A))\n .domain([0, 1])\n .range([margin.left, widthSingle - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1443,"value":"xScaleAreaA = d3\n // .scaleLog().base(10)\n .scaleLinear()\n .domain(d3.extent(data, d=>+d.areas_A))\n // .domain([0.83, 0.92])\n .range([margin.left, widthSingle - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"xScaleSingle = d3\n // .scaleLog().base(10)\n .scaleLinear()\n .domain(accessExtent)\n .range([margin.left, widthSingle - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"xScale = d3\n // .scaleLog().base(10)\n .scaleLinear()\n .domain(accessExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`#### Extents and Domains`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"slopepExtent = [0, d3.max(exp, d=>Number(d.slope_ap))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"slopeaExtent = [0, d3.max(exp, d=>Number(d.slope_aa))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"ccdfaExtent = d3.extent(cities, d=>Number(d.ccdfa_log))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"ccdfExtent = d3.extent(cities, d=>Number(d.a_log))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"ccdfExtentLog = d3.extent(cities, d=>Number(d.ccdfp_log))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"accessExtent = d3.extent(cities, d=>Number(d.a_log))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`#### Data + Preprocessing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"exp = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/389983b9fe0e847570bd00513ccac5cc/raw/7f5e2b2ff0103fc84286aad19c2cdb0e035ae95e/cities_exp.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"citiesNA = cities.filter(d=>(d.city === \"Vancouver\")|(d.city === \"Montreal\")|\n (d.city === \"Toronto\")|(d.city === \"Chicago\")|\n (d.city === \"New York City\")|(d.city === \"Los Angeles\")|\n (d.city === \"Seattle\")|(d.city === \"Philadelphia\")|\n (d.city === \"Miami\")|(d.city === \"San Francisco\")|(d.city === \"Houston\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"cityAccessR = cityAccess.map(d=>({code: d.code, access: getRandomSubarray(d.access, 500)}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"cityAccess = {\n cities;\n const dateParse = d3.timeParse('%Y-%m-%d');\n const extent = [];\n const dataByBorough = cities.reduce((accumulator, current)=>{\n const accessibilProp = 'a_log';\n const accesscProp = 'ccdfa_log';\n const ccdfaProp = 'ccdfp_log';\n const ccdfProp = 'rank_a_log';\n const codeProp = 'city';\n\n if(!accumulator[current[codeProp]]){\n accumulator[current[codeProp]] = [];\n }\n accumulator[current[codeProp]].push({\n a_log: Number(current[accessibilProp]),\n ccdfa_log: Number(current[accesscProp]),\n ccdfp_log: Number(current[ccdfaProp]),\n rank_a_log: Number(current[ccdfProp]),\n });\n return accumulator;\n }, {});\n return Object.keys(dataByBorough).map(d=>({code:d, access:dataByBorough[d]}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"auc = d3.csv(\"https://raw.githubusercontent.com/lnicoletti/world_access/master/hosted_data/cities_auc.csv\")//=>({city, areas_AP: metric === \"absolute\" ? value1 - value0 : (value1 - value0) / value0})).sort((a, b) => d3.ascending(a.value, b.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"data = (metric === \"absolute\")|(metric === \"relative\")? auc.sort((a, b) => d3.descending(+a.areas_AP, +b.areas_AP)):\n metric === \"AUCA\"? auc.sort((a, b) => d3.ascending(+a.areas_A, +b.areas_A)):\n auc.sort((a, b) => d3.ascending(+a.areas_P, +b.areas_P))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"cities = d3.csv(\"https://raw.githubusercontent.com/lnicoletti/world_access/master/hosted_data/cities_scaling.csv\")//6377b2a\n//https://cdn.jsdelivr.net/gh/lnicoletti/world_access@6377b2a/hosted_data/cities_scaling.csv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"old = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/4ac01feb54fae97b5bc86a57b177f3d5/raw/e959534856f4cc679f972fa2893d1062d502fa85/cities_scaling3.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`#### Constants, Modules, Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"format = d3.format(metric === \"relative\" ? \"+,.0%\": \"+,.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"tickFormat = metric === \"relative\" ? format : d3.formatPrefix(\"+.1\", 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"barHeight = 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"LPheight = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"heightSM = 210 - marginSM.top - marginSM.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"widthSM = 210 - marginSM.left - marginSM.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"marginSM = ({top: 30, right: 20, bottom: 55, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 50, leftLP:10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"width = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"heightSingle = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"widthSingle = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"widthWide = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`import modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 32:"$31:body"