28:null 29:["$","title",null,{"children":"Stock Price Analysis | Akash Ram | Observable"}] 2e:T48e1,{ const canvasContainer = html`

`; const containerWidth = window.innerWidth; // total width including margins const containerHeight = 500; // total height including margins const margin = { top: 30, right: 100, bottom: 30, left: 30 }; const chartWidth = containerWidth - margin.left - margin.right; // width of the chart const volumeBarHeight = containerHeight * 0.2; // volume bar height is the 20% of the conatiner height const chartHeight = containerHeight - volumeBarHeight - margin.top - margin.bottom; // height of the chart let chartData = [...data]; // deep cloning of existing data for working // first we need to create a stage const stage = new Konva.Stage({ container: canvasContainer, // id of container

width: containerWidth, height: containerHeight }); // then create chart chart layer const chartLayer = new Konva.Layer(); // create svg container const svgContainer = d3 .select(canvasContainer) .append("div") .style("position", "absolute") .style("top", 0) .style("z-index", -1); // svgContainer reside below the canvasContainer // configure svg element const svg = svgContainer .append("svg") .attr("width", containerWidth) .attr("height", containerHeight) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // create a group within the chart layer to apply margins const chartGroup = new Konva.Group({ x: margin.left, y: margin.top }); chartLayer.add(chartGroup); // display charts according to selection of time period const selectedTimePeriod = (filterDate) => { chartData = chartData.filter((item, index) => { return ( new Date(item.date).getTime() >= new Date(filterDate.start_date).getTime() && new Date(item.date).getTime() <= new Date(filterDate.end_date).getTime() ); }); }; // time period computation const endDate = `${chartData[chartData.length - 1].date}`; const prevSelectedDate = new Date(endDate); const filterDate = { start_date: "", end_date: new Date(endDate) }; prevSelectedDate[timePeriodObj[timePeriod].setPeriodMothod]( prevSelectedDate[timePeriodObj[timePeriod].getPeriodMethod]() - timePeriodObj[timePeriod].periodValue ); filterDate["start_date"] = prevSelectedDate; selectedTimePeriod(filterDate); // display charts color based on chartData i.e green or red const displayChartColor = () => { const negativeColor = ["#F23645", "#FCDEE5"]; const positiveColor = ["#339981", "#dbf0e5"]; // (last data point - first data point) for green or red const openingPrice = chartData[0].close; const closingPrice = chartData[chartData.length - 1].close; if (openingPrice > closingPrice) { return negativeColor; } else if (closingPrice > openingPrice) { return positiveColor; } }; // add xScale const xScale = d3 .scaleTime() .domain( d3.extent(chartData, (d) => { return d.date; }) ) .range([0, chartWidth]); // add xAxis svg .append("g") .attr("transform", `translate(0, ${chartHeight + volumeBarHeight})`) .call( d3 .axisBottom(xScale) .ticks(chartWidth / 80) .tickSizeOuter(0) ); // add yScale for line and area chart const yScale = d3 .scaleLinear() .domain( d3.extent(chartData, (d) => { return d.close; }) ) .range([chartHeight, 0]); // add yAxis svg .append("g") .attr("transform", `translate(${chartWidth}, 0)`) .call(d3.axisRight(yScale)) .call((g) => g.select(".domain").remove()) // yAxis vertical line using svg // .call((g) => // g // .selectAll(".tick line") // .clone() // .attr("x2", chartWidth) // .attr("stroke-opacity", 0.1) // ) // yLabel Text .call((g) => g .append("text") .attr("x", -margin.right / 2) .attr("y", -margin.top / 2) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("↑ Daily Close (₹)") ); // yAxis horizontal line using canvas const yAxisTicks = yScale.ticks(); yAxisTicks.forEach((tick) => { const tickPosition = yScale(tick); const yGrid = new Konva.Line({ points: [chartWidth, tickPosition, 0, tickPosition], stroke: "grey", strokeWidth: 1, opacity: 0.2 }); chartGroup.add(yGrid); }); // draw line chart const drawLineChart = () => { // add line const line = d3 .line() .x((d) => { return xScale(d.date); }) .y((d) => { return yScale(d.close); }); // add line path generator const linePath = line(chartData); const graphLine = new Konva.Path({ x: 0, y: 0, data: `${linePath}`, stroke: displayChartColor()[0], strokeWidth: 2, scaleX: 1, scaleY: 1 }); chartGroup.add(graphLine); }; // draw area chart const drawAreaChart = () => { // add area const area = d3 .area() .x((d) => { return xScale(d.date); }) .y0(chartHeight) .y1((d) => { return yScale(d.close); }); // add area path generator const areaPath = area(chartData); const graphArea = new Konva.Path({ x: 0, y: 0, data: `${areaPath}`, scaleX: 1, scaleY: 1, tension: 0.5, // Adjust the tension to make the line smooth lineCap: "round", // Round line ends for a smoother look lineJoin: "round", // Round line joins for a smoother look fillLinearGradientStartPoint: { x: 0, y: 0 }, // Gradient start point fillLinearGradientEndPoint: { x: 0, y: chartHeight }, // Gradient end point fillLinearGradientColorStops: [ 0, displayChartColor()[0], 0.4, displayChartColor()[1], 1, "#ffffff" ] // Gradient color stops }); chartGroup.add(graphArea); }; // display chart type based on chart type input selection if (chartType === "linechart") { drawLineChart(); } else if (chartType === "areachart") { drawLineChart(); drawAreaChart(); } // add xCrosshair elements const crosshairLineX = new Konva.Line({ points: [0, 0, chartWidth, 0], stroke: "black", strokeWidth: 1, dash: [5, 5], visible: false }); chartGroup.add(crosshairLineX); // add yCrosshair elements const crosshairLineY = new Konva.Line({ points: [0, 0, 0, chartHeight], stroke: "black", strokeWidth: 1, dash: [5, 5], visible: false }); chartGroup.add(crosshairLineY); // add circle crosshair elements const crosshairCircle = new Konva.Circle({ x: 0, y: 0, radius: 5, fill: displayChartColor()[0], stroke: "white", strokeWidth: 1, visible: false }); chartGroup.add(crosshairCircle); // add xCrosshair elements for volume bar const crosshairVolumeBarX = new Konva.Line({ points: [0, 0, chartWidth, 0], stroke: "black", strokeWidth: 1, dash: [5, 5], visible: false }); chartGroup.add(crosshairVolumeBarX); // create yScale for volume bar chart const yScaleVolumeBar = d3 .scaleLinear() .domain( d3.extent(chartData, (d) => { return d.volume; }) ) .range([chartHeight + volumeBarHeight, chartHeight]); // add yAxis for volume bar chart svg .append("g") .attr("transform", `translate(${chartWidth}, 0)`) .call( d3 .axisRight(yScaleVolumeBar) .tickFormat((d) => { return abbreviateNumber(d); }) .ticks(5) .tickSizeOuter(0) ) .call((g) => g.select(".domain").remove()); // create volume bar rectangle for each data set const barPaddingFactor = 0.5; // 0.5 is used for padding between each volume bar const barGapXAsis = 0.5; const barWidth = (chartWidth / chartData.length) * barPaddingFactor; const volumeBarList = []; chartData.forEach((d, index) => { const volumeBar = new Konva.Rect({ x: index === 0 // clip first volume bar ? xScale(d.date) : index === chartData.length - 1 // clip last volume bar ? xScale(d.date) - barWidth / 2 : xScale(d.date) - barWidth / 2, y: yScaleVolumeBar(d.volume) - barGapXAsis, width: index === 0 // clip first volume bar ? barWidth / 2 : index === chartData.length - 1 // clip last volume bar ? barWidth / 2 : barWidth, height: chartHeight + volumeBarHeight - yScaleVolumeBar(d.volume), fill: d.open > d.close ? "#F23645" : "#339981" }); volumeBarList.push(volumeBar); chartGroup.add(volumeBar); }); // redraw volume bar chart for highlight bar let selectedVolumeBar = new Konva.Rect({ x: 0, y: 0, width: 1, height: 1, fill: "grey", visible: false }); chartGroup.add(selectedVolumeBar); // add crosshair container area const crosshairContainer = new Konva.Rect({ x: 0, y: 0, width: chartWidth, height: chartHeight + volumeBarHeight }); // create tooltip group const tooltip = new Konva.Group({ visible: false }); // create a rectangle to represent tooltip const tooltipRectWidth = 100; const tooltipRectHeight = 55; const tooltipRect = new Konva.Rect({ width: tooltipRectWidth, height: tooltipRectHeight, fill: "#ffffff", stroke: displayChartColor()[0], shadowColor: "black", shadowOpacity: 0.2, strokeWidth: 1, cornerRadius: 6 }); tooltip.add(tooltipRect); chartGroup.add(tooltip); // add tooltip text tooltip.add( new Konva.Text({ text: "", fontFamily: "sans-serif", fontSize: 13, padding: 9, fill: "black" }) ); chartGroup.add(tooltip); chartGroup.add(crosshairContainer); // create xAxis tooltip (i.e. date) const xAxisTooltip = new Konva.Label({ opacity: 1, visible: false, listening: false }); // add xAxis tooltip tag (up,down,right,left) xAxisTooltip.add( new Konva.Tag({ fill: "black", pointerDirection: "up", pointerWidth: 8, pointerHeight: 8, lineJoin: "round" }) ); // add xAxis toolip text (i.e. date) xAxisTooltip.add( new Konva.Text({ text: "", fontFamily: "sans-serif", fontSize: 10, padding: 7, fill: "white" }) ); chartGroup.add(xAxisTooltip); // add yAxisTooltip elements at last by default const [yAsisTooltipX, yAsisTooltipY] = [ xScale(chartData[chartData.length - 1].date), yScale(chartData[chartData.length - 1].close) ]; // create yAxis tooltip (i.e. close) const yAxisTooltip = new Konva.Label({ x: yAsisTooltipX, y: yAsisTooltipY, opacity: 1, visible: true, listening: false }); // add yAxis tooltip tag (up,down,right,left) yAxisTooltip.add( new Konva.Tag({ fill: displayChartColor()[0], pointerDirection: "left", pointerWidth: 8, pointerHeight: 8, lineJoin: "round" }) ); // add yAxis toolip text (i.e. close) yAxisTooltip.add( new Konva.Text({ text: chartData[chartData.length - 1].close, fontFamily: "sans-serif", fontSize: 10, padding: 7, fill: "white" }) ); chartGroup.add(yAxisTooltip); // add yAxisTooltip for volume bar elements at last by default const [yAsisTooltipVolumeBarX, yAsisTooltipVolumeBarY] = [ xScale(chartData[chartData.length - 1].date), yScaleVolumeBar(chartData[chartData.length - 1].volume) ]; // create yAxis tooltip for volume bar (i.e. volume) const yAxisVolumeBarTooltip = new Konva.Label({ x: yAsisTooltipVolumeBarX, y: yAsisTooltipVolumeBarY, opacity: 1, visible: true, listening: false }); // add yAxis tooltip tag for volume bar (up,down,right,left) yAxisVolumeBarTooltip.add( new Konva.Tag({ fill: chartData[chartData.length - 1].open > chartData[chartData.length - 1].close ? "#F23645" : "#339981", pointerDirection: "left", pointerWidth: 8, pointerHeight: 8, lineJoin: "round" }) ); // add yAxis toolip text for volume (i.e. volume) yAxisVolumeBarTooltip.add( new Konva.Text({ text: abbreviateNumber(chartData[chartData.length - 1].volume), fontFamily: "sans-serif", fontSize: 10, padding: 7, fill: "white" }) ); chartGroup.add(yAxisVolumeBarTooltip); // add mouse event for desktop and mobile device crosshairContainer.on("mousemove touchmove", (event) => { // get mouse co-ordinates const mouseCoordinates = chartGroup.getRelativePointerPosition(); // x and y co-ordinates const mouseX = mouseCoordinates.x; const mouseY = mouseCoordinates.y; // xValue const xValue = xScale.invert(mouseX); // work out which data points is closest to the mouse const closestDataPoints = chartData.reduce((prev, curr) => Math.abs(curr.date - xValue) < Math.abs(prev.date - xValue) ? curr : prev ); // closest x and y co-ordinates const [xPos, yPos] = [ xScale(closestDataPoints.date), yScale(closestDataPoints.close) ]; // closest x and y co-ordinates for volume bar const [xPosVolBar, yPosVolBar] = [ xScale(closestDataPoints.date), yScaleVolumeBar(closestDataPoints.volume) ]; // xCrosshair line crosshairLineX.visible(true); crosshairLineX.points([0, yPos, chartWidth, yPos]); // yCrosshair line crosshairLineY.visible(true); crosshairLineY.points([xPos, 0, xPos, chartHeight + volumeBarHeight]); // crosshairCircle circle crosshairCircle.visible(true); crosshairCircle.position({ x: xPos, y: yPos }); // xCrosshair line for volume crosshairVolumeBarX.visible(true); crosshairVolumeBarX.points([0, yPosVolBar, chartWidth, yPosVolBar]); // show tooltip rect tooltip.visible(true); // ensure tooltip doesn't go beyond chart boundaries const maxX = chartWidth - tooltipRect.width(); const maxY = chartHeight - tooltipRect.height(); // clamp tooltip position to stay within boundaries let clampedX = xPos; // for left boundary if (clampedX < tooltipRect.width()) { clampedX = 0; } // for right boundary else if (clampedX > chartWidth - tooltipRect.width()) { clampedX = chartWidth - tooltipRect.width(); } // for center else { clampedX = clampedX - tooltipRect.width() / 2; } const clampedY = Math.min(Math.max(0, yPos), maxY); // tooltip up and down based on postion if (chartHeight - yPos + chartHeight / 3 > chartHeight) { tooltip.position({ x: clampedX, y: chartHeight - tooltipRect.height() * 2 }); } else { tooltip.position({ x: clampedX, y: 0 }); } // show tooltip open,low,high,close and volume tooltip .findOne("Text") .text( `INR ₹${closestDataPoints.close.toFixed(2)}\n${d3.timeFormat( "%b %d, %Y" )(closestDataPoints.date)}\nVolume:${abbreviateNumber( closestDataPoints.volume )}` ); // show xAxis tooltip xAxisTooltip.visible(true); // calculate required co-ordinates const maxXAxisTooltip = chartWidth - xAxisTooltip.width() / 2; const maxYAxisTooltip = chartHeight - xAxisTooltip.height(); // clamp xAxis tooltip position to stay within boundaries const clampedXAxisTooltip = Math.min( Math.max(xAxisTooltip.width() / 2, xPos), maxXAxisTooltip ); const clampedYAxisTooltip = Math.min(Math.max(0, yPos), maxYAxisTooltip); // position xAxis tooltip in mousemove xAxisTooltip.position({ x: clampedXAxisTooltip, y: chartHeight + volumeBarHeight }); // append data for xAxis tooltip xAxisTooltip .findOne("Text") .text(`${d3.timeFormat("%b %d, %Y")(closestDataPoints.date)}`); // show yAxis tooltip yAxisTooltip.visible(true); // position yAxis tooltip in mousemove yAxisTooltip.position({ x: chartWidth, y: yPos }); // append text for yAxis tooltip yAxisTooltip.findOne("Text").text(`${closestDataPoints.close.toFixed(2)}`); // show yAxis tooltip for volume bar yAxisVolumeBarTooltip.visible(true); // position yAxis tooltip in mousemove for volume bar yAxisVolumeBarTooltip.position({ x: chartWidth, y: yPosVolBar }); // redraw volume bar chart for highlight bar selectedVolumeBar.position({ x: xScale(closestDataPoints.date) - barWidth / 2, y: yScaleVolumeBar(closestDataPoints.volume) - barGapXAsis }); selectedVolumeBar.width(barWidth); selectedVolumeBar.height( chartHeight + volumeBarHeight - yScaleVolumeBar(closestDataPoints.volume) ); selectedVolumeBar.visible(true); // update volume bar tooltip color based on selection yAxisVolumeBarTooltip .findOne("Tag") .fill( closestDataPoints.open > closestDataPoints.close ? "#F23645" : "#339981" ); // append text for yAxis tooltip for volume bar yAxisVolumeBarTooltip .findOne("Text") .text(`${abbreviateNumber(closestDataPoints.volume)}`); }); // add mouse event for desktop and mobile device crosshairContainer.on("mouseout touchend", () => { crosshairLineX.visible(false); crosshairLineY.visible(false); crosshairCircle.visible(false); crosshairVolumeBarX.visible(false); tooltip.visible(false); xAxisTooltip.visible(false); selectedVolumeBar.visible(false); // position yAxis tooltip in mouseout (by default last postion) yAxisTooltip.position({ x: chartWidth, y: yAsisTooltipY }); // position yAxis tooltip for volume bar in mouseout (by default last postion) yAxisVolumeBarTooltip.position({ x: chartWidth, y: yAsisTooltipVolumeBarY }); // update volume bar tooltip color based on selection yAxisVolumeBarTooltip .findOne("Tag") .fill( chartData[chartData.length - 1].open > chartData[chartData.length - 1].close ? "#F23645" : "#339981" ); }); // Instead of immediately redrawing, batch the changes chartLayer.batchDraw(); // add the chartLayer to the stage stage.add(chartLayer); // draw the image chartLayer.draw(); return canvasContainer; }2f:[{"id":"7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","href":"https://static.observableusercontent.com/files/7b00535015de4221b2d494d874d553dd6191847306cefb742201564faa13f9015142b4bcc06672b796e3a27435726df6c2049e76a7fb8b0cbaa73470325fe17c","name":"observablehq.svg","type":"image/svg+xml","lastModified":1744292049846.886,"size":3168},{"id":"2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","href":"https://static.observableusercontent.com/files/2ee393443444598c3bbb1bc9e8429f94082c554d0416d7387c9a922bee321f15ec5517a960337287df04bd6840f622c86b2973cc0838588624410bda2947725e","name":"d3-js.svg","type":"image/svg+xml","lastModified":1744292051993.83,"size":2966},{"id":"81d3bb232e015ea76ae6502de53b078ea76ae1b657d1eef276743cf7b6876b991556761b7af456fe5b4585b07087a2771a738f541261297aaa3f191f5df76fa5","href":"https://static.observableusercontent.com/files/81d3bb232e015ea76ae6502de53b078ea76ae1b657d1eef276743cf7b6876b991556761b7af456fe5b4585b07087a2771a738f541261297aaa3f191f5df76fa5","name":"konva-js.png","type":"image/png","lastModified":1744292458323.417,"size":15069},{"id":"e6c15858c8fcd5ea216a934b502806aa731f8741f29aee805f9efdb519346355f550e565c274099e955667389b6aa15f3530375bd7f28146475355f5b7bdbeb9","href":"https://static.observableusercontent.com/files/e6c15858c8fcd5ea216a934b502806aa731f8741f29aee805f9efdb519346355f550e565c274099e955667389b6aa15f3530375bd7f28146475355f5b7bdbeb9","name":"data.csv","type":"text/csv","lastModified":1694520105391.06,"size":68368}] 2c:{"id":"9215d795b26bc01e","slug":"price-chart","title":"Stock Price Analysis","thumbnail":"37bf90e1cd911b79b05d7ff7eda4b9b4f6469542585cb4c362906736d69dd779","access_level":"public","create_time":"$D2023-09-05T10:32:39.315Z","update_time":"$D2025-04-10T13:43:04.367Z","view_time":null,"first_public_time":"$D2023-09-05T10:32:39.315Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"6c0e85bb062a2e6d","login":"imakashram","name":"Akash Ram","avatar_url":"https://avatars-next.observableusercontent.com/ee24b2f3d7055ffb97ffc91c9c9563471228ef7d76023a233500c53880c3687c","tier":"starter_2024"},"version":1451,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d52a4b816a41e95","login":"imakashram","name":"Akash Ram","avatar_url":"https://avatars-next.observableusercontent.com/97a371d0a1014fc8f22aa7da56ab7920835220acbf32f37993e3b9b1ce0f4ff1","tier":null}],"members":[{"type":"individual","id":"1d52a4b816a41e95","login":"imakashram","name":"Akash Ram","avatar_url":"https://avatars-next.observableusercontent.com/97a371d0a1014fc8f22aa7da56ab7920835220acbf32f37993e3b9b1ce0f4ff1","tier":null,"role":"editor"},{"type":"team","id":"6c0e85bb062a2e6d","login":"imakashram","name":"Akash Ram","avatar_url":"https://avatars-next.observableusercontent.com/ee24b2f3d7055ffb97ffc91c9c9563471228ef7d76023a233500c53880c3687c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"4be9e0acf2867df0","slug":"visual-spectrum","title":"#0 Visual Spectrum","owner":{"id":"6c0e85bb062a2e6d","login":"imakashram","name":"Akash Ram"}},"type":"notebook","body":{"title":"Stock Price Analysis","cells":[{"id":1367,"value":"

Stock Price Analysis

Chart Type: Price Chart, Tech Stack: D3.js, Konva.js, SVG, HTML Canvas

Data Sources: NSE India

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1390,"value":"

The Price Chart tracks an asset's price over time, showing trends, highs, lows, and daily changes, helping traders and investors spot opportunities.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"viewof chartType = radio({\n title: \"Choose Chart Type\",\n options: [\n { label: \"Line Chart\", value: \"linechart\" },\n { label: \"Area Chart\", value: \"areachart\" }\n ],\n value: \"linechart\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof timePeriod = radio({\n title: \"Choose Time Period\",\n options: [\n { label: \"1W\", value: \"1W\" },\n { label: \"1M\", value: \"1M\" },\n { label: \"3M\", value: \"3M\" },\n { label: \"6M\", value: \"6M\" },\n { label: \"1Y\", value: \"1Y\" },\n { label: \"2Y\", value: \"2Y\" },\n { label: \"5Y\", value: \"5Y\" }\n ],\n value: \"6M\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"### CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1412,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"**Utils Function : **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"// For abbreviateNumber like K, M, L\nabbreviateNumber = (number) => {\n if (number >= 1000000000) {\n return (number / 1000000000).toFixed(1).replace(/\\.0$/, \"\") + \"B\";\n }\n if (number >= 1000000) {\n return (number / 1000000).toFixed(1).replace(/\\.0$/, \"\") + \"M\";\n }\n if (number >= 100000) {\n return (number / 100000).toFixed(1).replace(/\\.0$/, \"\") + \"L\";\n }\n if (number >= 1000) {\n return (number / 1000).toFixed(0).replace(/\\.0$/, \"\") + \"K\";\n }\n return number;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"**Import Data : **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"data = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"timePeriodObj = ({\n \"1W\": {\n periodType: \"1W\",\n periodValue: 7,\n setPeriodMothod: \"setDate\",\n getPeriodMethod: \"getDay\"\n },\n \"1M\": {\n periodType: \"1M\",\n periodValue: 1,\n setPeriodMothod: \"setMonth\",\n getPeriodMethod: \"getMonth\"\n },\n \"3M\": {\n periodType: \"3M\",\n periodValue: 3,\n setPeriodMothod: \"setMonth\",\n getPeriodMethod: \"getMonth\"\n },\n \"6M\": {\n periodType: \"6M\",\n periodValue: 6,\n setPeriodMothod: \"setMonth\",\n getPeriodMethod: \"getMonth\"\n },\n \"1Y\": {\n periodType: \"1Y\",\n periodValue: 1,\n setPeriodMothod: \"setFullYear\",\n getPeriodMethod: \"getFullYear\"\n },\n \"2Y\": {\n periodType: \"2Y\",\n periodValue: 2,\n setPeriodMothod: \"setFullYear\",\n getPeriodMethod: \"getFullYear\"\n },\n \"5Y\": {\n periodType: \"5Y\",\n periodValue: 5,\n setPeriodMothod: \"setFullYear\",\n getPeriodMethod: \"getFullYear\"\n },\n \"4Y\": {\n periodType: \"4Y\",\n periodValue: 4,\n setPeriodMothod: \"setFullYear\",\n getPeriodMethod: \"getFullYear\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"**Import JS Libraries : **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"Konva = require(\"https://unpkg.com/konva@9.2/konva.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"### Tools and Methodologies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1443,"value":"

\n \n $\"Observable$ \n \n \n $\"D3.js\"$ \n \n \n $\"Konva.js\"$ \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1436,"value":"### References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1438,"value":"*[D3.js Docs.](https://d3js.org/getting-started) | [Observable Notebook Docs.](https://observablehq.com/documentation/notebooks/) | [SVG Docs.](https://developer.mozilla.org/en-US/docs/Web/SVG) | [Canvas API Docs.](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) | [Konva.js Docs.](https://konvajs.org/docs/index.html)* ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1400,"value":"### Acknowledgements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1402,"value":"*The author has no acknowledgements to declare for this project.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1430,"value":"### AI Disclosure","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1433,"value":"*The author utilized AI tools such as Gemini and ChatGPT as coding assistants during the development of this project.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1407,"value":"

⚠️ Disclaimer ⚠️

\n This project provides data visualizations for informational purposes only. While we aim for accuracy, the data may contain errors or omissions. It should not be used as financial, legal, or professional advice. We are not responsible for any decisions made based on this information. Use at your own discretion.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"