25:["$","title",null,{"children":"Urban Accessibility-v1 | RoosterViz | Observable"}] 49: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(); }4a: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.`4b: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(); }4c: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(); }4d: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; }4e: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(); }4f: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(); } 50: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(); } 51: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.`52: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.`53: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)") };54: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))55:T554,html`styles`56:[] 29:{"id":"6c8d8b28b931dfff","slug":null,"title":"Urban Accessibility-v1","thumbnail":null,"access_level":"public","create_time":"$D2024-04-05T14:55:38.031Z","update_time":"$D2024-04-05T14:55:38.031Z","view_time":null,"first_public_time":"$D2024-04-05T14:55:38.031Z","has_unpublished_edits":null,"fork":{"id":"8ea8adb6c641db6e","slug":"urban-accessibility-v1","title":"Urban Accessibility-v1","owner":{"id":"405a122b348425fd","login":"lnicoletti","name":"leonardo Nicoletti"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bc7f55055350cc56","login":"roosterviz","name":"RoosterViz","avatar_url":"https://avatars-next.observableusercontent.com/f095784747bef76507934707517dcf206f025c7afdda6973075a1e40abb3671f","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1847,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b64f0384c25d176f","login":"fhtejedorg","name":"Fabio Tejedor","avatar_url":"https://avatars-next.observableusercontent.com/4e3a612bd909a40f4639691c39c85eba725c0494ea8c9c693118a9b6d9eb5157","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b64f0384c25d176f","login":"fhtejedorg","name":"Fabio Tejedor","avatar_url":"https://avatars-next.observableusercontent.com/4e3a612bd909a40f4639691c39c85eba725c0494ea8c9c693118a9b6d9eb5157","tier":null,"role":"editor"},{"type":"team","id":"bc7f55055350cc56","login":"roosterviz","name":"RoosterViz","avatar_url":"https://avatars-next.observableusercontent.com/f095784747bef76507934707517dcf206f025c7afdda6973075a1e40abb3671f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Urban Accessibility-v1","cells":[{"id":0,"value":"md`# Urban Accessibility-v1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"showKdes(\"#charts\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"md`introduce sigmoid curve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"md`#### 4) Radar plot chicago`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1838,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`#### Axes and Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`#### Extents and Domains`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`#### Data + Preprocessing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`#### Constants, Modules, Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"barHeight = 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"heightSM = 210 - marginSM.top - marginSM.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"widthSM = 210 - marginSM.left - marginSM.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"width = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"heightSingle = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"widthSingle = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"widthWide = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`import modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W56","stdlib":"1"}} 24:null