2f:[{"id":"48deff3bd7cc647776dbf78d12438f3dc560729a36d0e883d8445408193ed4edbf9b8637093732b7e10e01f999c1aec099adb4cb2ea73e4bad35112aba60d696","href":"https://static.observableusercontent.com/files/48deff3bd7cc647776dbf78d12438f3dc560729a36d0e883d8445408193ed4edbf9b8637093732b7e10e01f999c1aec099adb4cb2ea73e4bad35112aba60d696","name":"BTC-USD.csv","type":"text/csv","lastModified":1701073178116.251,"size":32203}] 2d:{"title":"Line chart","cells":[{"id":0,"value":"# Line chart\nBitcoin price (USD) over time\n- [d3.line()](https://d3js.org/d3-shape/line)\n- [d3.scaleUtc()](https://d3js.org/d3-scale/time#scaleUtc)\n- axis ticks","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"html`\n

USD

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n // Axis\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\", \"x-axis\")\n .call(xAxis);\n\n svg\n .append(\"g\")\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(yAxis);\n\n // Line\n svg\n .append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#8868cb\")\n .attr(\"stroke-width\", 1.8)\n .attr(\"d\", line);\n\n const lastValue = data[data.length - 1];\n svg\n .append(\"circle\")\n .attr(\"cx\", width - margin.right)\n .attr(\"cy\", yScale(lastValue.Close))\n .attr(\"r\", 5.8)\n .attr(\"fill\", \"#8868cb\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1);\n\n // Update div text\n d3.select(\"#price\").text(`${format(lastValue.Close)}`);\n d3.select(\"#date\").text(\n `${d3.timeFormat(\"%b %d, %Y\")(lastValue.date_parsed)}`\n );\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"// thousand + no decimal point\nformat = d3.format(\",.2f\") //(\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"# Line function\n- d3.line()\n- d3.curveCardinal","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"line = d3\n .line()\n .curve(d3.curveCardinal)\n .x((d) => xScale(d.date_parsed))\n .y((d) => yScale(d.Close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"# Axis\n- d3.axisLeft(), d3.axisBottom()\n- [d3.timeFormat()](https://d3js.org/d3-time-format)","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"yAxis = d3\n .axisLeft(yScale)\n .ticks(5)\n .tickSize(-width + margin.right + margin.left)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"xAxis = d3\n .axisBottom(xScale)\n .tickFormat((d) => formatXAxis(d))\n .ticks(5)\n .tickSizeOuter(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"formatXAxis = d3.timeFormat(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"# Scale\nNeeds domain and range\n- d3.scaleLinear()\n- d3.scaleUtc()\n- d3.extent()","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d.Close))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"xScale = d3\n .scaleUtc()\n .domain(d3.extent(data, (d) => d.date_parsed))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"margin = ({ top: 2, right: 30, bottom: 40, left: 60 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 430","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"# Load Bitcoin data\nData from Yahoo: https://finance.yahoo.com/quote/BTC-USD/history/\n- d3.csvParse()\n- d3.parseTime()\n- Update data format","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"data = raw_data.map((d) => {\n d.Close = +d.Close;\n d.date_parsed = parseTime(d.Date);\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"parseTime = d3.timeParse('%Y-%m-%d')","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"raw_data = d3.csvParse(await FileAttachment(\"BTC-USD.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"# Style","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"d3.range(10)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}