2c:null 2d:["$","title",null,{"children":"Weekly Gas Prices in the USA | Deepali Kank | Observable"}] 32:T446,

Average Price

$${summary.average?.toFixed(2) || 'N/A'}

All-Time High

$${summary.max?.toFixed(2) || 'N/A'}

All-Time Low

$${summary.min?.toFixed(2) || 'N/A'}

33:T13a5,chart = { const margin = { top: 20, right: 30, bottom: 40, left: 60 }; const width = 900 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); if (filteredData.length === 0) { g.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .style("font-size", "16px") .style("fill", "#666") .text("No data available for selected filters"); return svg.node(); } // Scales const xScale = d3 .scaleTime() .domain(d3.extent(filteredData, (d) => d.date)) .range([0, width]); const yScale = d3 .scaleLinear() .domain(d3.extent(filteredData, (d) => d.price)) .nice() .range([height, 0]); // Line generator const line = d3 .line() .x((d) => xScale(d.date)) .y((d) => yScale(d.price)) .curve(d3.curveMonotoneX); // Grid lines g.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(xScale).tickSize(-height).tickFormat("")) .style("stroke-dasharray", "3,3") .style("opacity", 0.1); g.append("g") .attr("class", "grid") .call(d3.axisLeft(yScale).tickSize(-width).tickFormat("")) .style("stroke-dasharray", "3,3") .style("opacity", 0.1); // Axes g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%Y"))); g.append("g").call(d3.axisLeft(yScale).tickFormat((d) => `$${d.toFixed(2)}`)); // Axis labels g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - height / 2) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Price (USD)"); g.append("text") .attr("transform", `translate(${width / 2}, ${height + margin.bottom})`) .style("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Year"); // Area under the curve const area = d3 .area() .x((d) => xScale(d.date)) .y0(height) .y1((d) => yScale(d.price)) .curve(d3.curveMonotoneX); g.append("path") .datum(filteredData) .attr("fill", "url(#gradient)") .attr("d", area); // Gradient definition const gradient = svg .append("defs") .append("linearGradient") .attr("id", "gradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", height); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", "#007bff") .attr("stop-opacity", 0.6); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", "#007bff") .attr("stop-opacity", 0.1); // Main line g.append("path") .datum(filteredData) .attr("fill", "none") .attr("stroke", "#007bff") .attr("stroke-width", 2) .attr("d", line); // Tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("padding", "10px") .style("border-radius", "5px") .style("font-size", "12px") .style("pointer-events", "none"); // Invisible overlay for mouse events g.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "none") .attr("pointer-events", "all") .on("mouseover", function () { tooltip.style("opacity", 1); }) .on("mouseout", function () { tooltip.style("opacity", 0); }) .on("mousemove", function (event) { const [mouseX] = d3.pointer(event); const xDate = xScale.invert(mouseX); // Find closest data point const bisectDate = d3.bisector((d) => d.date).left; const i = bisectDate(filteredData, xDate, 1); const d0 = filteredData[i - 1]; const d1 = filteredData[i]; const d = d1 && xDate - d0.date > d1.date - xDate ? d1 : d0; if (d) { tooltip .html( `Date: ${d.date.toLocaleDateString()}
Price: $${d.price.toFixed( 2 )}` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); } }); // Chart title g.append("text") .attr("x", width / 2) .attr("y", -5) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "#333") .text( `${ fuelFilter.charAt(0).toUpperCase() + fuelFilter.slice(1) } Price Trends - ${ gradeFilter.charAt(0).toUpperCase() + gradeFilter.slice(1) } Grade` ); return svg.node(); }34:T9f9,// Year-over-year comparison chart yearlyChart = { const margin = { top: 20, right: 30, bottom: 40, left: 60 }; const width = 900 - margin.left - margin.right; const height = 300 - margin.top - margin.bottom; const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); if (filteredData.length === 0) { return svg.node(); } // Group data by year and calculate averages const yearlyData = d3.rollup( filteredData, (v) => ({ avgPrice: d3.mean(v, (d) => d.price), minPrice: d3.min(v, (d) => d.price), maxPrice: d3.max(v, (d) => d.price), year: v[0].date.getFullYear() }), (d) => d.date.getFullYear() ); const yearlyArray = Array.from(yearlyData.values()).sort( (a, b) => a.year - b.year ); // Scales const xScale = d3 .scaleBand() .domain(yearlyArray.map((d) => d.year)) .range([0, width]) .padding(0.1); const yScale = d3 .scaleLinear() .domain([0, d3.max(yearlyArray, (d) => d.maxPrice)]) .nice() .range([height, 0]); // Axes g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); g.append("g").call(d3.axisLeft(yScale).tickFormat((d) => `$${d.toFixed(2)}`)); // Bars g.selectAll(".bar") .data(yearlyArray) .enter() .append("rect") .attr("class", "bar") .attr("x", (d) => xScale(d.year)) .attr("width", xScale.bandwidth()) .attr("y", (d) => yScale(d.avgPrice)) .attr("height", (d) => height - yScale(d.avgPrice)) .attr("fill", "#98C2FF") .attr("opacity", 0.8); // Axis labels g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - height / 2) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Average Price (USD)"); g.append("text") .attr("transform", `translate(${width / 2}, ${height + margin.bottom})`) .style("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Year"); // Chart title g.append("text") .attr("x", width / 2) .attr("y", -5) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "#333") .text("Average Annual Prices"); return svg.node(); }35:[] 30:{"id":"a7c5a0e65fc5fac4","slug":null,"title":"Weekly Gas Prices in the USA","thumbnail":"379eadf25d99ca017d13844a3c75037feca28f42145d9fd5a384ab9fa2e0bc28","access_level":"public","create_time":"$D2025-07-03T13:18:41.058Z","update_time":"$D2025-07-10T04:05:59.657Z","view_time":null,"first_public_time":"$D2025-07-09T06:42:58.995Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":95,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Weekly Gas Prices in the USA","cells":[{"id":0,"value":"# Weekly Gas Prices in the USA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"

\n ${viewof fuelFilter}\n ${viewof gradeFilter}\n

\n ${viewof formulationFilter}\n ${viewof timeRange}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"

Data Summary

\n Data Points: ${summary.dataPoints.toLocaleString()} weekly observations
\n Date Range: ${summary.minDate?.toLocaleDateString()} - ${summary.maxDate?.toLocaleDateString()}
\n Current Selection: ${fuelFilter} - ${gradeFilter} grade - ${formulationFilter} formulation\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"filteredData = {\n // Debug: log initial data\n console.log(\"Initial data sample:\", data.slice(0, 3));\n console.log(\"Filter values:\", {\n fuelFilter,\n gradeFilter,\n formulationFilter,\n timeRange\n });\n\n let filtered = data.filter(\n (d) =>\n d.fuel === fuelFilter &&\n d.grade === gradeFilter &&\n (formulationFilter === \"all\" ||\n d.formulation === formulationFilter ||\n (formulationFilter === \"conventional\" &&\n (d.formulation === \"NA\" || d.formulation === \"conventional\")))\n );\n\n console.log(\"After fuel/grade/formulation filter:\", filtered.length);\n\n if (timeRange !== \"all\") {\n const cutoffDate = new Date();\n cutoffDate.setFullYear(cutoffDate.getFullYear() - parseInt(timeRange));\n filtered = filtered.filter((d) => d.date >= cutoffDate);\n console.log(\"After time filter:\", filtered.length);\n }\n\n const result = filtered.sort((a, b) => a.date - b.date);\n console.log(\"Final filtered data:\", result.length);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Summary statistics\nsummary = {\n const prices = filteredData.map((d) => d.price);\n const currentPrice = prices[prices.length - 1];\n const avgPrice = d3.mean(prices);\n const minPrice = d3.min(prices);\n const maxPrice = d3.max(prices);\n const minDate = d3.min(filteredData, (d) => d.date);\n const maxDate = d3.max(filteredData, (d) => d.date);\n\n return {\n current: currentPrice,\n average: avgPrice,\n min: minPrice,\n max: maxPrice,\n minDate,\n maxDate,\n dataPoints: filteredData.length\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"// Gas Prices Dashboard - Observable D3.js Style\n\n// Data processing\ndata = {\n // Parse dates and filter out invalid entries\n const processedData = data1\n .map((d) => ({\n date: new Date(d.date),\n fuel: d.fuel,\n grade: d.grade,\n formulation: d.formulation,\n price: +d.price\n }))\n .filter((d) => !isNaN(d.date) && !isNaN(d.price) && d.price > 0);\n\n return processedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"df = d3.csv(\n \"https://raw.githubusercontent.com/rfordatascience/tidytuesday/main/data/2025/2025-07-01/weekly_gas_prices.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data1 = df","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data1","database":"$undefined"},{"id":27,"value":"viewof fuelFilter = Inputs.select([\"gasoline\", \"diesel\"], {\n label: \"Fuel Type\",\n value: \"gasoline\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof gradeFilter = Inputs.select(\n [\"regular\", \"all\", \"midgrade\", \"premium\", \"ultra_low_sulfur\", \"low_sulfur\"],\n {\n label: \"Grade\",\n value: \"regular\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof formulationFilter = Inputs.select(\n [\"all\", \"conventional\", \"reformulated\", \"NA\"],\n {\n label: \"Formulation\",\n value: \"all\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof timeRange = Inputs.select([\"all\", \"5\", \"10\", \"20\"], {\n label: \"Time Range\",\n value: \"all\",\n format: (x) => (x === \"all\" ? \"All Time\" : `Last ${x} Years`)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"