31:T322e,citibike_daily_trips = { let height = 360 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = "chart-historical"; let vizDesc = `Line chart of Citi Bike ${chartSelect.N}-Day Moving Average and Daily Trips`; // Accessibility let vizSource = `Data: Analysis of Citi Bike Trip Data`; let dDictionary = ({ "mavg": { "label": "7-day Avg", "color": cbDictionary['citibike'].color, }, "val": { "label": "Daily trips", "color": cbDictionary['citibike'].coloralt, } }) const cVar = 'color'; // color variable from data dictionary const selectVal = "mavg"; // main variable const selectVal2 = "val"; // background comparison const selectGroup = ['citibike'] // set to select/checkboxes if multiple let filtered = citibikeSystemDailyMA.filter(d => d.year >= chartSelect.timeframe[0] && d.year <= chartSelect.timeframe[1]) let extDates = d3.extent(filtered, d => d.date) let extData = d3.extent(filtered, d => d[selectVal2]); // filter data.set for extext let yDomain = [0,extData[1]]; let yLabel = 'Trips'; console.log({extDates, extData, yDomain}) let selectSeries = d3.group(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId) .attr("aria-label", vizDesc); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Label') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("x", ((width - margin.left - margin.right) / 2.0)) // .attr("y", innerHeight + (margin.bottom / 2)); // yAxis Label group.append("text") .attr("class", "chart-y-title") .text(yLabel) .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .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'); // Note for No Data if (selectGroup.length === 0){ group.append("text") .text('Please select a transit mode above to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); // Append Ghosted Total Trips let lineGroupCompare = group.append("g") .attr('class', 'line-group-compare') let lineC = d3.line() .defined(d => !isNaN(d[selectVal2])) .x(d => x(d.date)) .y(d => y(d[selectVal2])) lineGroupCompare.append('g') .attr("opacity", ".2") .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => lineC(d[1])) .attr("class", function(d) { return 'ts-line ts-line-bg-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Add Moving Average Lines let lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => !isNaN(d[selectVal])) .x(d => x(d.date)) .y(d => y(d[selectVal])) lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = cbDictionary[obj.id].name; obj.color = cbDictionary[obj.id].color; obj.val = d[1][d[1].length - 1][selectVal]; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabelR = 10 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) .force('collision', d3.forceCollide().radius(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Group for line highligt points, sits below tootTip area so let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseover', (event) => { console.log('mouseover'); }) .on('mousemove', (event) => { console.log('mousemove'); // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).filter(d => selectGroup.includes(d.id)).sort((a, b) => d3.descending(a[selectVal], b[selectVal])); // Display and position vertical line d3.select("#" + vizId + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // For highlighting multiple points let pointVars = [selectVal, selectVal2] let pointSet = []; let lookupPoints = pointVars.map(g => { let obj = {} obj.id = g obj.date = lookup[0].date obj.val = lookup[0][g] obj.color = dDictionary[g].color pointSet.push(obj); }) console.log({pointSet}) // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(pointSet, g => g.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', g => g.color), update => update .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Update Pattern for the Point Highlights // const yPoint = yPoints.selectAll('g') // .data(lookup) // .join( // enter => enter.append("g") // .attr('class', 'y-highlight-point') // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectVal])})` // }) // .attr('opacity', d => isNum(d[selectVal]) ? 1 : 0) // hide if value is NaN, // .append('circle') // .attr('r', 3) // .attr('fill', d => cbDictionary[d.id][cVar]), // update => update // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectVal])})` // }) // .attr('opacity', d => isNum(d[selectVal]) ? 1 : 0), // hide if value is NaN // exit => exit.remove() // ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `${format.date1(hoverDate)}
` lookup.map( d => { tipContent += `` // Start Table // Interate over selected categories // ${cbDictionary[d.id].name} tipContent += `` tipContent += `` tipContent += `` tipContent += `` if (d.prev) { tipContent += `` tipContent += `` } }) tipContent += `

Total Trips	${format.abs(d.val)}
${chartSelect.N}-Day Avg	${isNum(d.mavg) ? format.abs(d.mavg) : "N/A"}
Active Stations	${format.abs(d.stations)}

`; // Close Table 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(tipContent); // toolTip Content }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + vizId + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + vizId + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }32:T2a78,citibike_daily_active_stations = { let height = 220 let margin = {top: 20, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = "chart-active-stations"; let vizDesc = `Line chart of Citi Bike Daily Active Stations`; // Accessibility let vizSource = `Data: Analysis of Citi Bike Trip Data`; const cVar = 'color'; // color variable from data dictionary const selectVal = "stations"; // main variable //const selectGroup = ridershipCheckbox.mode; // array of the checkbox selections for filtering const selectGroup = ['citibike'] // set to select/checkboxes if multiple // let filtered = citibikeSystemDaily.set.filter(d => selectGroup.includes(d.id)); // let filtered = citibikeSystemDaily.filter(d => d.year >= chartSelect.timeframe[0] && d.year <= chartSelect.timeframe[1]) let extDates = d3.extent(filtered, d => d.date) let extData = d3.extent(filtered, d => d[selectVal]); // filter data.set for extext let yDomain = [0,extData[1]]; let yLabel = 'Stations'; console.log({extDates, extData, yDomain}) let selectSeries = d3.group(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("aria-label", vizDesc) .attr("id", vizId); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Season') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("x", ((width - margin.left - margin.right) / 2.0)) // .attr("y", innerHeight + (margin.bottom / 2)); // yAxis Label group.append("text") .attr("class", "chart-y-title") .text(yLabel) .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .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'); if (selectGroup.length === 0){ group.append("text") .text('Please select a transit mode above to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y).ticks(5); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); // Append Moving Average Lines let lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => !isNaN(d[selectVal])) .x(d => x(d.date)) .y(d => y(d[selectVal])) lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = cbDictionary[obj.id].name; obj.color = cbDictionary[obj.id].color; obj.val = d[1][d[1].length - 1][selectVal]; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabelR = 10 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); // forceLabel.append('rect') // .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) //Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Timeline // drawTimeline(chartid, group, x, innerWidth); // Group for line highligt points, sits below tootTip area so let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseover', (event) => { console.log('mouseover'); }) .on('mousemove', (event) => { console.log('mousemove'); // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).filter(d => selectGroup.includes(d.id)).sort((a, b) => d3.descending(a[selectVal], b[selectVal])); // Display and position vertical line d3.select("#" + vizId + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(lookup) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectVal])})` }) .attr('opacity', d => isNum(d[selectVal]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => cbDictionary[d.id][cVar]), update => update .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectVal])})` }) .attr('opacity', d => isNum(d[selectVal]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `${format.date1(hoverDate)}
` lookup.map( d => { tipContent += `` // Start Table // Interate over selected categories tipContent += `` tipContent += `` // tipContent += `` // tipContent += `` }) tipContent += `

Active Stations	${format.abs(d.stations)}
Total Trips	${format.abs(d.val)}

`; // Close Table 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(tipContent); // toolTip Content }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select("#" + vizId + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + vizId + " .y-highlight-point").remove(); // Remove y-highlight points }); return svg.node(); }33:T2718,citibike_annual_summary = { let height = 280 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = "chart-annual-summar"; let vizDesc = `Line chart of Citi Bike Annual Summary, 2013–Present`; // Accessibility let vizSource = `Data: Analysis of Citi Bike Trip Data`; const cVar = 'color'; const xVar = 'year'; const selectType = annualSelect.metric // "cost_infla"; const selectUnit = (selectType.includes('chg')) ? "chg" : "abs"; const selectGroup = ['citibike'] // fareSelect.type; // array of the checkbox selections for filtering let filtered = citibikeSystemAnnual.filter(d => d.year <= 2020) let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let yDomain = (selectUnit === "chg") ? extData : [0,extData[1]]; let yLableSet = { "trips": 'Total Trips' , "tripsAvg": 'Average Daily' , "chgTrips": 'Change in Total Trips' , "chgAvg": 'Change in Avg Daily' , } let yLabel = yLableSet[selectType]; let extDates = d3.extent(filtered, d => d[xVar]) let selectSeries = d3.groups(filtered, d => d.id); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId) .attr("aria-label", vizDesc); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Season') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("x", ((width - margin.left - margin.right) / 2.0)) // .attr("y", innerHeight + (margin.bottom / 2)); // yAxis Label group.append("text") .attr("class", "chart-y-title") .text(yLabel) .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .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'); if (selectGroup.length === 0){ group.append("text") .text('Please select a fare type to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([10, width - margin.left - margin.right - 10]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); xAxis.tickFormat(d3.format(".0f")); yAxis.tickFormat(format[selectUnit]); //if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); let lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => !isNaN(d[selectType])) .x(d => x(d[xVar])) .y(d => y(d[selectType])) lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'data-line data-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = cbDictionary[obj.id].name; obj.color = cbDictionary[obj.id].color; obj.val = d[1][d[1].length - 1][selectType]; return obj }).sort((a, b) => d3.descending(a.val, b.val)) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabelR = 10 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d, i) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; //d.y = y(d.val); d.y = innerHeight/3 + (i * 15); // initializes the labels in a stepped return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .data-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .data-point") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .data-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .data-point") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); // forceLabel.append('rect') // .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) //Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) let linePoints = group.append("g") .attr('class', 'data-points') let linePoint = linePoints.append('g') .selectAll('data-point') .data(filtered) .join('g') .attr("class", function(d) { return `data-point point-${d.year}` }) .attr('transform', d => `translate(${x(d[xVar])},${y(d[selectType])})`); linePoint.append('circle') .attr("r", 3) .attr("class", "point-circle") .attr('pointer-events', 'none') .attr("fill", d => cbDictionary[d.id].color); linePoint.append('circle') .attr("r", 8) .attr("fill", "#FFF") .attr("fill-opacity", 0) .attr("class", "point-hover") .on('mouseover', pointMouseOver) .on('mouseout', pointMouseOut ); function pointMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); //d3.select(`.station-${d['station_id']} .bubble`) d3.select(`#${vizId} .point-${d[xVar]} .point-hover`) .transition() .attr('stroke', 'orange') .attr('stroke-width', 2); let tipContent = ``; tipContent += `

${cbDictionary[d.id].name} ${d.year}

`; tipContent += `Days Open: ${format.abs(d.days)}
`; tipContent += `Total Trips
`; tipContent += `${format.abs(d.trips)}` if(d.chgTrips){ tipContent += ` (${d.chgTrips > 0 ? '+' : ''}${format.chg(d.chgTrips)})`; } tipContent += `
` tipContent += `Average Trips
`; tipContent += `${format.abs(d.tripsAvg)}` if(d.chgTripsAvg){ tipContent += ` (${d.chgTripsAvg > 0 ? '+' : ''}${format.chg(d.chgTripsAvg)})`; } tipContent += `
` console.log(event) 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(`${tipContent}`); } function pointMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); chartTip.style("display", "none"); // Hide toolTip d3.select(`#${vizId} .point-${d[xVar]} .point-hover`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } return svg.node(); }34:T29d7,citibike_borough_annual = { let height = 280 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = `chart-borough-annual`; // Accessibility let vizDesc = `Line chart of Citi Bike Annual Trips by Borough, 2013–2020`; let vizSource = `Data: Analysis of Citi Bike Trip Data`; const cVar = 'color'; const xVar = 'year'; const selectGroup = boroughAnnualSelect.boro; const selectType = boroughAnnualSelect.metric // "cost_infla"; const selectUnit = (selectType.includes('chg')) ? "chg" : "abs"; let filtered = citibikeBoroughAnnual.filter(d => selectGroup.includes(d.id) && d.year <= 2020) let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let yDomain = (selectUnit === "chg") ? extData : [0,extData[1]]; // let seriesDict = { // 'MN': {'label': 'Manhattan', 'color': 'rgb(0, 152, 228)'}, // 'BK': {'label': 'Brooklyn', 'color': 'rgb(0, 152, 228)'}, // 'QN': {'label': 'Queens', 'color': 'rgb(0, 152, 228)'}, // 'BX': {'label': 'Bronx', 'color': 'rgb(0, 152, 228)'}, // 'JC': {'label': 'Jersey City', 'color': 'rgb(0, 152, 228)'} // } let seriesDict = { 'MN': {'label': 'Manhattan', 'color': '#00ABE7'}, 'BK': {'label': 'Brooklyn', 'color': '#003B64'}, 'QN': {'label': 'Queens', 'color': '#00639B'}, 'BX': {'label': 'Bronx', 'color': '#0087CA'}, 'JC': {'label': 'Jersey City', 'color': '#001932'} } let yLableSet = { "starts": 'Total Trips' , "startsAvg": 'Average Daily' , "chgStarts": 'Change in Total Trips' , "chgStartsAvg": 'Change in Average Daily' , } let yLabel = yLableSet[selectType]; let extDates = d3.extent(filtered, d => d[xVar]) let selectSeries = d3.groups(filtered, d => d.id); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("aria-label", vizDesc) .attr("id", vizId); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Season') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("x", ((width - margin.left - margin.right) / 2.0)) // .attr("y", innerHeight + (margin.bottom / 2)); // yAxis Label group.append("text") .attr("class", "chart-y-title") .text(yLabel) .attr("text-anchor", "middle") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .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'); if (selectGroup.length === 0){ group.append("text") .text('Please select a fare type to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } let x = d3.scaleTime() .range([10, width - margin.left - margin.right - 10]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(yDomain) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y); xAxis.tickFormat(d3.format(".0f")); yAxis.tickFormat(format[selectUnit]); //if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); let lineGroup = group.append("g") .attr('class', 'line-group') let line = d3.line() .defined(d => !isNaN(d[selectType])) .x(d => x(d[xVar])) .y(d => y(d[selectType])) lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'data-line data-line-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return seriesDict[d[0]].color //return cbDictionary[d[0]].color }); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = seriesDict[obj.id].label; obj.color = seriesDict[obj.id].color; obj.val = d[1][d[1].length - 1][selectType]; return obj }).sort((a, b) => d3.descending(a.val, b.val)) // Force Line Labels - Basic Version let forceLabelOffset = 14 let forceLabelR = 10 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d, i) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; //d.y = y(d.val); d.y = innerHeight/3 + (i * 15); // initializes the labels in a stepped return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .data-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .data-point") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .data-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .data-point") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); // forceLabel.append('rect') // .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(forceLabelR)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels d.y = Math.max(forceLabelR, Math.min((innerHeight+margin.bottom/2) - forceLabelR, d.y)) //Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) let linePoints = group.append("g") .attr('class', 'data-points') let linePoint = linePoints.append('g') .selectAll('data-point') .data(filtered) .join('g') .attr("class", function(d) { return `data-point point-${d.id}-${d.year}` }) .attr('transform', d => `translate(${x(d[xVar])},${y(d[selectType])})`); linePoint.append('circle') .attr("r", 3) .attr("class", "point-circle") .attr('pointer-events', 'none') .attr("fill", d => seriesDict[d.id].color); linePoint.append('circle') .attr("r", 8) .attr("fill", "#FFF") .attr("fill-opacity", 0) .attr("class", "point-hover") .on('mouseover', pointMouseOver) .on('mouseout', pointMouseOut ); function pointMouseOver(event, d){ d3.select(event.target).style("cursor", "pointer"); //d3.select(`.station-${d['station_id']} .bubble`) d3.select(`#${vizId} .point-${d.id}-${d.year} .point-hover`) .transition() .attr('stroke', 'orange') .attr('stroke-width', 2); let tipContent = ``; tipContent += `

${seriesDict[d.id].label} ${d.year}

`; tipContent += `Days Open: ${format.abs(d.days)}
`; tipContent += `Total Trips
`; tipContent += `${format.abs(d.starts)}` if(d.chgStarts){ tipContent += ` (${d.chgStarts > 0 ? '+' : ''}${format.chg(d.chgStarts)})`; } tipContent += `
` tipContent += `Average Daily
`; tipContent += `${format.abs(d.startsAvg)}` if(d.chgStartsAvg){ tipContent += ` (${d.chgStartsAvg > 0 ? '+' : ''}${format.chg(d.chgStartsAvg)})`; } tipContent += `
` console.log(event) 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(`${tipContent}`); } function pointMouseOut(event, d){ d3.select(event.target).style("cursor", "default"); chartTip.style("display", "none"); // Hide toolTip d3.select(`#${vizId} .point-${d.id}-${d.year} .point-hover`) .transition() .attr('stroke', '#FFF') .attr('stroke-width', 0); } return svg.node(); }35:T370a,chart_change_mo = { let height = 360 let margin = {top: 40, right: 140, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let vizId = `chart-change-over-mo-avg`; // Accessibility let vizDesc = `Line chart of Citi Bike 7-Day moving average and daily total trips change over equivalent month average of the previous year`; let vizSource = `Data: Analysis of Citi Bike Trip Data`; const selectType = "chgMov7MoAvg"; const selectType2 = "chgMoAvg"; const selectGroup = ['citibike'] const dDictionary = { "chgMov7MoAvg": { "desc": "7-day avg trips over previous year monthly avg", "label": "7-day Avg Change", "color": cbDictionary['citibike'].color, }, "chgMoAvg": { "desc": "Daily trips previous year monthly avg", "label": "Daily Trips Change", "color": cbDictionary['citibike'].coloralt, } } // New logic for checkbox set //let filtered = citibikeSystemDaily.filter(d => selectGroup.includes(d.id) && (d.year > 2019) ); let filtered = citibikeSystemDaily.filter(d => d.year >= chartSelect2.timeframe[0] && d.year <= chartSelect2.timeframe[1]) let extData = d3.extent(filtered, d => d[selectType2]); let extDates = d3.extent(filtered, d => d.date) let selectSeries = d3.group(filtered, d => d.id); let selectLookup = d3.group(filtered, d => d.date.toISOString()) let selectDates = Array.from(selectLookup).map(d => d[1][0].date); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", vizId) .attr("aria-label", vizDesc); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // xAxis Label // group.append("text") // .text('Season') // .attr("text-anchor", "middle") // .attr("class", "graph-title") // .attr("y", innerHeight + (margin.bottom / 2)) // .attr("x", ((width - margin.left - margin.right) / 2.0)); // yAxis Label group.append("text") .text('Change in Trips') .attr("text-anchor", "middle") .attr("class", "graph-title") .attr("transform", "translate(" + (0 - margin.left * 0.75) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#555') .style('font-size', '.85em'); // Source group.append("text") .attr("class", "graph-source") .text(vizSource) .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'); let x = d3.scaleTime() .range([0, width - margin.left - margin.right]) .domain(extDates) let y = d3.scaleLinear() .range([innerHeight, 0]) .domain(extData) .nice(); let xAxis = d3.axisBottom(x); let yAxis = d3.axisLeft(y).tickFormat(d3.format(".0%")); if (width < 700) { xAxis.tickFormat(d3.timeFormat("%b")); } group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis); group.append("g") .attr("class", "y axis") .call(yAxis); group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); group.append("line") .attr("class", "baseline") .attr('x1', 0) .attr('x2', innerWidth) .attr('y1', y(0)) .attr('y2', y(0)) .attr('stroke-dasharray', '5,5') .style('stroke', '#AAA'); // Append Ghosted Daily Ridership let lineGroupCompare = group.append("g") .attr('class', 'line-group-compare') let lineC = d3.line() .defined(d => !isNaN(d[selectType2])) .x(d => x(d.date)) .y(d => y(d[selectType2])) lineGroupCompare.append('g') .attr("opacity", ".2") .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => lineC(d[1])) .attr("class", function(d) { return 'ts-line ts-line-bg-' + d[0]; // }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Add Lines let line = d3.line() .defined(d => !isNaN(d[selectType])) .x(d => x(d.date)) .y(d => y(d[selectType])) let lineGroup = group.append("g") .attr('class', 'line-group') lineGroup.append('g') .selectAll('path') .data(selectSeries) .join('path') .attr('d', (d) => line(d[1])) .attr("class", function(d) { return 'ts-line ts-line-' + d[0]; }) .attr("fill", "none") .style("stroke", function(d) { return cbDictionary[d[0]].color }); // Add Line Labels // Label Object let labelSet = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0] obj.label = cbDictionary[obj.id].name obj.color = cbDictionary[obj.id].color obj.val = d[1][d[1].length - 1][selectType] return obj }) // Force Line Labels // VAR REF chartid, innerWidth, y labelset let forceLabelOffset = 14 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelSet) .join('line') .attr("class", 'lfl-leader') .attr('x1', innerWidth + 2) .attr('x2', innerWidth + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelSet) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = innerWidth + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }).on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + vizId + " .ts-line") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + vizId + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => cbDictionary[d.id].name) .attr('fill', d => cbDictionary[d.id].color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em'); forceLabel.append('rect') .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelSet) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(innerWidth + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(10)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { d.x = innerWidth + forceLabelOffset; // constrain x for all labels return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // // Add Timeline // let showTimeline = true; // Consider update to control // if (showTimeline) { // drawTimeline(chartid, group, x, innerWidth); // } // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all') .on('mouseout', function (event) { // on mouse out hide line, circles and text d3.select(".mouse-line") .style("opacity", "0"); d3.selectAll(".mouse-per-line circle") .style("opacity", "0"); d3.selectAll("#tooltip") .style('display', 'none') }) .on('mousemove', (event) => { // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) let bisect = d3.bisector(function(d) { return d; }).right; let hoverDate = (selectDates[bisect(selectDates, invert)]); // 1) Lookup/Get values by date 2) Filter by selection group 3) Sort by top values let lookup = selectLookup.get(hoverDate.toISOString()).filter(d => selectGroup.includes(d.id)).sort((a, b) => d3.descending(a[selectType], b[selectType])); // Display and position vertical line d3.select("#" + vizId + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // For highlighting multiple points let pointVars = [selectType, selectType2] let pointSet = []; let lookupPoints = pointVars.map(g => { let obj = {} obj.id = g obj.date = lookup[0].date obj.val = lookup[0][g] pointSet.push(obj); }) console.log({pointSet}) // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(pointSet, g => g.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', g => dDictionary[g.id].color), update => update .attr('transform', g => `translate(${x(g.date)},${y(g.val)})`) .attr('opacity', g => isNum(g.val) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Update Pattern for the Point Highlights // const yPoint = yPoints.selectAll('g') // .data(lookup, d => d.id) // .join( // enter => enter.append("g") // .attr('class', 'y-highlight-point') // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectType])})` // }) // .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0) // hide if value is NaN, // .append('circle') // .attr('r', 3) // .attr('fill', d => cbDictionary[d.id].rgb), // update => update // .attr('transform', function(d) { // return `translate(${x(d.date)},${y(d[selectType])})` // }) // .attr('opacity', d => !isNaN(d[selectType]) ? 1 : 0), // hide if value is NaN // exit => exit.remove() // ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += `${format.date1(hoverDate)}
` lookup.map( d => { tipContent += `` // Start Table // Interate over selected categories // ${cbDictionary[d.id].name} tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` if (d.prev) { tipContent += `` tipContent += `` tipContent += `` } }) tipContent += `

	Trips	Change
Total	${format.abs(d.val)}	${format.percent1d(d.chgMoAvg)}
7-Day Avg	${isNum(d.mavg7) ? format.abs(d.mavg7) : "N/A"}	${isNum(d.mavg7) ? format.percent1d(d.chgMov7MoAvg) : "N/A"}
${d.prev} Avg	${format.abs(d.prevMoAvg)}

`; // Close Table // tipContent += `` // Start Table // // Interate over selected categories // lookup.map( d => { // tipContent += `` // tipContent += `` // tipContent += `` // }) // tipContent += `

	Change	Ridership
${cbDictionary[d.id].name}	${format.percent1d(d.chgMoAvg)}	${format.abs(d.val)}

`; // Close Table // Display chartTip with Custom Content 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(tipContent); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip d3.select(`#${vizId} .y-highlight`).style('opacity', 0); // Hide y-highlight line d3.selectAll(`#${vizId} .y-highlight-point`).remove(); // Remove y-highlight points }); return svg.node(); // Return SVG }36:[] 2f:{"title":"NYC Citi Bike Trips Overview","cells":[{"id":0,"value":"md`# NYC Citi Bike Trips Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`This notebook is a visual overview of Citi Bike trips in New York City and Jersey City. The data is an aggregate of the raw trip data published by [Citi Bike](https://www.citibikenyc.com/system-data) based on the [process](https://medium.com/qri-io/building-a-daily-aggregate-dataset-from-raw-citibike-trip-data-2b6502009871) shared by [Chris Whong](https://twitter.com/chris_whong). I applied the same method over the full trips dataset to produce a systemwide count of trips by station that are summarized here daily and annually. It does not represent the official ridership but should trend close to any adjusted numbers.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`## Daily Trips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Citi Bike Daily Trips, ${(chartSelect.timeframe[0] === chartSelect.timeframe[1] ? chartSelect.timeframe[0] : chartSelect.timeframe[0]+'–'+chartSelect.timeframe[1])}\n${chartSelect.N}-Day moving average and daily total trips\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof chartSelect = inputsGroup(\n[\n [\n \n rangeSlider({\n min: 2013,\n max: 2021,\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [2013, 2021],\n //title: 'Select Timeframe',\n color: '#2d76f6', // match standard slider color\n description: 'Select Timeframe',\n}),\n slider({\n min: 1, \n max: 21, \n step: 1, \n value: 7, \n // title: \"Window\",\n description: \"N (days), used to calculate moving averages.\"\n })\n \n ]\n],\n \n[\n ['timeframe','N']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`### Active Stations\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`## Annual Trips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`### Citi Bike Annual Trips, 2013–2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof annualSelect = inputsGroup(\n[\n [\n select({\n //title: 'Metric',\n description: 'Metric',\n options: [\n { value: 'trips', label: 'Total Trips'},\n { value: 'tripsAvg', label: 'Average Daily'},\n { value: 'chgTrips', label: 'Change in Total'},\n { value: 'chgAvg', label: 'Change in Avg Daily'},\n ],\n value: ['tripsAvg']\n })\n ]\n],\n \n[\n ['metric']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`### Citi Bike Annual Trips by Borough, 2013–2020\nNew York City Boroughs and Jersey City\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof boroughAnnualSelect = inputsGroup(\n[\n [\n select({\n //title: 'Metric',\n description: 'Metric',\n options: [\n { value: 'starts', label: 'Total Trips'},\n { value: 'startsAvg', label: 'Average Daily Trips'},\n { value: 'chgStarts', label: 'Change in Total Trips'},\n { value: 'chgStartsAvg', label: 'Change in Average Daily Trips'},\n ],\n value: ['tripsAvg']\n }),\n checkbox({\n // title: 'Modes',\n description: 'Filter service areas for display',\n options: [\n { value: 'MN', label: 'Manhattan'},\n { value: 'BK', label: 'Brooklyn'},\n { value: 'QN', label: 'Queens'},\n { value: 'BX', label: 'Bronx'},\n { value: 'JC', label: 'Jersey City'},\n ],\n value: ['MN','BK','QN','BX','JC' ]\n }) \n ]\n],\n \n[\n ['metric', 'boro']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`## Exploring Change\nBased on an interest in seeing daily trips compared over the previous year (and specifically for 2020), I was exploring a way to have a more automated way to generating calculating the value. I had settled on comparing daily trips to the equivalent month average of the previous year and then further refining that method by using the 7-day average of the current day instead of total trips. This seems to avoid some of the spikes that could be caused due to the alignment of holidays and provide a more readable trend line. I didn't find much in the way of publically posted methodologies and would be interested to know how this compares or if there are improved methods.\n\nI've also done a [more in depth comparison of 2019 to 2020](https://observablehq.com/@benoldenburg/nyc-citi-bike-trips-change-2019-2020).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`### Citi Bike Change in Trips, ${(chartSelect2.timeframe[0] === chartSelect2.timeframe[1] ? chartSelect2.timeframe[0] : chartSelect2.timeframe[0]+'–'+chartSelect2.timeframe[1])}\n7-Day moving average and daily total trips change over equivalent month average of the previous year\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof chartSelect2 = inputsGroup(\n[\n [\n \n rangeSlider({\n min: 2013,\n max: 2021,\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [2019, 2021],\n //title: 'Select Timeframe',\n color: '#2d76f6', // match standard slider color\n description: 'Select Timeframe',\n})\n ]\n],\n \n[\n ['timeframe']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`## Data / Notes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`\n+ These visualizations reference data from my [source observable notebook](https://observablehq.com/@benoldenburg/nyc-citi-bike-trip-data) that has additional information on the process and all base datasets\n+ The data doesn't represent the official ridership but should trend close to any adjusted numbers. Citi Bike's [2020 Review](https://mailchi.mp/b37132f25f10/2020-year-in-review-399565?e=3471a1a56a) cited the highest day ever of 103,139 rides on 9/12/2020 which is only 264 trips (0.25%) off from the 103,403 trip that appear in this data, so there may be additional administrative/service trips that did not get filtered out of the source data.\n+ Active stations are based on the number of stations that record at least one trip start on a given day rather than an official list of stations. It would likely fluctuate due to stations that might be closed for maintenance, for weather/snow, or the appearance of some test station trips that were not fully filtered out.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"// Applies a moving average if using an input to the citibikeSystemDaily \ncitibikeSystemDailyMA = {\n let result = {};\n let movingAvgSet = movingAverage(citibikeSystemDaily.map(e => e.val), chartSelect.N)\n \n result.set = citibikeSystemDaily.map((d, i) => {\n d.mavg = movingAvgSet[i]\n d.chgMovMoAvg = (d.mavg - d.prevMoAvg)/d.prevMoAvg; // prevMoAvg\n return d\n })\n return result.set;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {citibikeSystemDaily, cbParsedBoroughDaily, citibikeSystemAnnual, citibikeBoroughAnnual, cbDictionary} from '@benoldenburg/nyc-citi-bike-trip-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`## Utilites`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"format = ({\n date1: d3.timeFormat(\"%a, %b %e %Y\"), // Timeline Tooltip Date Format\n date2: d3.timeFormat(\"%b %e %Y\"), // Timeline Tooltip Date Format\n percent1d: d3.format(\".1%\"),\n pct: d3.format(\".0%\"),\n abs: d3.format(\",.0f\"),\n avg: d3.format(\"(,.1f\"),\n chg: d3.format(\".1%\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"modeDictionary = ({\n citibike: {\n name: \"Citi Bike\",\n color: '#0098E4', // 'rgb(0, 152, 228)'\n coloralt: '#8DA6B9',\n },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {inputsGroup, chartTip} from '@benoldenburg/mta-daily-ridership-recovery'","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"// Moving Average Function from @d3/moving-average\nfunction movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}