3e:null 3f:["$","title",null,{"children":"D3 simple slider | Aaron Kyle Dennis | Observable"}] 45:[] 43:{"id":"a0fcf2ebe7e66dd2","slug":null,"title":"D3 simple slider","thumbnail":"a6f6b6acf2ded7a4ef19d3d2a11f8121a505474420e60d5acbd8fec4cc0a0034","access_level":"unlisted","create_time":"$D2019-01-17T20:34:16.173Z","update_time":"$D2019-01-18T14:40:22.241Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024","bio":"Social development practitioner. Trying to understand our world.","following":false},"version":156,"publish_version":156,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"bio":"Social development practitioner. Trying to understand our world.","following":false}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 simple slider","cells":[{"id":0,"value":"md`# D3 simple slider`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`\n

Range

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"{\n // Range\n var sliderRange = d3\n .sliderBottom()\n .min(d3.min(data))\n .max(d3.max(data))\n .width(300)\n .tickFormat(d3.format('.2%'))\n .ticks(5)\n .default([0.015, 0.02])\n .fill('#2196f3')\n .on('onchange', val => {\n d3.select('p#value-range').text(val.map(d3.format('.2%')).join('-'));\n });\n\n var gRange = d3\n .select('div#slider-range')\n .append('svg')\n .attr('width', 500)\n .attr('height', 100)\n .append('g')\n .attr('transform', 'translate(30,30)');\n\n gRange.call(sliderRange);\n\n d3.select('p#value-range').text(\n sliderRange\n .value()\n .map(d3.format('.2%'))\n .join('-')\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"html`\n

Range

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"sliderRange_alt = d3\n .sliderBottom()\n .min(d3.min(data))\n .max(d3.max(data))\n .width(300)\n .tickFormat(d3.format('.2%'))\n .ticks(5)\n .default([0.015, 0.02])\n .fill('#2196f3')\n .on('onchange', val => {\n d3.select('p#value-range_alt').text(val.map(d3.format('.2%')).join('-'));\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"gRange = d3\n .select('div#slider-range_alt')\n .append('svg')\n .attr('width', 500)\n .attr('height', 100)\n .append('g')\n .attr('transform', 'translate(30,30)');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"gRange.call(sliderRange_alt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"d3.select('p#value-range_alt').text(\n sliderRange_alt\n .value()\n .map(d3.format('.2%'))\n .join('-')\n );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"{\nvar slider = d3\n .sliderHorizontal()\n .min(0)\n .max(10)\n .step(1)\n .width(300)\n .displayValue(false)\n .on('onchange', val => {\n d3.select('#value').text(val);\n });\n \n d3.select('#slider')\n .append('svg')\n .attr('width', 500)\n .attr('height', 100)\n .append('g')\n .attr('transform', 'translate(30,30)')\n .call(slider);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5', 'd3-simple-slider@1.4.1/build/d3-simple-slider.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"bootstrap = require ('bootstrap')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"style = html`style `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"