3f:null 40:["$","title",null,{"children":"plotting points | Mary Kromer | Observable"}] 46:[] 44:{"id":"0b6d0f05119d17a7","slug":"plotting-points","title":"plotting points","thumbnail":"b0b09810ec4e8790a2a455c75899f2ea626576db7b302b31076fea2c9859a1a7","access_level":"public","create_time":"$D2020-10-23T16:32:34.598Z","update_time":"$D2020-10-25T00:41:19.328Z","view_time":null,"first_public_time":"$D2020-10-23T16:59:36.947Z","has_unpublished_edits":null,"fork":{"id":"d0bf757895a9a3f9","slug":"template","title":"Template","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6a3ee212add6b33e","login":"mkrom","name":"Mary Kromer","avatar_url":"https://avatars-next.observableusercontent.com/a42e46ff651f9807d4df24d7b00ee3324eb13db8c5a754d3139f0abb7b81c216","tier":"starter_2024","bio":"","following":false},"version":127,"publish_version":127,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a5c85ff0f624da6","login":"mkrom","name":"Mary Kromer","avatar_url":"https://avatars-next.observableusercontent.com/a42e46ff651f9807d4df24d7b00ee3324eb13db8c5a754d3139f0abb7b81c216","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2a5c85ff0f624da6","login":"mkrom","name":"Mary Kromer","avatar_url":"https://avatars-next.observableusercontent.com/a42e46ff651f9807d4df24d7b00ee3324eb13db8c5a754d3139f0abb7b81c216","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"8159d7c217a9b915","slug":"homeworks","title":"Homeworks","owner":{"id":"6a3ee212add6b33e","login":"mkrom","name":"Mary Kromer"}},"type":"notebook","body":{"titling":"auto","title":"plotting points","cells":[{"id":0,"value":"md`# plotting points `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"data = d3.csv(`https://gist.githubusercontent.com/bendazz/c36e23b3400ba346107eefdcb9e48b0f/raw/1e69dab04fd605be0fcadc1953f3c5dfa1e3091c/Teams.csv`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"yankees = data.filter(d => d.name == \"New York Yankees\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"yearExtent = d3.extent(yankees, d => parseInt(d.yearID))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"rankExtent = d3.extent(yankees, d => parseInt(d.W))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"svg = {\n const svg = html``\n const container = d3.select(svg)\n\n const xScale = d3.scaleLinear().domain([1900,2020]).range([30,570])\n const xAxis = container.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale).tickFormat(d3.format(\".0f\"))(xAxis)\n \n const yScale = d3.scaleLinear().domain([0,120]).range([270,30])\n const yAxis = container.append(\"g\").attr(\"transform\",`translate(${xScale(1900)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n for(let i = 0; i < 106; i = i + 1){\n container.append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"cx\",xScale(yankees[i].yearID))\n .attr(\"cy\",yScale(yankees[i].W))\n \n }\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

CSS

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"makeXAxis = function(container,domain,range,y){\n const xScale = d3.scaleLinear().domain(domain).range(range)\n const xAxis = container.append(\"g\").attr(\"transform\",`translate(0,${y})`)\n d3.axisBottom(xScale)(xAxis)\n return xScale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"makeYAxis = function(container,domain,range,x){\n const yScale = d3.scaleLinear().domain(domain).range(range)\n const yAxis = container.append(\"g\").attr(\"transform\",`translate(${x},0)`)\n d3.axisLeft(yScale)(yAxis)\n return yScale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"