31:T484,md`# Transit Cost Sketches This notebook explores different ideas around visualizating the a dataset found at the [Transit Costs Project](https://transitcosts.com/). #### //////////// Work in progress //////////// The dataset is still in development and being expanded by a team of researchers at the NYU Marron Institute of Urban Management. There may be display errors around missing values and changes as additional data is added and refined. Comparing hundreds of elements in an accessible way has various challenges and these sketches represent different ideas to visualize and understand the dataset. It also explores some ideas around navigating missing data as its own insight both in refining a dataset and in highlighting some of the challenges in transparency around transit constructions costs. I am interest in feedback around the usefulness of different aspects, what could be refined, additional features. Dataset Overview (Copy from December 3, 2020)
${data.set.length} projects in ${data.setCities.size} cities across ${data.setCountries.size} countries

`32:T26b7,beeswarm = { const chartid = "chart-beeswarm"; const height = 600; const margin = ({ top: 20, right: 20, bottom: 120, left: 20 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; let colorRange = ["tan", "purple"]; let forceMode = (bSelect.x === 'map') ? 'map' : 'axis'; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`); // X/Y Axis let selectX = (forceMode === 'axis') ? bSelect.x : 'Length'; let x = d3.scaleLinear() .domain(d3.extent(data.set, d => d[bSelect.x])) .range([(innerWidth*0.2), innerWidth-(innerWidth*0.2)]) .nice(); let xAxis = d3.axisBottom(x).tickFormat(dataDict[selectX].format); // let y = d3.scaleLinear() // .domain([0,data.maxCostKm]) // .range([innerHeight,0]); // let yAxis = d3.axisLeft(y).tickFormat(dataDict[selectY].format) if (forceMode === 'axis') { let xg = group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis) .call(g => g.selectAll(".domain").remove()); group.append("text") .text(dataDict[selectX].label) .attr("text-anchor", "middle") .attr("class", "x-axis-label") .attr("y", innerHeight + 36) .attr("x", innerWidth/2) .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // let yg = group.append("g") // .attr("class", "y axis") // //.attr("transform", "translate("+ 0 + "," + 0 + ")") // .call(yAxis) // .call(g => g.selectAll(".domain").remove()); } // Map Base let projection = d3.geoNaturalEarth1() let outline = ({type: "Sphere"}) let graticule = d3.geoGraticule10() let path = d3.geoPath(projection) //const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitExtent([[0, 0], [innerWidth, innerHeight]], outline)).bounds(outline); //const mapHeight = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), mapHeight); //projection.scale(projection.scale() * (l - 1) / l).precision(0.2); if (forceMode === 'map') { const defs = group.append("defs"); defs.append("path") .attr("id", "outline") .attr("d", path(outline)); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const map = group.append("g") .attr("clip-path", `url(${new URL("#clip", location)})`); map.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "#FFF"); map.append("path") .attr("d", path(graticule)) .attr("stroke", "#DDD") .attr("fill", "none"); let countries = topojson.feature(world, world.objects.countries); let borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b); map.append("path") .attr("d", path(countries)) .attr("fill", "#DDD"); map.append("path") .attr("d", path(borders)) .attr("fill", "none") .attr("stroke", "#FFF"); map.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("stroke", "#DDD") .attr("fill", "none"); } // Bubble Size let selectR = "Cost/km (Millions)"; let rMax = (forceMode === 'axis') ? 20 : 12; let rMin = 2; let r = d3.scaleSqrt() .domain([0, d3.extent(data.set, d => d[selectR])[1]]) .range([rMin, rMax]) // Legend let rLegend = group.append("g") .attr("transform", `translate(${200},${innerHeight+70})`) rLegend.append('circle') .attr('r', rMin) .attr('cx',rMin) .attr('fill', 'none') .attr('stroke', '#CCC') rLegend.append('circle') .attr('r', (rMin+rMax)/2) .attr('cx',(rMin+rMax)/2) .attr('fill', 'none') .attr('stroke', '#CCC') rLegend.append('circle') .attr('r', rMax) .attr('cx', rMax) .attr('fill', 'none') .attr('stroke', '#CCC') rLegend.append('text') .text(selectR) .attr('x', (6 + rMax*2)) .attr('font-size', '10px') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('alignment-baseline', 'middle') .attr('fill', '#222') // Bubble Color let selectC = 'PPP rate' // color(d[selectC]) let color = d3.scaleLinear() .domain(d3.extent(data.set, d => d[selectC])) .range(colorRange) // Legend group.append("g") .attr("transform", `translate(${0},${innerHeight+(50)})`) .append(() => legend({ color, title: selectC, width: 150, ticks: 5 // tickValues: d3.utcYear.every(5).range(...color.domain()), // tickFormat: d3.utcFormat("%Y") })); // NULL ISLAND for MISSING DATA let nIsleRadius = 50; let nIsleCoord = [innerWidth-nIsleRadius, innerHeight-nIsleRadius-20] if (forceMode === 'axis') { const nIsle = group.append('g') .attr('className', 'null-island') .attr('transform', d => { return `translate(${nIsleCoord[0]},${nIsleCoord[1]})` }) nIsle.append('circle') .attr('r', nIsleRadius) .attr('fill', 'none') .attr('stroke', '#CCC') nIsle.append('text') .text('Data Missing') .attr('x', 0) .attr('y', -nIsleRadius-10) .attr('text-anchor', 'middle') .attr('font-size', '10px') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') //.attr('alignment-baseline', 'middle') .attr('fill', '#CCC') } const nodes = group.append('g') .attr('className', 'nodes') let node = nodes.selectAll('g') .data(data.set) .join('g') .attr('transform', d => { d.r = r(d[selectR]) if(forceMode === 'map') { d.active = (isNum(d.lat) && isNum(d.lon)) d.xf = d.active ? projection([d.lon, d.lat])[0] : nIsleCoord[0]; d.yf = d.active ? projection([d.lon, d.lat])[1] : nIsleCoord[1]; } else { let xVal = d[selectX]; d.active = isNum(xVal) d.xf = d.active ? x(xVal) : nIsleCoord[0]; d.yf = d.active ? (innerHeight/2) : nIsleCoord[1]; } d.x = d.xf d.y = d.yf return `translate(${d.x},${d.y})` }) .attr('class', d => { return 'node' }) .on('mouseover', nodeMouseOver) .on('mouseout', nodeMouseOut ); node.append('circle') .attr('class', 'bubble') //.attr('pointer-events', 'none') .attr('r', d => { //d.r = r(d[selectR]) return d.r }) .attr('fill', d => color(d[selectC]))// let firstTick = true; let firstTickAction = function () { d3.select('.null-island').attr('opacity', d => { console.log('initialize') console.log(data.set.filter(d => d.active === false).length) return (data.set.filter(d => d.active === false).length > 0) ? 1 : 0; }) firstTick = false; } let simulation = d3.forceSimulation(data.set) //.force('charge', d3.forceManyBody().strength(-1)) .force('x', d3.forceX(d => d.xf)) .force('y', d3.forceY(d => d.yf)) .force('collision', d3.forceCollide().radius(d => r(d[selectR]) + 1)) .on("tick", ticked); function ticked() { if(firstTick){ firstTickAction() } node // .transition() // .ease(d3.easeLinear) .attr('transform', d => { if(d.active){ d.x = Math.max(d.r, Math.min(innerWidth - d.r, d.x)); d.y = Math.max(d.r, Math.min(innerHeight - d.r, d.y)); } else { d.x = Math.max(d.r, Math.min(width - d.r, d.x)); d.y = Math.max(d.r, Math.min(height - d.r, d.y)); } return `translate(${d.x},${d.y})` }) } invalidation.then(() => simulation.stop()); function nodeMouseOver(event, d){ d3.select(event.target) .attr('stroke', 'red') .attr('stroke-width', 3); chartTip.style("left", () => { if (innerWidth - d.x < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipLayout(d)}`); } function nodeMouseOut(event, d){ chartTip.style("display", "none"); // Hide toolTip d3.select(event.target) .attr('stroke', '#FFF') .attr('stroke-width', 0); } svg.node().updateView = function(variable) { console.log('UPDATE VIEW') console.log({variable}) } return Object.assign(svg.node(), { update(bSelect) { //agedata console.log('UPDATE 2') // console.log("beeswarm update") // const t = svg.transition().duration(1000); // const old = new Map(node.data().map(d => [d.id, d])); // nodes = nodes.map(d => Object.assign(old.get(d.id) || {}, d)); // node = node // .data(nodes, d => d.id) // .join(enter => enter.append("circle") // .attr("r", 8) // .attr("fill", d => color(d.id))); // simulation.nodes(nodes); // simulation.alpha(1).restart(); // x.domain(d3.extent(data.set, d => d[bSelect.x])); // xg.transition(t).call(xAxis) // .call(g => g.selectAll(".domain").remove()); // // d3.selectAll(".x.axis") // // .transition().duration(2000) // // .call(xAxis); // //xg.transition(t).call(xAxis, x); // // force.force('y', d3.forceY(d => d.yf)); // // force.alpha(1).restart(); } }); //return svg.node(); }33:Te10,circlePack = { const height = width*.75; const margin = ({ top: 20, right: 20, bottom: 20, left: 20 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-circlepack"; const root = d3.pack() .size([innerWidth, innerHeight]) .padding(4) (hierarchy) let format = d3.format(",d") const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const node = group.append("g") .attr("pointer-events", "all") .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); // Country Labels let typeScale = d3.scaleLinear() .domain(d3.extent(root.children, d => d.r)) .range([8,24]); let countries = group.append("g") .attr("pointer-events", "none") .selectAll("g") .data(root.descendants().filter(d => d.depth === 1)) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); countries.append("text") .attr("class", d => `labels label-${d.data[0]}`) .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("pointer-events", "none") .attr("font-size", d => typeScale(d.r)) .attr("opacity", .75) //.text(d => data.placeMap.get(d.data[0])[0].entity); .text(d => { let label = data.placeMap.get(d.data[0])[0].entity return (d.r > 1) ? label : ""; }); node.append("circle") .attr("r", d => d.r) .attr("stroke", d => d.children ? "#ddd" : "none") .attr("fill", d => d.children ? "none" : "#ddd") .on('mousemove', (event, d) => { if (d.depth === 3) { d3.select(event.target).attr('stroke','red'); chartTip.style("left", () => { console.log(d3.pointer(event)[0]) console.log(innerWidth - d3.pointer(event)[0]) if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(() => { //return `ID: ${d.data[0]}` return tipLayout(data.mapID.get(d.data[0])[0]) }); } }) .on('mouseout', (event, d) => { chartTip.style("display", "none"); // Hide toolTip if (d.depth === 3) { d3.select(event.target).attr('stroke','none'); } }); const leaf = node.filter(d => !d.children); leaf.select("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); const outer = node.filter(d => !d.parents); //const outer = node.filter(d => d.depth === 1); outer .on('mousemove', (event, d) => { d3.selectAll("#"+chartid+" .labels" ).attr('opacity', .05); //d3.selectAll(`#${chartid} .label-{d.data[0]}`).attr('opacity', .15); }) .on('mouseout', (event, d) => { d3.selectAll("#"+chartid+" .labels" ).attr('opacity', .85); }); return svg.node(); }34:T46e,viewof scatterSelection = inputsGroup( [ [ select({ // title: 'Y Value', description: 'Select y axis value', options: [ { value: 'Length', label: 'Length'}, { value: 'Tunnel', label: 'Tunnel Length'}, { value: 'Stations', label: 'Stations'}, { value: 'PPP rate', label: 'PPP Rate'}, { value: 'Real cost', label: 'Real Cost (Millions $)'}, { value: 'Cost/km (Millions)', label: 'Cost/km (Millions $)'}, { value: 'cTime', label: 'Construction Time'} ], value: 'Cost/km (Millions)' // set initial value }), select({ // title: 'X Value', description: 'Select x axis value', options: [ { value: 'Length', label: 'Length'}, { value: 'Tunnel', label: 'Tunnel'}, { value: 'Stations', label: 'Stations'}, { value: 'PPP rate', label: 'PPP rate'}, { value: 'Real cost', label: 'Real cost'}, { value: 'Cost/km (Millions)', label: 'Cost/km (Millions)'}, { value: 'cTime', label: 'Construction Time'} ], value: 'Length' // set initial value }) ] ], [ ['y','x'] ] )35:T105e,chartScatterplot = { const height = 400 const margin = ({ top: 50, right: 50, bottom: 60, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-scatterplot"; let selectY = scatterSelection.y let selectX = scatterSelection.x const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let y = d3.scaleLinear() .domain(d3.extent(data.set, d => d[selectY])) .range([innerHeight, 0]); let x = d3.scaleLinear() .domain(d3.extent(data.set, d => d[selectX])) .range([0, innerWidth]); let yAxis = d3.axisLeft(y).tickFormat(dataDict[selectY].format); let xAxis = d3.axisBottom(x).tickFormat(dataDict[selectX].format); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); //.call(g => g.selectAll(".domain").remove()); group.append("g") .attr("class", "y axis") //.attr("transform", "translate("+ 0 + "," + 0 + ")") .call(yAxis); //.call(g => g.selectAll(".domain").remove()); // Title group.append("text") .text(dataDict[selectX].label) .attr("text-anchor", "middle") .attr("class", "x-axis-label") .attr("y", innerHeight + 36) .attr("x", innerWidth/2) .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); group.append("text") .text(dataDict[selectY].label) .attr("text-anchor", "middle") .attr("class", "y-axis-label") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Source Text // group.append("text") // .attr("class", "graph-source") // .text("Data: Formula 1 Constructor Standings") // .attr("text-anchor", "left") // .attr("x", 0) // .attr("y", innerHeight + margin.bottom - 18) // .style('fill', '#999') // .style('font-size', '.60em') // .style('font-family', 'sans-serif'); // Points var nodes = group.append("g") .attr("class", "project") var node = nodes.selectAll("node") .data(data.set) //.transition() // <---- Here is the transition .join("g") .attr("transform", function(d) { return "translate(" + x(d[selectX]) + "," + y(d[selectY]) + ")"; }) .attr("class", function(d) { return 'id-' + d['Project ID']}) .on('mousemove', (event, d) => { d3.select(event.target).attr('stroke','red'); chartTip.style("left", () => { console.log(d3.pointer(event)[0]) console.log(innerWidth - d3.pointer(event)[0]) if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipLayout(d)}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select(event.target).attr('stroke','#999'); }); node.append("circle") .attr("r", 2) .attr('fill', d => (isNum(d[selectX]) || isNum(d[selectY])) ? '#888' : '#DDD' ) //.attr("r", function(d) { return size(d['goals_for']) }) .attr('opacity', d => { return (isNum(d[selectX]) && isNum(d[selectY])) ? 1.0 : 0; }) .on('mousemove', (event, d) => { d3.select(event.target) .attr('stroke', 'red') .attr('stroke-width', 3); }) .on('mouseout', (event) => { d3.select(event.target) .attr('stroke', 'none') .attr('stroke-width', 0); }); return svg.node(); }36:T1222,chartConstructionTime = { const height = 1600; const margin = ({ top: 50, right: 50, bottom: 60, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-construction-time"; let selectY = "Cost/km (Millions)" let duationSort = durationSelect.sort; let selection = data.setDuration; if (duationSort === 'start') { selection.sort((a, b) => d3.ascending(a['End year'], b['End year'])) .sort((a, b) => d3.ascending(a['Start year'], b['Start year'])) } else { selection.sort((a, b) => d3.ascending(a['Start year'], b['Start year'])) .sort((a, b) => d3.ascending(a['End year'], b['End year'])) } // extent of years let selectionExtent = [ d3.min(selection, d => d['Start year']), d3.max(selection, d => d['End year']) ] let selectionOrder = selection.map(d => d['id']) // let setTimeDurations = selection.map(d => d['cTime']) // let setTimeStart = set.filter(d => d['End year'] === null && d['Start year'] !== null) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let y = d3.scaleBand() .domain(selectionOrder) .range([0, innerHeight,]); let yAxis = d3.axisLeft(y) let x = d3.scaleLinear() .domain(selectionExtent) .range([20, innerWidth-20]).nice(); let xAxis = d3.axisBottom(x).tickFormat(d3.format("d")); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis) .call(g => g.selectAll(".domain").remove()); // group.append("g") // .attr("class", "y axis") // //.attr("transform", "translate("+ 0 + "," + 0 + ")") // .call(yAxis) // .call(g => g.selectAll(".domain").remove()); // Title group.append("text") .text('Construction Period') .attr("text-anchor", "middle") .attr("class", "x-axis-label") .attr("y", innerHeight + 40) .attr("x", innerWidth/2) .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); group.append("text") .text('Projects') //.attr("text-anchor", "middle") .attr("text-anchor", "end") .attr("class", "y-axis-label") //.attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (0) + ") rotate(-90)") .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Lines var lines = group.append("g") .attr("class", "project-lines") let line = lines.selectAll("g") .data(selection) .join("g") .attr("class", (d) => "project-" + d['Project ID'] + d['Line']) .on('mousemove', (event, d) => { d3.select(event.target).attr('stroke','red'); chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipLayout(d)}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select(event.target).attr('stroke','#999'); }); line.append("line") .attr("class", "primary") .attr("style", "fill:none !important") // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") .attr("stroke-width", 2) .attr("stroke", (d) => '#999') // teamColors[d.teamClass] .attr("stroke-opacity", 3) .attr('y1', d => y(d['id'])) .attr('y2', d => y(d['id'])) .attr('x1', (d) => x(d['Start year'])) .attr('x2', (d) => x(d['End year'])); // Source Text // group.append("text") // .attr("class", "graph-source") // .text("Data: Transit Costs Project") // .attr("text-anchor", "left") // .attr("x", 0) // .attr("y", innerHeight + margin.bottom - 18) // .style('fill', '#999') // .style('font-size', '.60em') // .style('font-family', 'sans-serif'); return svg.node(); }37:T1055,chartLines = { const height = 400; const margin = ({ top: 20, right: 50, bottom: 60, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-lines"; let selectY = barSelect.y let dataSelect = data.set.filter(d => isNum(d[selectY])).sort((a, b) => d3.descending(a[selectY], b[selectY])) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // let y = d3.scaleLinear() // .domain(data.extId) // .range([0, innerHeight,]); let y = d3.scaleLinear() .domain([0, d3.max(dataSelect, d => d[selectY])]) .range([innerHeight,0]); let yAxis = d3.axisLeft(y).tickFormat(dataDict[selectY].format); // let x = d3.scaleLinear() // .domain(data.extYears) // .range([20, innerWidth-20]); // let xAxis = d3.axisBottom(x).tickFormat(d3.format("d")); let x = d3.scaleBand() .domain(dataSelect.map(d => d.id)) .range([10, innerWidth]); let xAxis = d3.axisBottom(x); // group.append("g") // .attr("class", "x axis") // .attr("transform", "translate("+ 0 + "," + innerHeight + ")") // .call(xAxis) // .call(g => g.selectAll(".domain").remove()); group.append("g") .attr("class", "y axis") //.attr("transform", "translate("+ 0 + "," + 0 + ")") .call(yAxis) .call(g => g.selectAll(".domain").remove()); // Title group.append("text") .text('Projects') .attr("text-anchor", "middle") .attr("class", "x-axis-label") .attr("y", innerHeight + 36) .attr("x", innerWidth/2) .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); group.append("text") .text(dataDict[selectY].label) .attr("text-anchor", "middle") .attr("class", "y-axis-label") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Lines var lines = group.append("g") .attr("class", "project-lines") let line = lines.selectAll("g") .data(dataSelect) .join("g") .attr("class", (d) => "project-" + d.id + d['Line']) .on('mousemove', (event, d) => { d3.select(event.target).attr('stroke','red'); chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(`${tipLayout(d)}`); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select(event.target).attr('stroke','#999'); }); line.append("line") .attr("class", "primary") .attr("style", "fill:none !important") // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") .attr("stroke-width", 1) .attr("stroke", (d) => '#999') // teamColors[d.teamClass] .attr("stroke-opacity", 3) .attr('x1', d => x(d.id)) .attr('x2', d => x(d.id)) // .attr('x1', (d) => x(d['Start year'])) // .attr('x2', (d) => x(d['End year']));maxCostKm .attr('y1', (d) => y(0)) .attr('y2', (d) => y(d[selectY])); // Source Text // group.append("text") // .attr("class", "graph-source") // .text("Data: Transit Costs Project") // .attr("text-anchor", "left") // .attr("x", 0) // .attr("y", innerHeight + margin.bottom - 18) // .style('fill', '#999') // .style('font-size', '.60em') // .style('font-family', 'sans-serif'); return svg.node(); }38:Ta7b,data = { let result = {} const processPct = function (val) { if (val !== null && val.includes("%")) { return (parseFloat(val.replace("%", ""))/100).toFixed(3); } else { return val; } } result.set = d3.tsvParse(await FileAttachment("Merged-Costs-(1.0)-Edit@1.tsv").text(), d3.autoType) result.placeMap = d3.group(d3.tsvParse(await FileAttachment("geopolitical-entities.tsv").text(), d3.autoType), d => d.iso2); // map to lookup country names result.placeMap2 = d3.group(d3.csvParse(await FileAttachment("TM-World-List-0.3.csv").text(), d3.autoType), d => d.ISO2); result.mapCoCity = d3.group(d3.csvParse(await FileAttachment("transit-cities.csv").text(), d3.autoType), d => d.iso2, d => d.city) //result.set = result.set.filter(d => d['Country'] === "UK"); result.set.forEach((d,i) => { //if (d['Start year'] !== null && d['End year'] !== null) { d.id = i+1; // add local id to ensure unique d['TunnelPer'] = +processPct(d['TunnelPer']) //if (!isNum(d['Cost'])) { if (typeof d['Cost'] === 'string') { d['Cost'] = +d['Cost'].replace(",", "") } let lat = "" let lon = "" if (d['Country'] === "UK") { d['Country'] = "GB" } let locLookup = result.mapCoCity.get(d['Country']).get(d['City']) console.log(locLookup) if (locLookup !== undefined){ // lat = result.placeMap2.get(d['Country'])[0]['LAT'] // lon = result.placeMap2.get(d['Country'])[0]['LON'] lat = locLookup[0]['lat'] lon = locLookup[0]['lon'] } d.lat = lat; d.lon = lon; // Process Project Duration if (d['Start year'] !== null && d['End year'] !== null && typeof d['Start year'] !== 'string' && typeof d['End year'] !== 'string') { let time = d['End year'] - d['Start year'] if (time > -1) { d['cTime'] = time; } else { d['cTime'] = null; } d['cTime'] = time; } else { d['cTime'] = null; } }) // Filtered Set of Projects with a Duration result.setDuration = result.set.filter(d => d['cTime'] !== null && !isNaN(d['cTime'])) // extent of years // result.extYears = [d3.min(result.set, d => d['Start year']),d3.max(result.set, d => d['End year'])] result.setCountries = d3.group(result.set, d => d.Country); result.setCities = d3.group(result.set, d => d.City); result.mapID = d3.group(result.set, d => d.id); result.maxCostKm = d3.max(result.set, d => d['Cost/km (Millions)']) result.extId = d3.extent(result.set, d => d['Project ID']) result.extPPP = d3.extent(result.set, d => d['PPP rate']) return result }39:T564,function tipLayout(d) { let tipContent = ``; // Start content string let duration = isNum(d['cTime']) ? `(${d['cTime']} Years)` : ''; let start = isNum(d['Start year']) ? `${d['Start year']}` : 'N/A'; let end = isNum(d['End year']) ? `${d['End year']}` : 'N/A'; let stations = isNum(d['Stations']) ? d['Stations'] : 'N/A'; let length = isNum(d['Length']) ? dataDict['Length'].format(d['Length']) : 'N/A'; let tunnel = isNum(d['TunnelPer']) ? dataDict['TunnelPer'].format(d['TunnelPer']) : 'N/A'; let ppp = isNum(d['PPP rate']) ? dataDict['PPP rate'].format(d['PPP rate']) : 'N/A'; let cost = isNum(d['Cost']) ? dataDict['Cost'].format(d['Cost'])+'M' : 'N/A'; let costReal = isNum(d['Real cost']) ? dataDict['Real cost'].format(d['Real cost'])+'M' : 'N/A'; let costKm = isNum(d['Cost/km (Millions)']) ? dataDict['Cost/km (Millions)'].format(d['Cost/km (Millions)'])+'M' : 'N/A'; tipContent += `${d.Line}
${d.City}, ${data.placeMap.get(d.Country)[0].entity} (${d.Country})
` tipContent += `Length: ${length} km (${tunnel} Tunnel)
` tipContent += `Time: ${start} - ${end} ${duration}
` tipContent += `Stations: ${stations}
` tipContent += `Cost: ${cost} (${d['Currency']})
` tipContent += `PPP Rate: ${ppp} (${d['Year']})
` tipContent += `Real Cost: ${costReal} (${costKm}/km)` return tipContent; }3a:[{"id":"93c24014cbb36470ec3ff5f76b6f203919aa4e323585f4cb718647c33775f57fff84a813c63db0ba2ad3c53bef6ce583e339eb7c9edd2c91b0a57acc7815593a","href":"https://static.observableusercontent.com/files/93c24014cbb36470ec3ff5f76b6f203919aa4e323585f4cb718647c33775f57fff84a813c63db0ba2ad3c53bef6ce583e339eb7c9edd2c91b0a57acc7815593a","name":"TM-World-List-0.3.csv","type":"text/csv","lastModified":1606111210997.818,"size":16872},{"id":"e31071d9b272b1046e3069242a5cef11a09ed6dea68148c3412eaf3f511be5efc0511294118fdbfcdae3004e4eda907ce8a2cb1a3a19875db3d2a95133818a66","href":"https://static.observableusercontent.com/files/e31071d9b272b1046e3069242a5cef11a09ed6dea68148c3412eaf3f511be5efc0511294118fdbfcdae3004e4eda907ce8a2cb1a3a19875db3d2a95133818a66","name":"geopolitical-entities.tsv","type":"text/tab-separated-values","lastModified":1605326499468.788,"size":12128},{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1607056615360.888,"size":107761},{"id":"b20edd9763e8128630b3560c2af904668aa8ac8590941be52440b3b0dc3ee03d2c7cae790f520592ae484aaff57a78d4381532fc6ef2be35c293c97ffd98a59c","href":"https://static.observableusercontent.com/files/b20edd9763e8128630b3560c2af904668aa8ac8590941be52440b3b0dc3ee03d2c7cae790f520592ae484aaff57a78d4381532fc6ef2be35c293c97ffd98a59c","name":"Merged-Costs-(1.0)-Edit@1.tsv","type":"text/tab-separated-values","lastModified":1607065176788.021,"size":111491},{"id":"2de4c685550ab694717f2b015ace3d5af9099aa82fe97a4011d231497830bdf2ee91e807ddb4d95ab338683f989fa86f7c849406b160c3f3b7da051848e9e723","href":"https://static.observableusercontent.com/files/2de4c685550ab694717f2b015ace3d5af9099aa82fe97a4011d231497830bdf2ee91e807ddb4d95ab338683f989fa86f7c849406b160c3f3b7da051848e9e723","name":"transit-cities.csv","type":"text/csv","lastModified":1607141651930.425,"size":5426}] 2f:{"title":"Transit Cost Sketches","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"md`## Project Explorer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof bSelect = inputsGroup(\n[\n [\n select({\n // title: 'X Value',\n description: 'Select Map or Value for X axis force (pulls left/right)',\n options: [\n { value: 'map', label: 'Map (Cities)'},\n { value: 'Length', label: 'Route Length'},\n { value: 'Tunnel', label: 'Tunnel Length'},\n { value: 'Stations', label: 'Stations'},\n { value: 'PPP rate', label: 'PPP Rate'},\n { value: 'Real cost', label: 'Real Cost (Millions $)'},\n { value: 'Cost/km (Millions)', label: 'Cost/km (Millions $)'}\n ],\n value: 'map' // set initial value\n })\n ]\n],\n \n[\n ['x']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"beeswarm.updateView(state) // this cell is what fires the transition!","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"viewof state = select([1,2,3,4])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1578,"value":"//beeswarm.update2(state) // this cell is what fires the transition!","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`#### Notes\n+ Complete notes on the dataset sources and methodology is accssible on the [project site](https://transitcosts.com/data/).\n+ The notes mention that most projects exclude the cost rolling stock, but the current version did not appear to note where is when it was included.\n+ The visualization is currently running off a copy of the data, but could eventually be linked directly\n

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`## Testing Other Visualizations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"md`### Circle Pack\nProjects grouped by country and city\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"viewof circlePackSelect = inputsGroup(\n[\n [\n select({\n // title: 'X Value',\n description: 'Select value for inner bubble',\n options: [\n { value: 'Length', label: 'Route Length'},\n { value: 'Tunnel', label: 'Tunnel Length'},\n { value: 'Stations', label: 'Stations'},\n { value: 'Real cost', label: 'Real Cost (Millions $)'},\n { value: 'Cost/km (Millions)', label: 'Cost/km (Millions $)'}\n ],\n value: 'Length' // set initial value\n })\n ]\n],\n \n[\n ['r']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"hierarchy = {\n let config = {\n dataset: data.set,\n groupByFns: [d => d.Country, d => d.City, d => d.id],\n reduceFn: v => d3.sum(v, d => d[circlePackSelect])\n}\n \n const defaultConfig = {\n childrenAccessorFn: ([key, value]) => value.size && Array.from(value),\n sumFn: ([key, value]) => value,\n sortFn: (a, b) => b.value - a.value,\n };\n const { dataset, reduceFn, groupByFns, childrenAccessorFn, sumFn, sortFn } = { ...defaultConfig, ...config };\n const rollupData = d3.rollup(dataset, reduceFn, ...groupByFns);\n const hierarchyData = d3.hierarchy([null, rollupData], childrenAccessorFn)\n .sum(sumFn)\n .sort(sortFn);\n return hierarchyData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`### Scatterplot\nNote: some projects with missing values drop to the x/y axis lines.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`### Construction Timeline\nOnly projects with a defined start and end year are displayed (${data.setDuration.length} of ${data.set.length}). \n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"viewof durationSelect = inputsGroup(\n[\n [\n select({\n // title: 'Order by',\n description: 'Line Order',\n options: [\n { value: 'start', label: 'Start Year'},\n { value: 'end', label: 'End Year'},\n ],\n value: 'start' // set initial value\n })\n ]\n],\n \n[\n ['sort']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"md`### Basic Bar\nNumber of projects makes navigation more challenging but shows distribution.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"viewof barSelect = inputsGroup(\n[\n [\n select({\n // title: 'X Value',\n description: 'Select Value',\n options: [\n { value: 'Length', label: 'Route Length'},\n { value: 'Tunnel', label: 'Tunnel Length'},\n { value: 'Stations', label: 'Stations'},\n { value: 'PPP rate', label: 'PPP Rate'},\n { value: 'Real cost', label: 'Real Cost (Millions $)'},\n { value: 'Cost/km (Millions)', label: 'Cost/km (Millions $)'},\n { value: 'cTime', label: 'Construction Time'}\n ],\n value: 'Cost/km (Millions)' // set initial value\n })\n ]\n],\n \n[\n ['y']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"md`## Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`Data Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"dataDict = ({\n\"Start year\": {\n label: \"Construction Started\",\n format: d3.format(\"d\")\n},\n\"End year\": {\n label: \"Construction Ended\",\n format: d3.format(\"d\")\n},\n\"cTime\": {\n label: \"Construction Time\",\n format: d3.format(\"d\")\n},\n\"Length\": {\n label: \"Route Length\",\n format: d3.format(\"(,.1f\")\n},\n\"TunnelPer\": {\n label: \"Tunnel Percent\",\n format: d3.format(\".1%\")\n},\n\"Tunnel\": {\n label: \"Tunnel Length\",\n format: d3.format(\"(,.1f\")\n},\n\"Stations\": {\n label: \"Stations\",\n format: d3.format(\"d\")\n},\n\"Cost\": {\n label: \"Project Cost\",\n format: d3.format(\"(,.0f\")\n},\n\"Currency\": {\n label: \"Currency\",\n},\n\"Year\": {\n label: \"PPP Year\",\n format: d3.format(\"(,.0f\")\n},\n\"PPP rate\": {\n label: \"Purchasing Power Parity (PPP) Rate\",\n format: d3.format(\"(,.2f\")\n},\n\"Real cost\": {\n label: \"Real Cost (Millions $)\",\n format: d3.format(\"($,.0f\")\n},\n\"Cost/km (Millions)\": {\n label: \"Cost/km (Millions $)\",\n format: d3.format(\"($,.0f\")\n}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"md`Tooltip Template`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"md`Formats and Utility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"formatUSD = d3.format(\"($,.0f\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1517,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"md`Referenced`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1130,"value":"world = FileAttachment(\"countries-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"import {inputsGroup} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {select} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}