chartTurnstileSubway = { let height = 450 let margin = {top: 60, right: 80, bottom: 60, left: 100} let innerHeight = height - margin.top - margin.bottom; let innerWidth = width - margin.left - margin.right; let chartid = "chart-turnstile-subway"; const selectType = "val"; const selectGroup = selections.group const selectDivisions = selections.mode; // array of the checkbox selections for filtering let filtered = summarizeDaily(chartSet.filter(d => selections.mode.includes(d.division))).set.filter(d => selectGroup.includes(d.id)) let extData = d3.extent(filtered, d => d[selectType]); // filter data.set for extext let yDomain = [0,extData[1]]; let yLabel = 'Total Entries / Exits'; let chartSource = 'Data: NYC Subway Turnstile Counts on Qri'; 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", chartid); 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(chartSource) .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'); // Notes for no data if (selections.mode.length === 0 || selections.group.length === 0){ group.append("text") .text('Please select at least one value and mode to display') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/2) .style('fill', '#999') .style('font-size', '.85em'); } if (filtered.length === 0){ group.append("text") .text('No Data Available') .attr("text-anchor", "middle") .attr("class", "notification") .attr("x", innerWidth/2) .attr("y", innerHeight/3) .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); let line = d3.line() .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 dataDict[d[0]].rgb }); // Add Line Labels // let lineLabels = group.append("g") // .attr('class', 'line-labels') // lineLabels.selectAll() // .data(data.seriesMode).enter() // .append('text') // .attr('class', 'line-label') // .html(d => dataDict[d[0]].name) // .attr('fill', d => dataDict[d[0]].color) // .attr('alignment-baseline', 'left') // .attr('x', innerWidth) // .attr('dx', '.5em') // .attr('y', d => y(d[1][d[1].length - 1].val)) // .style('font-size', '.7em'); // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d[0]; obj.label = dataDict[obj.id].name; obj.color = dataDict[obj.id].rgb; obj.val = d[1][d[1].length - 1][selectType]; console.log(obj) return obj }) // Force Line Labels - Basic Version 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.selectAll("#" + chartid + " .ts-line") .style('opacity', g => { return g[0] === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-leader") .style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.selectAll("#" + chartid + " .ts-line") .style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .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(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) }) // Chart Area Tooltip // 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('mousemove', chartMouseMove) .on('mouseout', chartMouseOut ); function chartMouseMove(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)]); //it would return 2. // 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.ascending(a.id, b.id)); // Disabled sorting on the lookup since entries is primary. //.sort((a, b) => d3.descending(a[selectType], b[selectType])); // Display and position vertical line d3.select("#" + chartid + " .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, 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 => isNum(d[selectType]) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 3) .attr('fill', d => dataDict[d.id].rgb), update => update .attr('transform', function(d) { return `translate(${x(d.date)},${y(d[selectType])})` }) .attr('opacity', d => isNum(d[selectType]) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Unused Header // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` // tipContent += `` }); tipContent += `

	Ridership	Change
${dataDict[d.id].name}	${format.abs(d.val)}	${formatPercent1d(d.chg)}

`; 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(`${format.date1(hoverDate)}
${tipContent}`); } function chartMouseOut(event){ chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points } return svg.node(); }