2f:[{"id":"48deff3bd7cc647776dbf78d12438f3dc560729a36d0e883d8445408193ed4edbf9b8637093732b7e10e01f999c1aec099adb4cb2ea73e4bad35112aba60d696","href":"https://static.observableusercontent.com/files/48deff3bd7cc647776dbf78d12438f3dc560729a36d0e883d8445408193ed4edbf9b8637093732b7e10e01f999c1aec099adb4cb2ea73e4bad35112aba60d696","name":"BTC-USD.csv","type":"text/csv","lastModified":1702004914479.47,"size":32203}] 2d:{"title":"Line chart - API","cells":[{"id":0,"value":"# Line chart - API\nDaily bitcoin 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.price))\n .attr(\"r\", 5.8)\n .attr(\"fill\", \"#8868cb\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 1);\n\n // Div text\n d3.select(\"#price\").text(`${format(lastValue.price)}`);\n d3.select(\"#date\").text(`${d3.timeFormat(\"%b %d, %Y\")(lastValue.timestamp)}`);\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.timestamp))\n .y((d) => yScale(d.price))","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.price))\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.timestamp))\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 API data\nData from [Coinpaprika](https://api.coinpaprika.com/)\n- d3.json()","pinned":false,"hidden":false,"mode":"md"},{"id":433,"value":"data[data.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"data = raw_data.map((d) => {\n d.timestamp = new Date(d.timestamp);\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"raw_data = d3.json(await url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"url = `https://api.coinpaprika.com/v1/tickers/btc-bitcoin/historical?start=${start}&interval=1d`","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"end = formatDate(date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"start = formatDate(d3.timeDay.offset(date, -365 + 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"date = new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","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"}],"files":"$W2f","stdlib":"1","titling":"auto"}