29:null 2a:["$","title",null,{"children":"Axis Design - Tick Emphasis 1 | Ajay | Observable"}] 2f:[] 2d:{"id":"4b55bb98257d5bb2","slug":"axis-design-tick-emphasis-1","title":"Axis Design - Tick Emphasis 1","thumbnail":"3c3e3dc5c498a527ea7e78e41d10386280b1d731baaa4e50530ab7cc630c6f2e","access_level":"public","create_time":"$D2019-10-21T19:00:30.414Z","update_time":"$D2021-03-28T19:44:01.179Z","view_time":null,"first_public_time":"$D2019-10-24T17:24:25.217Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c4502285a4e37a76","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/849d25192620761ccd4197b7433f5fb9328fa64b2eae6f2efeda3ec38d44931b","tier":"starter_2024"},"version":892,"publish_version":892,"role":null,"authored":false,"authors":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null}],"members":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"549337d880cb8cc4","slug":"axis","title":"Axis","owner":{"id":"c4502285a4e37a76","login":"stroked","name":"Ajay"}},"type":"notebook","body":{"title":"Axis Design - Tick Emphasis 1","cells":[{"id":0,"value":"md`# Axis Design - Tick Emphasis 1\n[PART 2](https://observablehq.com/@stroked/Axis-Design-Tick-Emphasis-2)\n\n## Simply Lines\n\n\\`Goal\\`\nRecreating this slider from anime.js homepage\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"animeJS_homepage = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"SVG = {\n let view = html`\n

\n`;\n\n yield view;\n\n async function handleInteractionEnd() {\n d3.select(this);\n }\n d3.select(view)\n\n // .selectAll('.line-of-ticks')\n // .on('mousemove', handleInteraction);\n\n .on('mousemove touchmove', handleInteraction);\n\n //.on('mouseout touchend', handleInteractionEnd);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"async function handleInteraction() {\n let mouseX = d3.mouse(this)[0] | 0;\n d3.select('#slider_ball')\n .style('left', function() {\n if (mouseX < 10) return -BALL_HEIGHT / 2 + 'px';\n return mouseX - BALL_HEIGHT / 2 + 'px';\n })\n .html(mouseX.toPrecision(3));\n\n d3.selectAll('.line-of-ticks')\n .attr('stroke', 'black')\n .attr('y2', function(d) {\n let tickPos = d3.select(this).attr('x1');\n let distance = Math.abs(mouseX - tickPos);\n if (distance > EMPHASIS_LENGTH) return DEFAULT_POSITION;\n else return displaceScale(distance) + BALL_HEIGHT / 2;\n })\n .attr('y1', function(d) {\n let tickY2 = d3.select(this).attr('y2');\n return tickY2 - TICK_HEIGHT;\n });\n // })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"//ticks that are within the ball radius are moved down.\ndisplaceScale = d3\n .scalePow(\n [0, BALL_HEIGHT / 2],\n [DEFAULT_POSITION, DEFAULT_POSITION - BALL_HEIGHT / 2]\n )\n .exponent(2)\n .clamp(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"visualizeScale(displacementScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"visualizeScale(displaceScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"displaceScale((EMPHASIS_LENGTH / 2) * Math.random())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"uids = ({ SVG: DOM.uid('SVG'), SVG1: DOM.uid('SVG1'), SVG2: DOM.uid('SVG2') })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"TICK_HEIGHT = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"EMPHASIS_LENGTH = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"HEIGHT=200;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"DEFAULT_POSITION = 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"BALL_HEIGHT = 46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"someData = d3.range(10, width, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"import { visualizeScale } from '@d3/continuous-scales'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"displacementScale = d3\n .scalePow()\n .exponent(2)\n .domain([0, EMPHASIS_LENGTH / 2, width])\n .range([DEFAULT_POSITION - TICK_HEIGHT, DEFAULT_POSITION, DEFAULT_POSITION])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"