2f:T46f, // Create the plot Plot.plot({ width, x: { axis: null }, y: { tickFormat: "$,d", label: null, ticks: yTickValues // Set the y-axis ticks to the calculated values }, marginLeft: 50, // y: { tickFormat: "$s", label: null }, color: { type: "categorical", legend: 'swatches', range: colorRange }, marks: [ Plot.rectY(tEntries, { y: 'amount', x: 'type', fx: d => week(d.date), order: 'amount', reverse: true, fill: 'type', // tip: true, rx: 2, ry: 2, }), Plot.rectY(weeklyTotals, { y: 'total', x: 'Week Total', fx: d => d.week, fill: '#6699FF', // tip: true, rx: 2, ry: 2, }), Plot.ruleY([0], { stroke: '#cccccc', strokeWidth: 1 }), // Add labels for the last three bars // ...lastThreeBars.map(({ label, value, yOffset }) => // Plot.text([{ label, value }], { // x: 'label', // y: 'value', // fx: () => week2(tEntries.slice(-1)[0].date), // fill: 'black', // yOffset, // textAnchor: 'start' // }) // ) ] })30:[{"id":"c18d72956f80245d567214e9093fa1a66f2138c1d3a08ddd45d7075035b03901ae4f0e9690368e61b9e21bd7aeb53c30049106f1aff48387f80077ae3e34ffba","href":"https://static.observableusercontent.com/files/c18d72956f80245d567214e9093fa1a66f2138c1d3a08ddd45d7075035b03901ae4f0e9690368e61b9e21bd7aeb53c30049106f1aff48387f80077ae3e34ffba","name":"bluestone.json","type":"application/json","lastModified":1716908893968.195,"size":135441}] 2d:{"title":"Plot: Histogram","cells":[{"id":4,"value":"

Plot: Histogram

Observable Plot › Gallery

\n\n# Histogram\n\nUsing the [bin transform](/plot/transforms/bin) and [rect mark](/plot/marks/rect).","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"projectId = 'cluqxrg5o0002v0w6f5of2793'","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"colorRange = [\"#FF4A41\", \"#3BA951\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"entries = FileAttachment(\"bluestone.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"tEntries = entries.map(e => {\n return ({\n date: new Date(e.displayDate),\n amount: e.amount,\n description: e.description,\n credit: e.Credit.name,\n debit: e.Debit.name,\n transaction: e.transactionId,\n type: e.Debit.projectId === projectId ? 'Expense' : 'Income'\n })\n}).sort((a, b) => a.date.getTime() - b.date.getTime())","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"Plot.plot({\n width: 928,\n height: 500,\n x: {label: null},\n y: {tickFormat: \"$s\", tickSpacing: 50},\n color: {legend: \"swatches\", label: \"Credit\", range: colorRange},\n marks: [\n Plot.rectY(tEntries, {\n x: \"date\",\n y: \"amount\",\n fill: \"type\",\n interval: d3.utcWeek,\n tip: true,\n order: 'amount',\n reverse: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":" week3 = date => date.getYear() + \", \" + \"Week \" + d3.timeFormat(\"%W\")(date);","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":" week = date => d3.timeWeek(date).toLocaleDateString('en-US')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"Plot.plot({\n width,\n x: { axis: null },\n y: {tickFormat: \"$s\", label: null},\n color: {\n type: \"categorical\",\n legend: 'swatches',\n range: colorRange\n },\n marks: [\n Plot.rectY(tEntries, {\n y: 'amount',\n x: 'type',\n fx: d => week(d.date),\n order: 'amount',\n reverse: true,\n fill: 'type',\n tip: true,\n }),\n Plot.ruleY([0], { stroke: '#cccccc', strokeWidth: 1 }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"weeklyTotals = {\n// Initialize the running total and the weeklyTotals array\nlet runningTotal = 0;\nconst weeklyTotals = [];\n\n// Group the entries by week and update the running total\nconst weekGroups = d3.groups(tEntries, d => week(d.date));\nfor (const [week, entries] of weekGroups) {\n let weekTotal = runningTotal;\n for (const entry of entries) {\n if (entry.type === 'Income') {\n weekTotal += entry.amount;\n } else if (entry.type === 'Expense') {\n weekTotal -= entry.amount;\n }\n }\n runningTotal = weekTotal;\n weeklyTotals.push({ week, total: weekTotal });\n}\n\n return weeklyTotals\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"Plot.plot({\n width,\n x: { axis: null },\n y: { tickFormat: \"$s\", label: null },\n color: {\n type: \"categorical\",\n legend: 'swatches',\n range: colorRange,\n },\n marks: [\n Plot.rectY(weeklyTotals, {\n y: 'total',\n x: 'Week Total',\n fx: d => d.week,\n fill: '#6699FF',\n rx: 2,\n ry: 2,\n // tip: true,\n }),\n Plot.rectY(tEntries, {\n y: 'amount',\n x: 'type',\n fx: d => week(d.date),\n order: 'amount',\n reverse: true,\n fill: 'type',\n rx: 2,\n ry: 2,\n // tip: true,\n }),\n Plot.ruleY([0], { stroke: '#cccccc', strokeWidth: 1 }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":506,"value":"precision = 20000","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"// Define the y-axis tick values based on the total values of the bars\nyTickValues = {\n\n const allAmounts = [\n ...tEntries.map(d => d.amount),\n ...weeklyTotals.map(d => d.total)\n ]\n \n const ticks = [\n ...new Set([\n ...allAmounts.map(n => Math.ceil(n/precision)*precision) \n ])\n].sort((a, b) => a - b).slice(0, -1)\n\n const max = d3.max(allAmounts)\n\n ticks.push(max)\n\n return ticks\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"\n// Define the label text and position for the last three bars\nlastThreeBars = [\n { label: 'Expenses', value: tEntries.slice(-1)[0].amount, yOffset: -10 },\n { label: 'Income', value: 0, yOffset: -10 }, // Assuming no income in the last week\n { label: 'Balance', value: weeklyTotals.slice(-1)[0].total, yOffset: 10 }\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":178,"value":"groupedWeek = d3.group(tEntries, d => week(d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"groupedByWeek = Array.from(groupedWeek, ([week, entries]) => {\n const obj = { week };\n entries.forEach(entry => {\n obj[entry.description] = entry.amount;\n obj.date = entry.date;\n });\n return obj;\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"grouped = Array.from(groupedWeek, ([week, entries]) => {\n const obj = { week };\n obj.groups = Array.from(d3.group(entries, d => d.type), ([type, _e]) => _e)\n return obj;\n});","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}