2e:null 2f:["$","title",null,{"children":"Year-position bar experiments | senritsu | Observable"}] 34:[] 32:{"id":"d72a78f3789280a0","slug":"year-position-bar-experiments","title":"Year-position bar experiments","thumbnail":"bbac97904b336a86e81d9831ca6ab5566772ae485344563dcf922935afc9817e","access_level":"public","create_time":"$D2020-08-29T09:04:32.346Z","update_time":"$D2020-08-30T15:22:17.744Z","view_time":null,"first_public_time":"$D2020-08-29T14:51:20.858Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":304,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Year-position bar experiments","cells":[{"id":0,"value":"md`# Year-position bar experiments\n\nDisplaying a contiguous date range, highlighting its relation to the current calendar year.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"{\n exampleStyle;\n return html`\n

Variant / Date range

\n${variants.map(variant => html`

${variant}

`)}\n${dates.map(exampleRow)}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof height = slider({\n min: 1, \n max: 10, \n step: 1, \n value: 2,\n title: 'Height',\n description: 'Affects the whole bar, box of boxed style excluded'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"viewof width = slider({\n min: 30, \n max: 100, \n step: 10, \n value: 40,\n title: 'Width',\n description: 'Affects the whole bar'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof markerWidth = slider({\n min: 1, \n max: 5, \n step: 1, \n value: 2,\n title: 'Marker width',\n description: 'Affects the markers for the current year for the marker variant'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof backgroundColor = color({\n value: \"#ececec\",\n title: \"Background color\",\n description: \"Affects the background of the full bar\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof contentColor = color({\n value: \"#ababab\",\n title: \"Highlight color\",\n description: \"Affects the highlighted bar segment\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof boxColor = color({\n value: \"#8c8c8c\",\n title: \"Box color\",\n description: \"Affects the box for boxed variant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"dates = [\n {from: '2020-03-01', to: '2020-09-30'},\n {from: '2019-11-01', to: '2020-04-13'},\n {from: '2018-07-01', to: '2021-06-09'},\n {from: '2020-10-15', to: '2021-07-03'}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## Code`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`### Example display`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"exampleRow = date => html.fragment`

${formatDateRange(date)}

${variants.map(variant => render(date, variant))}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"variantDefinitions = ({\n 'marker': renderWithMarkers(),\n 'marker (always on)': renderWithMarkers({always: true}),\n 'marker (both synced)': renderWithMarkers({both: true}),\n 'boxed': renderBoxed(),\n 'boxed (always on)': renderBoxed({always: true})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"variants = Object.keys(variantDefinitions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"formatDateRange = ({from, to}) => html`${from} - ${to}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`### Bars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"metrics = ({from, to, currentYear = 2020}) => {\n from = new Date(from).valueOf()\n to = new Date(to).valueOf()\n \n const startOfYear = new Date(`${currentYear}-01-01`).valueOf()\n const endOfYear = new Date(`${currentYear}-12-31`).valueOf()\n \n const rangeStart = Math.min(from, startOfYear)\n const fullRange = Math.max(to, endOfYear) - rangeStart\n \n const normalize = x => (x - rangeStart) / fullRange\n const normalizeRange = (start, end) => ({\n start: normalize(start),\n end: normalize(end),\n width: normalize(end) - normalize(start)\n })\n \n const content = normalizeRange(from, to)\n const context = normalizeRange(startOfYear, endOfYear)\n \n return {\n original: {\n from,\n to,\n },\n content, \n context,\n expanded: {\n start: content.start < context.start,\n end: content.end > context.end\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"render = ({from, to}, variant) => {\n barStyle;\n exampleStyle;\n return variantDefinitions[variant](metrics({from, to}))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"renderBoxed = (options = {}) => ({content, context, expanded}) => {\n const display = options.always || expanded.start || expanded.end ? 'visible' : 'none'\n \n return html.fragment`\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"renderWithMarkers = (options = {}) => ({content, context, expanded}) => {\n const display = side => options.always || side || (options.both && (expanded.start || expanded.end)) ? 'visible' : 'none'\n \n return html.fragment`\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"exampleStyle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"barStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"import {color, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"