2b:null 2c:["$","title",null,{"children":"Global Superstore Dashboard - Milestone 3 | ASU | Observable"}] 31:T8b8,{ const width = 600; const height = 350; const margin = { top: 40, right: 20, bottom: 60, left: 70 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const categorySales = Array.from( d3.rollup( filteredData, v => d3.sum(v, d => d.Sales), d => d.Category ), ([category, sales]) => ({ category, sales }) ); const x = d3.scaleBand() .domain(categorySales.map(d => d.category)) .range([margin.left, width - margin.right]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(categorySales, d => d.sales)]) .nice() .range([height - margin.bottom, margin.top]); const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #999") .style("padding", "8px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); svg.selectAll("rect") .data(categorySales) .enter() .append("rect") .attr("x", d => x(d.category)) .attr("y", d => y(d.sales)) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d.sales)) .attr("fill", "steelblue") .on("mouseover", function(event, d) { d3.select(this).attr("fill", "orange"); tooltip .style("opacity", 1) .html(` Category: ${d.category}
Total Sales: $${d.sales.toFixed(2)} `); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 12}px`) .style("top", `${event.pageY - 28}px`); }) .on("mouseout", function() { d3.select(this).attr("fill", "steelblue"); tooltip.style("opacity", 0); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); svg.append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Sales by Category"); return svg.node(); }32:Tb93,{ const width = 700; const height = 400; const margin = { top: 50, right: 30, bottom: 70, left: 70 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Aggregate monthly sales const timeData = Array.from( d3.rollup( filteredData, v => d3.sum(v, d => d.Sales), d => d3.timeMonth(d["Order Date"]) ), ([date, sales]) => ({ date, sales }) ).sort((a, b) => a.date - b.date); // Scales const x = d3.scaleTime() .domain(d3.extent(timeData, d => d.date)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(timeData, d => d.sales)]) .nice() .range([height - margin.bottom, margin.top]); // Line generator const line = d3.line() .x(d => x(d.date)) .y(d => y(d.sales)); // Tooltip const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #999") .style("padding", "8px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); // Draw line svg.append("path") .datum(timeData) .attr("fill", "none") .attr("stroke", "crimson") .attr("stroke-width", 2) .attr("d", line); // Add dots for hover svg.selectAll("circle") .data(timeData) .enter() .append("circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.sales)) .attr("r", 3) .attr("fill", "crimson") .on("mouseover", function(event, d) { d3.select(this).attr("r", 6); tooltip .style("opacity", 1) .html(` Date: ${d3.timeFormat("%b %Y")(d.date)}
Sales: $${d.sales.toFixed(2)} `); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 12}px`) .style("top", `${event.pageY - 28}px`); }) .on("mouseout", function() { d3.select(this).attr("r", 3); tooltip.style("opacity", 0); }); // X Axis with formatted ticks const xAxis = d3.axisBottom(x) .ticks(6) .tickFormat(d3.timeFormat("%b %Y")); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); // Y Axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); // Title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Sales Over Time"); // X Label svg.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .text("Month / Year"); // Y Label svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .text("Sales"); return svg.node(); }33:T10eb,{ const width = 700; const height = 450; const margin = { top: 50, right: 30, bottom: 70, left: 80 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid #ddd") .style("background", "white"); const x = d3.scaleLinear() .domain([0, d3.max(filteredData, d => d.Sales)]) .nice() .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain(d3.extent(filteredData, d => d.Profit)) .nice() .range([height - margin.bottom, margin.top]); const xAxisGroup = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`); const yAxisGroup = svg.append("g") .attr("transform", `translate(${margin.left},0)`); xAxisGroup.call(d3.axisBottom(x)); yAxisGroup.call(d3.axisLeft(y)); const chartArea = svg.append("g") .attr("clip-path", "url(#scatter-clip)"); svg.append("defs") .append("clipPath") .attr("id", "scatter-clip") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #999") .style("padding", "8px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); const points = chartArea.selectAll("circle") .data(filteredData) .enter() .append("circle") .attr("cx", d => x(d.Sales)) .attr("cy", d => y(d.Profit)) .attr("r", 4) .attr("fill", "purple") .attr("opacity", 0.55) .on("mouseover", function(event, d) { d3.select(this) .attr("r", 7) .attr("opacity", 1); tooltip .style("opacity", 1) .html(` Product: ${d["Product Name"]}
Category: ${d.Category}
Sales: $${d.Sales.toFixed(2)}
Profit: $${d.Profit.toFixed(2)} `); }) .on("mousemove", function(event) { tooltip .style("left", `${event.pageX + 12}px`) .style("top", `${event.pageY - 28}px`); }) .on("mouseout", function() { d3.select(this) .attr("r", 4) .attr("opacity", 0.55); tooltip.style("opacity", 0); }); const zoom = d3.zoom() .scaleExtent([1, 8]) .translateExtent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) .on("zoom", zoomed); svg.call(zoom); function zoomed(event) { const newX = event.transform.rescaleX(x); const newY = event.transform.rescaleY(y); xAxisGroup.call(d3.axisBottom(newX)); yAxisGroup.call(d3.axisLeft(newY)); points .attr("cx", d => newX(d.Sales)) .attr("cy", d => newY(d.Profit)); } const controls = html`

You can also scroll on the chart to zoom and drag to pan.

`; d3.select(controls).select("#zoom-in").on("click", () => { svg.transition().duration(300).call(zoom.scaleBy, 1.5); }); d3.select(controls).select("#zoom-out").on("click", () => { svg.transition().duration(300).call(zoom.scaleBy, 0.75); }); d3.select(controls).select("#reset-zoom").on("click", () => { svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity); }); svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Sales vs Profit"); svg.append("text") .attr("x", width / 2) .attr("y", height - 25) .attr("text-anchor", "middle") .text("Sales"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 25) .attr("text-anchor", "middle") .text("Profit"); return html`${controls}${svg.node()}`; }34:Taaa,## Design Rationale The design of the final dashboard focuses on creating an interactive and user-friendly exploratory data visualization system that enables users to analyze sales performance efficiently. The dashboard was designed for business analysts and decision-makers who need to compare categories, explore sales trends over time, identify outliers, and examine relationships between variables. Throughout the project, emphasis was placed on balancing simplicity with meaningful interactivity so that users could explore the data without feeling overwhelmed. A bar chart was selected to visualize sales by category because it provides a clear and intuitive method for comparing discrete groups. Users can quickly identify which product categories perform better or worse based on total sales values. A line chart was used to represent sales trends over time since line charts are effective for displaying temporal patterns and changes across different periods. The line chart was later improved with readable month/year labels and hover tooltips to make time-based analysis more understandable for users. Based on feedback received during usability testing, a scatterplot comparing Sales and Profit was added to the dashboard. This visualization allows users to explore relationships between variables and identify possible outliers or unusual patterns in the dataset. Zooming and panning functionality were implemented within the scatterplot to help users examine dense regions of data more closely and improve exploratory analysis. Interactivity plays a major role in the dashboard design. A region filter was implemented to allow users to dynamically update all visualizations simultaneously and focus on specific subsets of the data. Hover tooltips were added across the visualizations to provide precise values without cluttering the interface. These interactions improve usability by helping users access detailed information only when needed while maintaining a clean overall layout. Another important design decision was maintaining consistency and readability throughout the dashboard. Clear titles, axis labels, and instructional text were added to help guide users and reduce confusion during exploration. Rather than overcrowding the interface with too many visualizations or controls, the final dashboard focuses on a smaller set of meaningful charts that work together cohesively. This approach improves clarity, supports usability, and encourages more effective exploratory analysis. Overall, the final design emphasizes usability, interactivity, and clarity while enabling users to uncover meaningful insights from the Global Superstore dataset through dynamic exploration and linked visualizations. 35:[{"id":"116e6f0a5ed370ed0fc19b1459744ee42e23f9505a301d6ce5d769e0286d37c89b2c56625c5e17ad279ad28886ad1fca8367ce0b1e1cc5049122bb0891d24897","href":"https://static.observableusercontent.com/files/116e6f0a5ed370ed0fc19b1459744ee42e23f9505a301d6ce5d769e0286d37c89b2c56625c5e17ad279ad28886ad1fca8367ce0b1e1cc5049122bb0891d24897","name":"data.csv","type":"text/csv","lastModified":1778125213831.317,"size":5380856}] 2f:{"id":"8f87624aa937fd70","slug":null,"title":"Global Superstore Dashboard - Milestone 3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-05-07T03:40:13.831Z","update_time":"$D2026-05-08T03:31:59.975Z","view_time":null,"first_public_time":"$D2026-05-08T03:33:18.476Z","has_unpublished_edits":null,"fork":{"id":"447d8037627b3bee","slug":null,"title":"Global Superstore Dashboard - Milestone 2","owner":{"id":"d69d22cb766bc79c","login":"asu42","name":"ASU"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d69d22cb766bc79c","login":"asu42","name":"ASU","avatar_url":"https://avatars-next.observableusercontent.com/f588d93bffa8575587ae631523432d1e5dbb76ca8f07589a11db35dd18010ecd","tier":"starter_2024"},"version":59,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0569957fdcd56ba","login":"sonit-sai-penchala","name":"Sonit Sai Penchala","avatar_url":"https://avatars-next.observableusercontent.com/999583f35973beaec58f6a522895aac66e6115ba5832f7edf24b1501da8cfd5c","tier":null}],"members":[{"type":"individual","id":"a0569957fdcd56ba","login":"sonit-sai-penchala","name":"Sonit Sai Penchala","avatar_url":"https://avatars-next.observableusercontent.com/999583f35973beaec58f6a522895aac66e6115ba5832f7edf24b1501da8cfd5c","tier":null,"role":"editor"},{"type":"team","id":"d69d22cb766bc79c","login":"asu42","name":"ASU","avatar_url":"https://avatars-next.observableusercontent.com/f588d93bffa8575587ae631523432d1e5dbb76ca8f07589a11db35dd18010ecd","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Global Superstore Dashboard - Milestone 3","cells":[{"id":31,"value":"# Global Superstore Dashboard - Milestone 3\n\nThis interactive dashboard allows users to explore sales performance across categories, regions, and time using D3.js visualizations in Observable.\n\nDataset Used: https://www.kaggle.com/datasets/fatihilhan/global-superstore-dataset?resource=download","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"## User Persona\n\nA business analyst at a retail company who wants to understand sales performance across different regions and product categories. The user is interested in identifying trends, comparing performance, and making data-driven decisions based on sales insights.\n\n## Exploratory Tasks\n\n- Compare total sales across different product categories \n- Explore how sales change over time \n- Filter data by region to analyze regional performance \n- Identify high-performing and low-performing categories ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"data = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"cleanData = data.map(d => ({\n ...d,\n Sales: +d.Sales,\n Profit: +d.Profit,\n Quantity: +d.Quantity,\n Year: +d.Year,\n \"Order Date\": new Date(d[\"Order Date\"])\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"## How to Use This Dashboard\n\nUse the **Region filter** to focus on a specific region. \nThe **bar chart** compares total sales by product category. \nThe **line chart** shows sales trends over time. \nThe **scatterplot** compares Sales and Profit to help identify relationships and possible outliers.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof region = Inputs.select(\n [\"All\", ...new Set(cleanData.map(d => d.Region))],\n { label: \"Select Region\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"filteredData = region === \"All\"\n ? cleanData\n : cleanData.filter(d => d.Region === region)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## Key Insights\n\nThe dashboard shows that sales performance varies across product categories and regions. The bar chart helps compare category-level sales, while the line chart reveals how sales change over time. The Sales vs Profit scatterplot helps identify relationships between revenue and profitability, including possible outliers where high sales do not always result in high profit.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"