2c:null 2d:["$","title",null,{"children":".CSV setup and Javascript Dates | Paul Plew | Observable"}] 32:[{"id":"614ca8a40fa205f9ab6719f4a3a08ed9d37e2cc4992202292b8eaa9d286feb060503a5d51faf3527f8fe5676445b4d6a26b0c6688873d7a9a59cb8bfce422e8c","href":"https://static.observableusercontent.com/files/614ca8a40fa205f9ab6719f4a3a08ed9d37e2cc4992202292b8eaa9d286feb060503a5d51faf3527f8fe5676445b4d6a26b0c6688873d7a9a59cb8bfce422e8c","name":"MA-stories.csv","type":"text/csv","lastModified":1632934021754.919,"size":14977}] 30:{"id":"6db6347967e2ee2a","slug":"javascript-dates","title":".CSV setup and Javascript Dates","thumbnail":"aeff517925243fadddac92c40c23ef187de5d774728f53aa4d3f6bbc83fbb293","access_level":"public","create_time":"$D2021-09-29T16:45:19.864Z","update_time":"$D2021-10-01T18:02:04.697Z","view_time":null,"first_public_time":"$D2021-10-01T15:22:27.839Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"23732d4817a6de59","login":"paulplew","name":"Paul Plew","avatar_url":"https://avatars-next.observableusercontent.com/22cb60315cf70344aa6224b6fe3bee9d4a91bdaf8cbdfe3c0e669e14c944d901","tier":"starter_2024"},"version":522,"publish_version":522,"role":null,"authored":false,"authors":[{"type":"individual","id":"c698f0c55bc0044b","login":"paulplew","name":"Paul Plew","avatar_url":"https://avatars-next.observableusercontent.com/22cb60315cf70344aa6224b6fe3bee9d4a91bdaf8cbdfe3c0e669e14c944d901","tier":null}],"members":[{"type":"individual","id":"c698f0c55bc0044b","login":"paulplew","name":"Paul Plew","avatar_url":"https://avatars-next.observableusercontent.com/22cb60315cf70344aa6224b6fe3bee9d4a91bdaf8cbdfe3c0e669e14c944d901","tier":null,"role":"editor"},{"type":"individual","id":"23c344d271cff546","login":"rahulbot","name":"Rahul Bhargava","avatar_url":"https://avatars-next.observableusercontent.com/ed7a791c6c1530a27392a6ff7e6b4b2c1cfb42b1d7f1cbbb1221da7056329d3c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":".CSV setup and Javascript Dates","cells":[{"id":0,"value":"# .CSV setup and Javascript Dates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"import { aq } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"## Loading From a .csv File\nThe dates in some of the .csv files are not formatted in a way that D3 can understand. Below I will give an example of what happens when you try to use the date data directly from the dataset, how to get useable dates, and then give an example with the usesble dates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"### How to load and use data\n1. Click the paperclip in the panel on the right to open the Data Pane\n2. Load a new file using the + button\n3. Click the ... next to the newly loaded file and select `Copy usage code`\n4. Your clipboard should now contain something like
FileAttachment(\"MA-stories.csv\").csv()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"Lets load in that dataset!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"unformattedData = FileAttachment(\"MA-stories.csv\").csv();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"This is what the raw dataset looks like","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"aq.from(unformattedData).view({limit: 10, height: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"You can use d3's .scaleTime() to get a scale from a range of dates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"xFromRawData = d3.scaleTime()\n // domain accepts the minimum and the maximum values from the data\n .domain([d3.min(unformattedData, d => d.date), d3.max(unformattedData, d => d.date)])\n // range is the total width available \n .range([50, width - 50]) \n .nice();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"Wait, why is nothing showing up?\n \nWhen you try to use scaleTime between two dates represented by Strings D3 gives up, why do you think that happens?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"{\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 50);\n\n \n svg.append('g')\n .attr('transform', `translate(0, 25)`)\n .call(d3.axisBottom(xFromRawData));\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"## Javascript Dates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"Using the [javascript map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function we can create a new array using [javascript Date objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"formattedData = unformattedData.map((element) => ({\n ...element, // spread syntax will tell Javascript to leave everything else unchanged\n date: new Date(element.date.substring(0,10)),\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"Here is the new data!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"aq.from(formattedData).view({limit: 10, height: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"xFromFormattedData = d3.scaleTime()\n .domain([d3.min(formattedData, d => d.date), d3.max(formattedData, d => d.date)])\n .range([50, width - 50])\n .nice();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"The labels are here, but they don't look right. Don't worry there is always a fix!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"{\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 50);\n\n svg.append('g')\n .attr('transform', `translate(0, 25)`)\n .call(d3.axisBottom(xFromFormattedData));\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"Using a custom format function with the `.tickFormat` can help format the date in a way that you prefer. To see the functions available on Javascript Date objects go [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#instance_methods).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"{\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 50);\n\n // custom function that formats the date like yyyy-MM-DD\n const formatDate = (d) => {\n const year = d.getFullYear();\n const month = String(d.getMonth() + 1).padStart(2, 0);\n const day = String(d.getDate()).padStart(2,0);\n \n return `${year}-${month}-${day}`;\n }\n \n svg.append('g')\n .attr('transform', `translate(0, 25)`)\n .call(d3.axisBottom(xFromFormattedData)\n .tickFormat(formatDate));\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"