28:null 29:["$","title",null,{"children":"Introduction to data wrangling and analysis in JavaScript | osgavablehq | Observable"}] 2e:[{"id":"61d7c30917c4ec65b8fbcd32ae6e5bcf761a67fbb344deb781a70f83b4ff72cde913320580b5f23f55949b68b1833a2474d2e926bfd79c61725ec6283e6e74b6","href":"https://static.observableusercontent.com/files/61d7c30917c4ec65b8fbcd32ae6e5bcf761a67fbb344deb781a70f83b4ff72cde913320580b5f23f55949b68b1833a2474d2e926bfd79c61725ec6283e6e74b6","name":"nyc_water.csv","type":"text/csv","lastModified":1707685924205.379,"size":11124868},{"id":"314e4aed94dba6a1d91423bcf47db2647d9f21af01484ac663569b56c494dc3b5670cc6986c4d75ae67c97928aad24e1e66d1150229d10cce4da59a001677b12","href":"https://static.observableusercontent.com/files/314e4aed94dba6a1d91423bcf47db2647d9f21af01484ac663569b56c494dc3b5670cc6986c4d75ae67c97928aad24e1e66d1150229d10cce4da59a001677b12","name":"world_bank_data.csv","type":"text/csv","lastModified":1707686102078.934,"size":606010},{"id":"486fdc7682ad42a8e2733f0d5a5845b4a3c029d05c82ae98313cb1849eb8a1bb35dac7c10e11b206c64b92a94f6ea9da450ab0bc4991c9258eb9502e7708a329","href":"https://static.observableusercontent.com/files/486fdc7682ad42a8e2733f0d5a5845b4a3c029d05c82ae98313cb1849eb8a1bb35dac7c10e11b206c64b92a94f6ea9da450ab0bc4991c9258eb9502e7708a329","name":"us_imports.csv","type":"text/csv","lastModified":1707686235063.705,"size":74347}] 2c:{"id":"2924d142310d45eb","slug":null,"title":"Introduction to data wrangling and analysis in JavaScript","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-02-11T21:08:54.659Z","update_time":"$D2024-02-26T16:16:45.024Z","view_time":null,"first_public_time":"$D2024-02-11T21:08:54.659Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0b21546edc062cba","login":"osgavablehq","name":"osgavablehq","avatar_url":"https://avatars-next.observableusercontent.com/72c2ea320d4324d3d7934a4b189ce79c5e9c24c5c22e12add1d13bc6772a2ac3","tier":"starter_2024"},"version":197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c8e1caa0f5d5c40","login":"osgav","name":"Gavin","avatar_url":"https://avatars-next.observableusercontent.com/53793e5b68eb5626a4dc21a65e88665b5fd3159aec4bf6624693c1530d851ff6","tier":null}],"members":[{"type":"individual","id":"2c8e1caa0f5d5c40","login":"osgav","name":"Gavin","avatar_url":"https://avatars-next.observableusercontent.com/53793e5b68eb5626a4dc21a65e88665b5fd3159aec4bf6624693c1530d851ff6","tier":null,"role":"editor"},{"type":"team","id":"0b21546edc062cba","login":"osgavablehq","name":"osgavablehq","avatar_url":"https://avatars-next.observableusercontent.com/72c2ea320d4324d3d7934a4b189ce79c5e9c24c5c22e12add1d13bc6772a2ac3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to data wrangling and analysis in JavaScript","cells":[{"id":0,"value":"# Introduction to data wrangling and analysis in JavaScript\n\n- https://observablehq.com/@observablehq/intro-js-session-1-key\n- https://observablehq.com/@observablehq/intro-js-session-2-key\n- https://observablehq.com/@observablehq/intro-js-session-3-key\n- https://observablehq.com/@observablehq/intro-js-session-4-key\n\n\n```\nArray.map\nArray.filter\n...d (spread operator)\nArquero\nd3 descriptive statistics\nd3.group\nd3.rollup\nd3.flatRollup\nMath transforms\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"---\n## Array.map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"nyc_water_locations = nyc_water.map(d => `${d.Location}, ${d.Borough}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"prices = nyc_water.map(d => d[\"Current Charges\"] / d[\"Consumption (HCF)\"])\n// alternate notation for fields with spaces or other characters","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"---\n## Array.filter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"nyc_water_locations.filter((v, i, self) => i == self.indexOf(v))\n// https://www.geeksforgeeks.org/how-to-get-all-unique-values-remove-duplicates-in-a-javascript-array/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"parseTime = d3.utcParse(\"%m/%d/%y\")\n// parseTime = d3.utcParse(\"%D\")\n// https://observablehq.com/@mbostock/a-note-on-date-inputs\n// https://d3js.org/d3-time-format\n// https://observablehq.com/@ashwinjm/working-with-dates\n// https://observablehq.com/@mbostock/date-formatting\n// https://observablehq.com/@observablehq/discovering-date-patterns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"nyc_water.filter(d => d[\"Revenue Month\"] > parseTime(\"12/31/21\"))\n// the \"Service Start Date\" and \"Service End Date\" fields have a mess of \n// different date formats so trying to grab data earlier than 2012 from \n// \"Service Start Date\" (should be 9 records) didn't work using `d3.utcParse(\"%m/%d/%y\")`\n//\n// but the \"Revenue Month\" field has consistent formatting so it works","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"nyc_water.filter(d => d[\"# days\"] > 500 && d[\"# days\"] < 1000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"nyc_water.filter(d => d.Borough != \"FHA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"---\n## ...d (spread operator)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\n- https://www.w3schools.com/howto/howto_js_spread_operator.asp\n\n*\"Spread syntax can be used when all elements from an object or array need to be included in a new array or object...\"*\n\n```\nnew = [...old] // returns all, as Array\nnew = ({..old}) // returns all, as Object\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"nyc_water_locations_unique = [...new Set(nyc_water_locations)]\n// https://stackoverflow.com/a/38206980\n// another way to filter an array to only contain unique values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"cars_kg = cars.map(d => ({...d, weight_kg: d[\"weight (lb)\"] * 0.45}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"---\n## Arquero","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"- https://uwdata.github.io/arquero/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"CARQUERO = aq.from(cars)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"CARQUERO\n .select(\"name\", \"economy (mpg)\", \"cylinders\", \"weight (lb)\")\n .filter(d => d.cylinders == 4 && d[\"economy (mpg)\"] != null)\n .derive({weight_kg: d => d[\"weight (lb)\"] * 0.45})\n .orderby(\"economy (mpg)\")\n .rename({\"economy (mpg)\": \"mpg\"})\n // .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"import {aq, op} from \"@uwdata/arquero\"\n// don't seem to get the .view() function from Arquero unless\n// i import it from here...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"CARQUERO\n .select(\"name\", \"economy (mpg)\", \"cylinders\", \"weight (lb)\")\n .filter(d => d.cylinders == 4 && d[\"economy (mpg)\"] != null)\n .derive({weight_kg: d => d[\"weight (lb)\"] * 0.45})\n .orderby(\"economy (mpg)\")\n .rename({\"economy (mpg)\": \"mpg\"})\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"wb2019 = wb\n .map((d) => ({\n country: d.country,\n year: d.year,\n co2: d.co2,\n region: d.region,\n co2_thousands: d.co2 / 1000\n }))\n .filter((d) => d.year == 2019)\n//\n// example of some wrangling using .map() and .filter()\n//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"wbTable = aq.from(wb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"wb2019arquero = wbTable\n .select(\"country\", \"year\", \"co2\", \"region\")\n .derive({ co2_thousands: d => d.co2 / 1000 })\n .filter(d => d.year == 2019)\n .view()\n//\n// same example as above but using Arquero\n//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"---\n## d3 descriptive statistics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"```\nd3.min\nd3.max\nd3.extent (the range, returns Array containing min and max values)\nd3.mean\nd3.deviation\nd3.count\n```\n\n- https://d3js.org/\n- https://observablehq.com/@d3/gallery\n- https://d3js.org/d3-array/summarize\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"---\n## d3.group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"- https://d3js.org/d3-array/group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"---\n## d3.rollup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"- https://d3js.org/d3-array/group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"---\n## d3.flatRollup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"- https://d3js.org/d3-array/group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"---\n## Math transforms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"---\n## Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"---\n### nyc_water\n
\nas per https://observablehq.com/@observablehq/intro-js-session-1-key\n\nData: NYC OpenData (accessed from [data.gov](https://catalog.data.gov/dataset/water-consumption-and-cost-2013-2020); see the [data dictionary](\thttps://data.cityofnewyork.us/api/views/66be-66yr/columns.xml)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"nyc_water = FileAttachment(\"nyc_water.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"nyc_water","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"---\n### cars\n
\nObservable built-in dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"data = cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"---\n### world_bank_data\n
\nas per https://observablehq.com/@observablehq/intro-js-session-2-key\n\nData: World Bank Open Data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"wb = FileAttachment(\"world_bank_data.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"wb","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"- - -\n### penguins\n
\nObservable built-in dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"data1 = penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"data1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"---\n### us_imports\n
\nas per https://observablehq.com/@observablehq/intro-js-session-4-key\n\nThe *us_imports* data contains a subset of records from the [US Trade Shift report](https://www.usitc.gov/research_and_analysis/trade_shifts.htm), and contains the value (USD) of various imports (by sector and title) for 2015 - 2019 (accessed from data.gov). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"us_imports = FileAttachment(\"us_imports.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"us_imports","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"