31:[] 2f:{"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"},{"id":815,"value":"animeJS_homepage = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":481,"value":"visualizeScale(displacementScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"visualizeScale(displaceScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"displaceScale((EMPHASIS_LENGTH / 2) * Math.random())","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"uids = ({ SVG: DOM.uid('SVG'), SVG1: DOM.uid('SVG1'), SVG2: DOM.uid('SVG2') })","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"TICK_HEIGHT = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"EMPHASIS_LENGTH = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"HEIGHT=200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"DEFAULT_POSITION = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"BALL_HEIGHT = 46","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"someData = d3.range(10, width, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"import { visualizeScale } from '@d3/continuous-scales'","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":727,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}