2b:null 2c:["$","title",null,{"children":"Electric Vehicles | Mauricio Foronda | Observable"}] 31:Td2f,plot = { const height = 700 const maxXtick = 500 const maxYtick = 2024 const minYtick = 2011 const inset = {bottom: 25, top: sizeScale(-15, -13)} const titleY = sizeScale(55, 38) const titleX = sizeScale(10) const titleOptions = { frameAnchor: 'top-right', fill: colors.title, dx: - titleX, textAnchor: 'end', } const ruleOptions = { x: 'range', y1: 'year', y2: d => d.year + 1, } const plot = Plot.plot({ width: width, height:height, marginLeft: 60, marginBottom: 30, marginRight: 20, style: { color: colors.ticks, background: colors.background }, x: { label: null, tickSize: 0, tickPadding: 10, ticks: width > 500 ? 10 : 5, // tickFormat: d => d == maxXtick ? `${d} miles` : d, domain: [0.1, 549] }, y: { label: null, tickPadding: 20, reverse: true, ticks: 15, tickSize: 0, tickFormat: d => d == maxYtick ? "" : d3.format('.0f')(d), domain: [2010.5, 2023.7] }, color: { range: [colors.strokePast, colors.stroke] }, marks: [ Plot.gridX({ strokeWidth: 7 }), Plot.text(data.yearMedian, { frameAnchor: 'left', y: 'year', text: d => d.year == minYtick ? `${d3.format('.0f')(d.range)} miles\nmedian range` : d3.format('.0f')(d.range), textAnchor: 'start', lineAnchor: 'top', lineHeight: 1.2, dy: 10, dx: width > 500 ? -45 : -43, fontSize: 10, fill: colors.highlight }), Plot.ruleX(data.yearMedian, { ...ruleOptions, insetBottom: inset.bottom - 3, insetTop: inset.top - 3, strokeWidth: 7, stroke: colors.highlight, strokeOpacity: .8, title: d => `${d.year} median\n${d.range} miles` }), Plot.ruleX(data.raw, { ...ruleOptions, insetBottom: inset.bottom, insetTop: inset.top, stroke: 'range', strokeWidth: 1.2, strokeOpacity: 1., title: d => `${d.year} ${d.make} ${d.model}\n${d.range} mile range` }), Plot.text(['Electric Vehicles'], { ...titleOptions, fontFamily: 'Bebas Neue', fontWeight: 'bold', fontSize: sizeScale(60, 35), dy: titleY, lineAnchor: 'bottom', }), Plot.text(['longer range and more cars on the market'], { ...titleOptions, fontSize: sizeScale(14, 8), dy: titleY + 13, lineAnchor: 'top', }), Plot.text(['The assessed range included in fuel economy standards from the US Environmental Protection Agency. Based on combined driving in the city and on highways. Only all-electric vehicles are included.'], { ...titleOptions, lineWidth: sizeScale(33, 18), lineHeight: 1.5, fontSize: sizeScale(9, 8), dy: titleY + sizeScale(50, 38), lineAnchor: 'top', }), Plot.text(['miles of range →'], { frameAnchor: 'bottom-left', lineAnchor: 'bottom', textAnchor: 'start', fill: colors.ticks, fontSize: 10, dy: 16, dx: width > 500 ? -45 : -43, }), Plot.ruleY([2023.7], { stroke: colors.ticks, strokeDasharray: 1, strokeOpacity: .5 }) ] }) return plot }32:Td09,upsideDownPlot = { const height = 700 const maxXtick = 500 const maxYtick = 2024 const minYtick = 2011 const inset = {bottom: -35, top: sizeScale(25, 23)} const titleY = sizeScale(-55, -38) const titleX = 0 const titleOptions = { frameAnchor: 'bottom-right', fill: colors.title, dx: - titleX, textAnchor: 'end', } const ruleOptions = { x: 'range', y1: 'year', y2: d => d.year + 1, } const plot = Plot.plot({ width: width, height:height, marginLeft: 60, marginBottom: 30, marginRight: 20, style: { color: colors.ticks, background: colors.background }, x: { axis: 'top', label: null, tickSize: 0, tickPadding: 10, ticks: width > 500 ? 10 : 5, domain: [0.1, 549] }, y: { label: null, tickPadding: 20, // reverse: true, ticks: 15, tickSize: 0, tickFormat: d => d == maxYtick ? "" : d3.format('.0f')(d), domain: [2010.3, 2023.5] }, color: { range: [colors.strokePast, colors.stroke] }, marks: [ Plot.gridX({ strokeWidth: 7 }), Plot.text(data.yearMedian, { frameAnchor: 'left', y: 'year', text: d => d.year == minYtick ? `${d3.format('.0f')(d.range)} miles\nmedian range` : d3.format('.0f')(d.range), textAnchor: 'start', lineAnchor: 'top', lineHeight: 1.2, dy: 10, dx: width > 500 ? -45 : -43, fontSize: 10, fill: colors.highlight }), Plot.ruleX(data.yearMedian, { ...ruleOptions, insetBottom: inset.bottom + 3, insetTop: inset.top + 3, strokeWidth: 7, stroke: colors.highlight, strokeOpacity: .8, title: d => `${d.year} median\n${d.range} miles` }), Plot.ruleX(data.raw, { ...ruleOptions, insetBottom: inset.bottom, insetTop: inset.top, stroke: 'range', strokeWidth: 1.2, strokeOpacity: 1., title: d => `${d.year} ${d.make} ${d.model}\n${d.range} mile range` }), Plot.text(['Electric Vehicles'], { ...titleOptions, fontFamily: 'Bebas Neue', fontWeight: 'bold', fontSize: sizeScale(60, 35), dy: titleY, lineAnchor: 'top', }), Plot.text(['longer range and more cars on the market'], { ...titleOptions, fontSize: sizeScale(14, 8), dy: titleY - 15, lineAnchor: 'bottom', }), Plot.text(['The assessed range included in fuel economy standards from the US Environmental Protection Agency. Based on combined driving in the city and on highways. Only all-electric vehicles are included.'], { ...titleOptions, lineWidth: sizeScale(33, 18), lineHeight: 1.5, fontSize: sizeScale(9, 8), dy: titleY - sizeScale(60, 48), lineAnchor: 'bottom', }), Plot.text(['miles of range →'], { frameAnchor: 'top-left', lineAnchor: 'top', textAnchor: 'start', fill: colors.ticks, fontSize: 10, dy: -16, dx: width > 500 ? -45 : -43, }), Plot.ruleY([2023.5], { stroke: colors.ticks, strokeDasharray: 1, strokeOpacity: .5 }) ] }) return plot }33:[{"id":"78f05d2b7efd10c7fdd5cb97cbd1d2eb3040d459e6f8de16defe3700a3324f365496c94d65ba16738de81c479e02e6155f4f7b9066fbe8935ca36eec3071f22b","href":"https://static.observableusercontent.com/files/78f05d2b7efd10c7fdd5cb97cbd1d2eb3040d459e6f8de16defe3700a3324f365496c94d65ba16738de81c479e02e6155f4f7b9066fbe8935ca36eec3071f22b","name":"vehicles_small.csv","type":"text/csv","lastModified":1677511387868.054,"size":17095}] 2f:{"id":"f232fc51e5081b86","slug":"electric-vehicles-longer-range-more-cars","title":"Electric Vehicles","thumbnail":"244424e25c8ca3b233bc4de4f6ab4b8bc8f641ef1ce9394b55456e0f249c6e9e","access_level":"public","create_time":"$D2023-02-27T15:22:18.230Z","update_time":"$D2023-02-28T01:59:44.567Z","view_time":null,"first_public_time":"$D2023-02-27T15:22:18.230Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"475974948549302f","login":"mauforonda","name":"Mauricio Foronda","avatar_url":"https://avatars-next.observableusercontent.com/4cc3af3b792916571df54649e193dbdbf80a875b4e37b1def6ecb0480c561075","tier":"starter_2024"},"version":591,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"018969b4abf63b07","login":"mauforonda","name":"Mau Foronda","avatar_url":"https://avatars-next.observableusercontent.com/513f52feadea4c57a52e2ab0f2fbdad66bf45a132acf7f9fbb19eb61e86e345f","tier":null}],"members":[{"type":"individual","id":"018969b4abf63b07","login":"mauforonda","name":"Mau Foronda","avatar_url":"https://avatars-next.observableusercontent.com/513f52feadea4c57a52e2ab0f2fbdad66bf45a132acf7f9fbb19eb61e86e345f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Electric Vehicles","cells":[{"id":337,"value":"html`\n

Electric Vehicles

\n ${plot}\n ${footer()}\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"*Like [the original](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3ac4062d-bcaa-4bb9-a0a4-2152e1545e1e_4869x3655.png)*\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":555,"value":"html`\n

\n ${upsideDownPlot}\n ${footer()}\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"*Upside down because it kinda looks like taking off 🚀*\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":484,"value":"## 📝","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":473,"value":"_dependencies_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"_data_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":159,"value":"dataSince = async (year) => {\n let raw = await aq.fromCSV(await FileAttachment(\"vehicles_small.csv\").text())\n raw = raw.filter(aq.escape(d => d.year >= year))\n const yearMedian = raw.groupby('year').rollup({range: op.median('range')})\n return {raw: raw, yearMedian: yearMedian}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"data = dataSince(2011)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"_plot_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":351,"value":"sizeScale = (original, lowerthreshold=null, w=width) => {\n const resized = (original / 1152) * w\n if (lowerthreshold) {\n if (Math.abs(resized) < Math.abs(lowerthreshold)) {\n return lowerthreshold\n } else {\n return resized\n }\n } else {\n return resized\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"colors = ({\n strokePast: '#f4f5f4',\n stroke: '#6a6e6c',\n background: '#fcfcfc',\n highlight: '#eb642a',\n ticks: '#b0b5b3',\n title: '#6a6e6c'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"footer = () => {\n return html`\n

\n A riff on work by Hannah Ritchie\n Data from the US Environmental Protection Agency\n

\n`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"