25:["$","title",null,{"children":"VTTI with chainage input | Ayush Roy's Workspace | Observable"}] 49:T50d,# Instructions for Interacting with the Road Condition Visualization: ## 1. Understanding the Map: The map is color-coded to indicate the condition of the roads, with **green** representing roads that are less affected and **red** representing roads that are more affected. ## 2. Selecting a Point on the Road: - Click on any point along the road on the map. - By default, this will display a graph showing the **International Roughness Index (IRI) vs. Chainage** for the selected point. ## 3. Choosing a Parameter for Visualization: - If you wish to visualize a different parameter, select the desired parameter from the available options. - The graph will update to reflect the selected parameter against the chainage. ## 4. Interacting with the Graph: - After viewing the graph, you can select any point on the graph. - Upon selection, a **Slope Deflection Bowl** will appear, corresponding to that chainage point. ### Further Analysis of Deflection: - To conduct a detailed analysis, click on a specific deflection within the **Slope Deflection Bowl**. - This action will generate two additional graphs: - **Deflection vs. Chainage Graph**: Displays how deflection varies along the chainage. - **Summary Graph**: Provides an overview of the selected deflection's characteristics. 4a:T44f,{ // Create the map container and initialize the map const div = html`

`; yield div; const map = L.map(div).setView([35.5187944, -78.28778334], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); // Create an SVG overlay const overlay = d3.select(map.getPanes().overlayPane) .append("svg") .attr("class", "leaflet-zoom-hide") .style("width", map.getSize().x + "px") .style("height", map.getSize().y + "px"); // Remove any existing layers, particularly useful for redrawing the map map.eachLayer(layer => { if (layer instanceof L.Polyline) { layer.remove(); } }); // Plot each segment on the map const thresholds = {low: 2.5, medium: 5, high: 7.5}; // Default threshold values Object.keys(road_data).forEach(key => { if (Array.isArray(road_data[key])) { road_data[key].forEach(segment => { plotSegment(segment, thresholds, map); }); } }); return map; }4b:T521,function plotSegment(segment, thresholds, map) { let roadCoordinates = [ [parseFloat(segment['FROM_LATITUDE (deg)']), parseFloat(segment['FROM_LONGITUDE (deg)'])], [parseFloat(segment['TO_LATITUDE (deg)']), parseFloat(segment['TO_LONGITUDE (deg)'])] ]; let color = getColor(segment['PERCENT_TOTAL_CRACK (%)'], thresholds); const polyline = L.polyline(roadCoordinates, { color: color, weight: 5, opacity: 0.8 }).addTo(map); // Create a tooltip that will show the coordinates on hover const tooltip = L.tooltip({ permanent: false, direction: 'auto' }); polyline.bindTooltip(tooltip); polyline.on('mouseover', function(e) { // Update the tooltip content with the latitude and longitude const latlng = e.latlng; tooltip.setContent(`Latitude: ${latlng.lat.toFixed(6)}, Longitude: ${latlng.lng.toFixed(6)}`); }); polyline.on('mouseout', function() { polyline.closeTooltip(); }); // On click, save the current coordinates permanently to the mutable variable polyline.on('click', function(e) { // Update the mutable variable with the current coordinates mutable mutableSelectedCoords = e.latlng; // Save the coordinate permanently on click }); }4c:T6ec,function findClosestRoadId(road_data, coords) { let closestRoadId = null; let minDistance = Infinity; let closestFromCoords = null; let closestToCoords = null; Object.keys(road_data).forEach(key => { road_data[key].forEach(segment => { if (segment['FROM_LATITUDE (deg)'] && segment['FROM_LONGITUDE (deg)'] && segment['TO_LATITUDE (deg)'] && segment['TO_LONGITUDE (deg)']) { // Calculate distances from both 'from' and 'to' coordinates of the segment let fromDistance = getDistanceFromLatLonInKm(segment['FROM_LATITUDE (deg)'], segment['FROM_LONGITUDE (deg)'], coords.lat, coords.lng); let toDistance = getDistanceFromLatLonInKm(segment['TO_LATITUDE (deg)'], segment['TO_LONGITUDE (deg)'], coords.lat, coords.lng); // Determine which point is closer let smallerDistance = Math.min(fromDistance, toDistance); // Update closest road if a new smaller distance is found if (smallerDistance < minDistance) { minDistance = smallerDistance; closestRoadId = segment.ROAD_SECTION_ID; // Update the closest coordinates closestFromCoords = { lat: segment['FROM_LATITUDE (deg)'], lng: segment['FROM_LONGITUDE (deg)'] }; closestToCoords = { lat: segment['TO_LATITUDE (deg)'], lng: segment['TO_LONGITUDE (deg)'] }; } } else { console.log(`Missing or incorrect coordinate data in segment: ${segment.ROAD_SECTION_ID}`); } }); }); return { roadId: closestRoadId, fromCoordinates: closestFromCoords, toCoordinates: closestToCoords }; }4d:T422,function filterDataByRoadNo(roadNo, roadData, parameter) { const filteredData = []; // Iterate through each road in the roadData for (let road in roadData) { // Iterate through each segment in the road for (let segment of roadData[road]) { // Check if the segment's ROAD_NO matches the given roadNo if (segment['ROAD_NO'] === roadNo) { // Extract the required fields and add to the filtered data array filteredData.push({ value: segment[parameter], // Use the selected parameter INSIGHT_CHAINAGE_FROM: segment['INSIGHT_CHAINAGE_FROM (mi)'], INSIGHT_CHAINAGE_TO: segment['INSIGHT_CHAINAGE_TO (mi)'] }); } } } // Sort the filtered data in ascending order based on the 'INSIGHT_CHAINAGE_FROM' field filteredData.sort((a, b) => a.INSIGHT_CHAINAGE_FROM - b.INSIGHT_CHAINAGE_FROM); return filteredData; // Return the array containing the filtered and sorted data } 4e:T1816,function createChart(filteredData, targetElementId, yAxisLabel) { console.log("Selected Value:", mutable selectedValue); const colorMapping = { 'IRI_AVG (in/mi)': '#228B22', // Forest Green 'RUT_AVG (in)': '#4C9E98', // Medium Sea Green 'SCI_8': '#B8860B', // Dark Goldenrod 'SCI_12': 'orange', // Orange 'TOTAL_CRACK_LENGTH (ft)': '#6A5ACD' // Slate Blue }; const container = d3.select(`#${targetElementId}`); if (container.empty()) { console.error("Target container not found."); return null; } if (!container.select("svg").empty()) { container.select("svg").remove(); } const margin = { top: 60, right: 30, bottom: 150, left: 60 }, width = 1200 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; const svg = container.append("svg") .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font-family", "Arial, Helvetica, sans-serif") .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); // Add legend const legend = svg.append("g") .attr("transform", "translate(0, -40)"); const legendEntries = Object.entries(colorMapping); legend.selectAll("rect") .data(legendEntries) .enter().append("rect") .attr("x", (d, i) => i * 150) .attr("y", 0) .attr("width", 10) .attr("height", 8) .attr("fill", d => d[1]); legend.selectAll("text") .data(legendEntries) .enter().append("text") .attr("x", (d, i) => i * 150 + 15) .attr("y", 10) .text(d => d[0]) .style("font-size", "12px") .attr("alignment-baseline", "middle") .style("font-weight", "bold"); // Set text to bold const plotData = filteredData.map(d => ({ chainage: (d.INSIGHT_CHAINAGE_FROM + d.INSIGHT_CHAINAGE_TO) / 2, value: d.value, from: d.INSIGHT_CHAINAGE_FROM, to: d.INSIGHT_CHAINAGE_TO })); const x = d3.scaleBand() .domain(plotData.map(d => d.chainage)) .range([0, width]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(plotData, d => d.value)]) .nice() .range([height, 0]); const xTicks = plotData.map((d, i) => i % Math.floor(plotData.length / 10) === 0 ? d.chainage : null).filter(d => d !== null); const xAxis = g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickValues(xTicks).tickFormat(d => d.toFixed(3)).tickSize(5).tickPadding(15)) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end") .style("font-weight", "bold"); // Set text to bold const yAxis = g.append("g") .call(d3.axisLeft(y).tickSize(5).tickPadding(10)) .selectAll("text") .style("font-weight", "bold"); // Set text to bold const tooltip = container.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#fff") .style("border", "1px solid #ccc") .style("padding", "5px") .style("pointer-events", "none") .style("opacity", 0) .style("left", "85%") .style("top", "5%"); const bars = g.selectAll(".bar") .data(plotData) .enter().append("rect") .attr("class", "bar") .attr("x", d => x(d.chainage)) .attr("y", d => y(d.value)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.value)) .attr("fill", colorMapping[mutable selectedValue]) .on("click", function(event, d) { mutable from_chainage = d.from; mutable to_chainage = d.to; mutable selected_chainage = d.chainage; bars.attr("fill", colorMapping[mutable selectedValue]) .attr("width", x.bandwidth()) .attr("y", d => y(d.value)) .attr("height", d => height - y(d.value)); d3.select(this) .attr("fill", "red") .attr("width", x.bandwidth() * 2.5) .attr("y", y(d.value) - 5) .attr("height", height - y(d.value) + 5); tooltip.transition().duration(200).style("opacity", .9); tooltip.html(`Chainage: ${d.chainage.toFixed(3)} mi
Value: ${d.value.toFixed(2)}`); }); svg.append("text") .attr("transform", `translate(${width / 2},${height + margin.top + 80})`) .style("text-anchor", "middle") .style("font-weight", "bold") // Set text to bold .text("Chainage (mi)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left + 55) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-weight", "bold") // Set text to bold .text(yAxisLabel); function updateSelection() { bars.attr("fill", d => d.chainage === selected_chainage ? "red" : colorMapping[selectedValue]) .attr("width", d => d.chainage === selected_chainage ? x.bandwidth() * 2 : x.bandwidth()) .attr("y", d => y(d.value)) .attr("height", d => height - y(d.value)); const selectedData = plotData.find(d => d.chainage === selected_chainage); if (selectedData) { tooltip.transition().duration(200).style("opacity", .9); tooltip.html(`Chainage: ${selectedData.chainage.toFixed(3)} mi
Value: ${selectedData.value.toFixed(2)}`); } else { tooltip.transition().duration(200).style("opacity", 0); } } // Expose updateSelection function for external calls container.node().updateSelection = updateSelection; updateSelection(); return svg.node(); } 4f:Ta50,function filterAndPrepareRoadSegmentData(road_data, road_no, from_chainage, to_chainage) { let displacementData = []; // Initialize the array to store displacement data Object.keys(road_data).forEach(key => { road_data[key].forEach(segment => { // Ensure the segment matches the specified road number and chainage range if (segment['ROAD_NO'] === road_no && segment['INSIGHT_CHAINAGE_FROM (mi)'] >= from_chainage && segment['INSIGHT_CHAINAGE_TO (mi)'] <= to_chainage) { let displacements = { d_18: parseFloat(segment['D-18 (mils)']) || 0, d_12: parseFloat(segment['D-12 (mils)']) || 0, d_8: parseFloat(segment['D-8 (mils)']) || 0, d0: parseFloat(segment['D0 (mils)']) || 0, d8: parseFloat(segment['D8 (mils)']) || 0, d12: parseFloat(segment['D12 (mils)']) || 0, d18: parseFloat(segment['D18 (mils)']) || 0, d24: parseFloat(segment['D24 (mils)']) || 0, d36: parseFloat(segment['D36 (mils)']) || 0, d48: parseFloat(segment['D48 (mils)']) || 0, d60: parseFloat(segment['D60 (mils)']) || 0, d72: parseFloat(segment['D72 (mils)']) || 0 }; let slopes = { slope450: parseFloat(segment['SLOPE-450 (um/m)']) || 0, slope300: parseFloat(segment['SLOPE-300 (um/m)']) || 0, slope200: parseFloat(segment['SLOPE-200 (um/m)']) || 0, slope130: parseFloat(segment['SLOPE130 (um/m)']) || 0, slope215: parseFloat(segment['SLOPE215 (um/m)']) || 0, slope300_2: parseFloat(segment['SLOPE300 (um/m)']) || 0, slope450_2: parseFloat(segment['SLOPE450 (um/m)']) || 0, slope600: parseFloat(segment['SLOPE600 (um/m)']) || 0, slope900: parseFloat(segment['SLOPE900 (um/m)']) || 0, slope1500: parseFloat(segment['SLOPE1500 (um/m)']) || 0 }; displacementData.push({ segmentId: segment['ROAD_SECTION_ID'], x: ['D-18', 'D-12', 'D-8', 'D0', 'D8', 'D12', 'D18', 'D24', 'D36', 'D48', 'D60', 'D72'], y: displacements, slopes }); } }); }); return displacementData; // Return the array containing displacement data for all relevant segments } 50:T1f1b,function createDisplacementChart(displacementData, targetElementId) { console.log("Data for chart:", displacementData); const container = d3.select(`#${targetElementId}`); if (container.empty()) { console.error("Target container not found."); return null; } if (!container.select("svg").empty()) { container.select("svg").remove(); } const margin = { top: 20, right: 140, bottom: 140, left: 80 }, width = 1000 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; const svg = container.append("svg") .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font-family", "Arial, Helvetica, sans-serif") .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scalePoint() .domain(displacementData[0].x) .range([0, width]) .padding(0.5); const slopeX = d3.scalePoint() .domain(Object.keys(displacementData[0].slopes)) .range([0, width]) .padding(0.5); const yDisplacement = d3.scaleLinear() .domain([d3.min(displacementData, d => d3.min(Object.values(d.y))), d3.max(displacementData, d => d3.max(Object.values(d.y)))]) .nice() .range([height, 0]); const ySlope = d3.scaleLinear() .domain([d3.min(displacementData, d => d3.min(Object.values(d.slopes))), d3.max(displacementData, d => d3.max(Object.values(d.slopes)))]) .nice() .range([height, 0]); const xAxis = g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .style("font-weight", "bold"); // Set text to bold const slopeAxis = g.append("g") .attr("transform", `translate(0,${height + 30})`) .call(d3.axisBottom(slopeX).tickFormat(d => { const labels = { 'slope450': 'slope -450', 'slope300': 'slope -300', 'slope200': 'slope -200', 'slope130': 'slope 130', 'slope215': 'slope 215', 'slope300_2': 'slope 300', 'slope450_2': 'slope 450', 'slope600': 'slope 600', 'slope900': 'slope 900', 'slope1500': 'slope 1500' }; return labels[d]; })) .selectAll("text") .style("font-weight", "bold"); // Set text to bold const yAxisLeft = g.append("g") .call(d3.axisLeft(yDisplacement).ticks(5)) .selectAll("text") .style("font-weight", "bold"); // Set text to bold const yAxisRight = g.append("g") .attr("transform", `translate(${width},0)`) .call(d3.axisRight(ySlope).ticks(5)) .selectAll("text") .style("font-weight", "bold"); // Set text to bold const lineDisplacement = d3.line() .x((d, i) => x(displacementData[0].x[i])) .y(d => yDisplacement(d)) .curve(d3.curveLinear); const lineSlope = d3.line() .x((d, i) => slopeX(Object.keys(displacementData[0].slopes)[i])) .y((d, i) => ySlope(displacementData[0].slopes[Object.keys(displacementData[0].slopes)[i]])) .curve(d3.curveLinear); const areaDisplacement = d3.area() .x((d, i) => x(displacementData[0].x[i])) .y0(height) .y1(d => yDisplacement(d)) .curve(d3.curveLinear); const areaSlope = d3.area() .x((d, i) => slopeX(Object.keys(displacementData[0].slopes)[i])) .y0(height) .y1((d, i) => ySlope(displacementData[0].slopes[Object.keys(displacementData[0].slopes)[i]])) .curve(d3.curveLinear); g.append("path") .datum(Object.values(displacementData[0].y)) .attr("fill", "steelblue") .attr("fill-opacity", 0.3) .attr("stroke", "none") .attr("class", "area-displacement") .attr("d", areaDisplacement); g.append("path") .datum(Object.values(displacementData[0].slopes)) .attr("fill", "red") .attr("fill-opacity", 0.3) .attr("stroke", "none") .attr("class", "area-slope") .attr("d", areaSlope); g.append("path") .datum(Object.values(displacementData[0].y)) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("class", "line-displacement") .attr("d", lineDisplacement); g.append("path") .datum(Object.values(displacementData[0].slopes)) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 1.5) .attr("class", "line-slope") .attr("d", lineSlope); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#f4f4f4") .style("border", "1px solid #d4d4d4") .style("padding", "5px") .style("display", "none"); // Add circles for displacement line g.selectAll(".circle-displacement") .data(Object.values(displacementData[0].y)) .enter().append("circle") .attr("class", "circle-displacement") .attr("cx", (d, i) => x(displacementData[0].x[i])) .attr("cy", d => yDisplacement(d)) .attr("r", 4) .attr("fill", "steelblue") .on("mouseover", function(event, d) { tooltip.style("display", "block") .html(`Deflection: ${d} mils`); }) .on("mousemove", function(event) { tooltip.style("left", (event.pageX + 5) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); // Add circles for slope line g.selectAll(".circle-slope") .data(Object.values(displacementData[0].slopes)) .enter().append("circle") .attr("class", "circle-slope") .attr("cx", (d, i) => slopeX(Object.keys(displacementData[0].slopes)[i])) .attr("cy", (d, i) => ySlope(displacementData[0].slopes[Object.keys(displacementData[0].slopes)[i]])) .attr("r", 4) .attr("fill", "red") .on("mouseover", function(event, d) { tooltip.style("display", "block") .html(`Slope: ${d} um/m`); }) .on("mousemove", function(event) { tooltip.style("left", (event.pageX + 5) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left + 90) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("fill", "steelblue") .style("font-weight", "bold") // Set text to bold .text("Deflection (mils)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("y", width + margin.right - 19) // Adjust this value to make the text more visible .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("fill", "red") .style("font-weight", "bold") // Set text to bold .text("Slope (um/m)"); svg.selectAll(".tick text") .on("click", function(event, d) { mutable graphselection = d; console.log("Selected value:", graphselection); // Additional actions can be performed here using the selectedValue }) .style("font-weight", "bold"); // Set text to bold return svg.node(); } 51:T67c,function filterSelectedValuesByChainage(road_data, road_no, chainage, selectedValue) { const valueMapping = { 'D-18': 'D-18 (mils)', 'D-12': 'D-12 (mils)', 'D-8': 'D-8 (mils)', 'D0': 'D0 (mils)', 'D8': 'D8 (mils)', 'D12': 'D12 (mils)', 'D18': 'D18 (mils)', 'D24': 'D24 (mils)', 'D36': 'D36 (mils)', 'D48': 'D48 (mils)', 'D60': 'D60 (mils)', 'D72': 'D72 (mils)' }; let selectedValues = []; // Initialize the array to store selected values Object.keys(road_data).forEach(key => { road_data[key].forEach(segment => { // Ensure the segment matches the specified road number and chainage range if (segment['ROAD_NO'] === road_no && segment['INSIGHT_CHAINAGE_FROM (mi)'] >= chainage.firstChainage && segment['INSIGHT_CHAINAGE_TO (mi)'] <= chainage.lastChainage) { let value = parseFloat(segment[valueMapping[graphselection]]) || 0; selectedValues.push({ segmentId: segment['ROAD_SECTION_ID'], INSIGHT_CHAINAGE_FROM: segment['INSIGHT_CHAINAGE_FROM (mi)'], INSIGHT_CHAINAGE_TO: segment['INSIGHT_CHAINAGE_TO (mi)'], value: value }); } }); }); // Sort the selected values in ascending order based on 'INSIGHT_CHAINAGE_FROM' selectedValues.sort((a, b) => a.INSIGHT_CHAINAGE_FROM - b.INSIGHT_CHAINAGE_FROM); return selectedValues; // Return the array containing the selected values for all relevant segments } 52:T1540,function createDefChart(filteredData, targetElementId, yAxisLabel) { console.log("Data for chart:", filteredData); const container = d3.select(`#${targetElementId}`); if (container.empty()) { console.error("Target container not found."); return null; } if (!container.select("svg").empty()) { container.select("svg").remove(); } const margin = { top: 20, right: 30, bottom: 120, left: 60 }, width = 1200 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; const svg = container.append("svg") .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font-family", "Arial, Helvetica, sans-serif") .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); const plotData = filteredData.map(d => ({ chainage: (d.INSIGHT_CHAINAGE_FROM + d.INSIGHT_CHAINAGE_TO) / 2, value: d.value, from: d.INSIGHT_CHAINAGE_FROM, to: d.INSIGHT_CHAINAGE_TO })); const x = d3.scaleBand() .domain(plotData.map(d => d.chainage)) .range([0, width]) .padding(0.1); const y = d3.scaleLinear() .domain([d3.min(plotData, d => d.value), d3.max(plotData, d => d.value)]) .nice() .range([height, 0]); const xTicks = plotData.map((d, i) => i % Math.floor(plotData.length / 10) === 0 ? d.chainage : null).filter(d => d !== null); const xAxis = g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickValues(xTicks).tickFormat(d => d.toFixed(3)).tickSize(5).tickPadding(15)) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end") .style("font-weight", "bold"); // Set text to bold const yAxis = g.append("g") .call(d3.axisLeft(y).tickSize(5).tickPadding(10)) .selectAll("text") .style("font-weight", "bold"); // Set text to bold const tooltip = container.append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "#fff") .style("border", "1px solid #ccc") .style("padding", "5px") .style("pointer-events", "none") .style("opacity", 0) .style("left", "85%") .style("top", "60%"); const bars = g.selectAll(".bar") .data(plotData) .enter().append("rect") .attr("class", "bar") .attr("x", d => x(d.chainage)) .attr("y", d => d.value < 0 ? y(0) : y(d.value)) .attr("width", d => d.chainage === selected_chainage ? x.bandwidth() * 2 : x.bandwidth()) .attr("height", d => Math.abs(y(d.value) - y(0))) .attr("fill", d => d.chainage === selected_chainage ? "red" : "steelblue") .on("click", function(event, d) { mutable from_chainage = d.from; mutable to_chainage = d.to; mutable selected_chainage = d.chainage; mutable def_value = d.value; bars.attr("fill", "steelblue") .attr("width", x.bandwidth()) .attr("y", d => d.value < 0 ? y(0) : y(d.value)) .attr("height", d => Math.abs(y(d.value) - y(0))); d3.select(this) .attr("fill", "red") .attr("width", x.bandwidth() * 2) .attr("y", d.value < 0 ? y(0) - 5 : y(d.value) - 5) .attr("height", Math.abs(y(d.value) - y(0)) + 5); tooltip.transition().duration(200).style("opacity", .9); tooltip.html(`Chainage: ${d.chainage.toFixed(3)} mi
Value: ${d.value.toFixed(2)}`); }); svg.append("text") .attr("transform", `translate(${width / 2},${height + margin.top + 60})`) .style("text-anchor", "middle") .style("font-weight", "bold") // Set text to bold .text("Chainage (mi)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left + 55) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("fill", "steelblue") .style("font-weight", "bold") // Set text to bold .text(yAxisLabel + " " + "(mils)"); function updateSelection() { bars.attr("fill", d => d.chainage === selected_chainage ? "red" : "steelblue") .attr("width", d => d.chainage === selected_chainage ? x.bandwidth() * 2.5 : x.bandwidth()) .attr("y", d => d.value < 0 ? y(0) : y(d.value)) .attr("height", d => Math.abs(y(d.value) - y(0))); const selectedData = plotData.find(d => d.chainage === selected_chainage); if (selectedData) { tooltip.transition().duration(200).style("opacity", .9); tooltip.html(`Chainage: ${selectedData.chainage.toFixed(3)} mi
Value: ${selectedData.value.toFixed(2)}`); } else { tooltip.transition().duration(200).style("opacity", 0); } } // Expose updateSelection function for external calls container.node().updateSelection = updateSelection; updateSelection(); return svg.node(); } 53:Ta6d,function filterSelectedValuesByChainageRut(road_data, road_no, selected_chainage, from_chainage, to_chainage, graphSelection, def_value) { const valueMapping = { 'D-18': 'D-18 (mils)', 'D-12': 'D-12 (mils)', 'D-8': 'D-8 (mils)', 'D0': 'D0 (mils)', 'D8': 'D8 (mils)', 'D12': 'D12 (mils)', 'D18': 'D18 (mils)', 'D24': 'D24 (mils)', 'D36': 'D36 (mils)', 'D48': 'D48 (mils)', 'D60': 'D60 (mils)', 'D72': 'D72 (mils)' }; const selectedField = valueMapping[graphSelection]; if (!selectedField) { console.error(`Graph selection ${graphSelection} does not have a valid mapping.`); return null; } for (const key in road_data) { if (road_data.hasOwnProperty(key)) { const segments = road_data[key]; for (const segment of segments) { // Ensure the segment matches the specified criteria if (segment['ROAD_NO'] === road_no && segment['INSIGHT_CHAINAGE_FROM (mi)'] <= selected_chainage && segment['INSIGHT_CHAINAGE_TO (mi)'] >= selected_chainage && segment['INSIGHT_CHAINAGE_FROM (mi)'] <= to_chainage && segment['INSIGHT_CHAINAGE_TO (mi)'] >= from_chainage) { let value = parseFloat(segment[selectedField]); if (isNaN(value)) { console.warn(`Parsed value for ${selectedField} is NaN, defaulting to 0.`); value = 0; } let rut = parseFloat(segment['RUT_AVG (in)']); if (isNaN(rut)) { console.warn(`Parsed value for RUT_AVG (in) is NaN, defaulting to 0.`); rut = 0; } return { segmentId: segment['ROAD_SECTION_ID'], INSIGHT_CHAINAGE_FROM: segment['INSIGHT_CHAINAGE_FROM (mi)'], INSIGHT_CHAINAGE_TO: segment['INSIGHT_CHAINAGE_TO (mi)'], value: value, def_value: def_value, rut: rut, iri: parseFloat(segment['IRI_AVG (in/mi)']), sci_8: parseFloat(segment['SCI_8']), sci_12: parseFloat(segment['SCI_12']), percent_crack: parseFloat(segment['PERCENT_TOTAL_CRACK (%)']) }; } } } } return null; // Return null if no matching segment is found } 54:Teff,function plotIriSci8Sci12Rut(data, targetElementId, graphSelection) { console.log("Data for chart:", data); const container = d3.select(`#${targetElementId}`); if (container.empty()) { console.error("Target container not found."); return null; } if (!container.select("svg").empty()) { container.select("svg").remove(); } const margin = { top: 20, right: 30, bottom: 60, left: 100 }, // Increased left margin width = 600 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; const svg = container.append("svg") .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font-family", "Arial, Helvetica, sans-serif") .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const graphData = [ { label: 'IRI', measurement: data.iri }, { label: 'SCI 8', measurement: data.sci_8 }, { label: 'SCI 12', measurement: data.sci_12 }, { label: 'Rut', measurement: data.rut } ]; const colorMapping = { 'IRI': '#228B22', // Forest Green 'SCI 8': '#4C9E98', // Medium Sea Green 'SCI 12': 'orange', // Orange 'Rut': '#6A5ACD' // Slate Blue }; const x = d3.scaleBand() .domain(graphData.map(d => d.label)) .range([0, width]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(graphData, d => d.measurement)]) .nice() .range([height, 0]); svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickSize(1).tickPadding(5)) .selectAll("text") .style("font-size", "14px") .style("font-weight", "bold") // Set text to bold .style("fill", d => colorMapping[d.textContent] || "black"); svg.append("g") .call(d3.axisLeft(y).tickSize(2).tickPadding(5)) .selectAll("text") .style("font-weight", "bold"); // Set text to bold svg.selectAll(".bar") .data(graphData) .enter().append("rect") .attr("class", "bar") .attr("x", d => x(d.label)) .attr("width", x.bandwidth()) .attr("y", d => y(d.measurement)) .attr("height", d => height - y(d.measurement)) .attr("fill", d => colorMapping[d.label]); svg.selectAll(".label") .data(graphData) .enter().append("text") .attr("class", "label") .attr("x", d => x(d.label) + x.bandwidth() / 2) .attr("y", d => y(d.measurement) - 10) .attr("dy", ".45em") .attr("text-anchor", "middle") .style("font-weight", "bold") // Set text to bold .text(d => d.measurement); svg.append("text") .attr("x", width / 2) .attr("y", margin.top - 10) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") // Set text to bold .text(`Summary for ${graphSelection} = ${data.value} mils`); // Add y-axis label dynamically based on graph selection const yAxisLabel = graphData.find(d => d.label === graphSelection)?.label || "Measurement"; svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left + 40) // Increased spacing .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "16px") .style("font-family", "Arial, Helvetica, sans-serif") .style("fill", colorMapping[graphSelection]) .style("font-weight", "bold") // Set text to bold .text(yAxisLabel); return svg.node(); } 55:[{"id":"14ceedbb69a1866c8019dfa25b44d98be3df6431d74065d4315b0f544f9a09fc9d1562f8fc87d47f0080033792927ed148dce667bcf912f0e81a30b86af61578","href":"https://static.observableusercontent.com/files/14ceedbb69a1866c8019dfa25b44d98be3df6431d74065d4315b0f544f9a09fc9d1562f8fc87d47f0080033792927ed148dce667bcf912f0e81a30b86af61578","name":"updated_road_data_new.json","type":"application/json","lastModified":1722572871655.008,"size":45511608},{"id":"a2e8164de50d27cff4c142a4bfa9c9c36baa0b5a1c699c57b3a80938107a14f94b1ecf5be5a58dae1641e5e3e0ded3d134c0fea9bd1ec10ff41a56dd6f5c844b","href":"https://static.observableusercontent.com/files/a2e8164de50d27cff4c142a4bfa9c9c36baa0b5a1c699c57b3a80938107a14f94b1ecf5be5a58dae1641e5e3e0ded3d134c0fea9bd1ec10ff41a56dd6f5c844b","name":"road_data_new.json","type":"application/json","lastModified":1719505872677.341,"size":46100063}] 29:{"id":"af52041653da6129","slug":null,"title":"VTTI with chainage input","thumbnail":"d4eb63916b697e33bdef6216df3c327ab461b1594982b7493759bb9e7537d4ce","access_level":"public","create_time":"$D2024-06-27T16:31:12.677Z","update_time":"$D2024-08-09T19:40:08.335Z","view_time":null,"first_public_time":"$D2024-07-31T05:15:04.852Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"328c629887d3b591","login":"ayush-roy-ws","name":"Ayush Roy's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7085f031bd9789267019138f6c0e1ec822fcd798af1504e697a05cb4e52b4071","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":653,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"68d6d140cf56c7a8","login":"ayush-roy","name":"Ayush Roy","avatar_url":"https://avatars-next.observableusercontent.com/fa11550e0342ffb949f68d63a3bc2f52cc12ff45ccfb6f204dbc0a1b76e5471e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"68d6d140cf56c7a8","login":"ayush-roy","name":"Ayush Roy","avatar_url":"https://avatars-next.observableusercontent.com/fa11550e0342ffb949f68d63a3bc2f52cc12ff45ccfb6f204dbc0a1b76e5471e","tier":null,"role":"editor"},{"type":"team","id":"328c629887d3b591","login":"ayush-roy-ws","name":"Ayush Roy's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7085f031bd9789267019138f6c0e1ec822fcd798af1504e697a05cb4e52b4071","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"VTTI with chainage input","cells":[{"id":0,"value":"# VTTI with chainage input \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":646,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":556,"value":"mutable State = getStateFromCoordsAndId(from_coords.lat, from_coords.lng, initialroadid, road_data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"viewof value = select({\n title: \"Select a Parameter: \",\n description: \"Select a parameter for deflection Bowl\",\n options: [\n { value: 'IRI_AVG (in/mi)', label: 'IRI' },\n { value: 'RUT_AVG (in)', label: 'RUT' },\n { value: 'SCI_8', label: 'SCI 8' },\n { value: 'SCI_12', label: 'SCI 12' },\n { value: 'TOTAL_CRACK_LENGTH (ft)', label: 'Crack Length' },\n \n ],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"function getStateFromCoordsAndId(lat, lng, roadSectionId, roadData) {\n for (let road in roadData) {\n for (let segment of roadData[road]) {\n if (segment['ROAD_SECTION_ID'] === roadSectionId &&\n segment['FROM_LATITUDE (deg)'] === lat &&\n segment['FROM_LONGITUDE (deg)'] === lng) {\n return segment['state'];\n }\n }\n }\n // Return null if no matching segment is found\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"mutable selectedValue = value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"road_data = FileAttachment(\"updated_road_data_new.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mutable mutableSelectedCoords = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function getColor(percentCrack, thresholds) {\n if (percentCrack <= thresholds.low) return 'green';\n else if (percentCrack <= thresholds.medium) return 'yellow';\n else if (percentCrack <= thresholds.high) return 'orange';\n else return 'red';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function deg2rad(deg) {\n return deg * (Math.PI / 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {\n var R = 6371; // Radius of the earth in km\n var dLat = deg2rad(lat2 - lat1);\n var dLon = deg2rad(lon2 - lon1);\n var a = \n Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * \n Math.sin(dLon / 2) * Math.sin(dLon / 2);\n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); \n var d = R * c; // Distance in km\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"result = findClosestRoadId(road_data, mutableSelectedCoords);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"mutable initialroadid = result.roadId","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"mutable to_coords = result.toCoordinates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mutable from_coords = result.fromCoordinates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"road_no = getRoadNoFromCoordsAndId(from_coords.lat, from_coords.lng, initialroadid, road_data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function getRoadNoFromCoordsAndId(lat, lng, roadSectionId, roadData) {\n for (let road in roadData) {\n for (let segment of roadData[road]) {\n if (segment['ROAD_SECTION_ID'] === roadSectionId &&\n segment['FROM_LATITUDE (deg)'] === lat &&\n segment['FROM_LONGITUDE (deg)'] === lng) {\n return segment['ROAD_NO'];\n }\n }\n }\n // Return null if no matching segment is found\n return null; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"chainage = getFirstAndLastChainage(road_no, road_data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function getFirstAndLastChainage(roadNo, roadData) {\n let chainageFromValues = [];\n\n // Iterate through each road in the roadData\n for (let road in roadData) {\n // Iterate through each segment in the road\n for (let segment of roadData[road]) {\n // Check if the segment's ROAD_NO matches the given roadNo\n if (segment['ROAD_NO'] === roadNo) {\n chainageFromValues.push(segment['INSIGHT_CHAINAGE_FROM (mi)']);\n }\n }\n }\n\n if (chainageFromValues.length === 0) {\n return null; // Return null if no matching segments are found\n }\n\n // Find the minimum and maximum values of INSIGHT_CHAINAGE_FROM (mi)\n const firstChainage = Math.min(...chainageFromValues);\n const lastChainage = Math.max(...chainageFromValues);\n\n return { firstChainage, lastChainage };\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"first_filtered_data = filterDataByRoadNo(road_no, road_data, mutable selectedValue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"createChart(first_filtered_data, \"plot1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"mutable selected_chainage = 0 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mutable from_chainage=null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"mutable to_chainage=null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"displacementData = filterAndPrepareRoadSegmentData(road_data, road_no, from_chainage, to_chainage);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"mutable graphselection = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"defsection = filterSelectedValuesByChainage(road_data, road_no, chainage, selectedValue);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"mutable def_value = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"createDefChart(defsection, \"plot3\", graphselection );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"createDisplacementChart(displacementData, \"plot2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"defrut = filterSelectedValuesByChainageRut(road_data, road_no, selected_chainage, from_chainage, to_chainage, graphselection, def_value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$54","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"plotIriSci8Sci12Rut(defrut, \"plot4\", graphselection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"1"}} 24:null