2b:null 2c:["$","title",null,{"children":"Global Superstore Dashboard - Milestone 2 | 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:[{"id":"116e6f0a5ed370ed0fc19b1459744ee42e23f9505a301d6ce5d769e0286d37c89b2c56625c5e17ad279ad28886ad1fca8367ce0b1e1cc5049122bb0891d24897","href":"https://static.observableusercontent.com/files/116e6f0a5ed370ed0fc19b1459744ee42e23f9505a301d6ce5d769e0286d37c89b2c56625c5e17ad279ad28886ad1fca8367ce0b1e1cc5049122bb0891d24897","name":"data.csv","type":"text/csv","lastModified":1777247504616.893,"size":5380856}] 2f:{"id":"447d8037627b3bee","slug":null,"title":"Global Superstore Dashboard - Milestone 2","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-04-26T23:51:44.616Z","update_time":"$D2026-04-29T00:37:08.828Z","view_time":null,"first_public_time":"$D2026-04-29T00:44:05.153Z","has_unpublished_edits":null,"fork":{"id":"9f8b39191f3a06f1","slug":null,"title":"Global Superstore Sales Dashboard","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":54,"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":1,"collection":null,"type":"notebook","body":{"title":"Global Superstore Dashboard - Milestone 2","cells":[{"id":31,"value":"# Global Superstore Dashboard - Milestone 2\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":"## Design Rationale\n\nA bar chart is used to compare sales across categories because it allows for clear comparison between groups. A line chart is used to visualize sales trends over time, making it easier to observe patterns and changes. The region filter allows users to focus on specific subsets of the data, and the hover interaction provides immediate visual feedback, supporting exploratory analysis.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"