3f:null 40:["$","title",null,{"children":"Explorable Data | Hongtao Hao | Observable"}] 46:Tbdd,D_chart = { const width = 700; const height = 350; const dataset = [5, 10, 24, 16, 18, 19, 22, 9, 8, 17, 4, 6, 10, 12, 20]; const margin = ({top: 50, right: 100, bottom: 10, left: 10}) const svg = d3.create("svg").attr("width", width).attr("height", height) let xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .range([0, width - margin.right]) .paddingInner(0.05); let yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, height]); const rects = svg.selectAll("rect") .data(dataset) .join("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")"); d3.select(add) .on("click", function(){ const maxValue = 40; let newNumber = 1+ Math.round(Math.random() * maxValue); dataset.push(newNumber); xScale.domain(d3.range(dataset.length)); yScale.domain([0, d3.max(dataset)]); const bars = svg.selectAll("rect").data(dataset); const enter = bars.enter().append("rect").attr("x", width).attr("y", d => height - yScale(d)) const updatedBars = enter.merge(bars) .transition() .duration(400) .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")"); svg.selectAll("text") .data([newNumber]) .join("text") .attr("x", 650) .attr("y", 50) .attr("font-size", "45px") .text(d => d) }) d3.select(reset) .on("click", function(){ while (dataset.length > 15) { dataset.pop() } svg.selectAll("text").remove() xScale.domain(d3.range(dataset.length)); yScale.domain([0, d3.max(dataset)]); svg.selectAll("rect") .data(dataset) .join( exit => exit .remove() ) .transition() .duration(500) .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", d => "rgb("+ Math.round(d * 5) +", "+ Math.round(d * 2) +", "+ Math.floor(d * 9) +")"); }) return svg.node() //This visualization is based on Scott Murray's D3 Book (2nd edition) and https://observablehq.com/@uvizlab/d3-tutorial-4-bar-chart-with-transition }47:[{"id":"32d29268f882be7f6d86fd94fc53a34da8402a870f6361b6e9e2b18aff033b5aed7a50cddd3dc8039f7f8ed8802409f8abc3134b2bcbb7f16e18bcbe64fbcb49","href":"https://static.observableusercontent.com/files/32d29268f882be7f6d86fd94fc53a34da8402a870f6361b6e9e2b18aff033b5aed7a50cddd3dc8039f7f8ed8802409f8abc3134b2bcbb7f16e18bcbe64fbcb49","name":"summer.jpg","type":"image/jpeg","lastModified":1602107975359.986,"size":93207},{"id":"b280fe0cb6da8e3b3092006feba40dee258839bd095bb69c3d36ee55d45e9f21ccde17db0b54199c79da6677d5a34ef975923b6671b80db4131c8e05d5ddd343","href":"https://static.observableusercontent.com/files/b280fe0cb6da8e3b3092006feba40dee258839bd095bb69c3d36ee55d45e9f21ccde17db0b54199c79da6677d5a34ef975923b6671b80db4131c8e05d5ddd343","name":"winter-img.jpg","type":"image/jpeg","lastModified":1602154570910.584,"size":1477905}] 44:{"id":"2926ee9c72b4e061","slug":"explrable-data","title":"Explorable Data","thumbnail":"eb8093f4a9763a548649af4e06958707d6df6fe97bfe828ad81216fbc2f10d51","access_level":"public","create_time":"$D2020-10-06T18:24:44.577Z","update_time":"$D2021-03-22T16:25:47.739Z","view_time":null,"first_public_time":"$D2020-10-06T21:13:36.145Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024","bio":"","following":false},"version":514,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"199a24f333c3897f","slug":"tutorials","title":"tutorials","owner":{"id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao"}},"type":"notebook","body":{"titling":"auto","title":"Explorable Data","cells":[{"id":0,"value":"md`# Explorable Data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n## 1. Dropdown menu: Select your favorite season!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof season = select({\n title: \"Season\",\n description: \"Please select your favorite season of the year.\",\n options: [\"Spring\", \"Summer\", \"Fall\", \"Winter\"],\n value: \"Fall\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function Time (d) {\n if (d == \"Spring\") {return html`

`} \n else if (d == \"Summer\") {return html`

`}\n else if (d == \"Fall\") {return html`

`}\n else {return html`

`}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"TimeSeason = Time(season)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`\n## 2. Slider: Choose your confidence interval\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof CI = {\nconst s = slider({\n min: 0.5,\n max: 0.999,\n step: 0.01,\n format: \".0%\",\n value: 0.95,\n description: \"Choose the confidence interval you want\"\n})\ns.input.style.width = \"40%\";\nreturn s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"CIbody = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"dataset = [Math.floor(CI * 130 + 77), CI * 100 + 25, CI * 100 + 75, 250 - CI * 100, Math.floor(320 - CI * 25), Math.floor(500 - CI * 250)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"margin = ({top: 20, right: 40, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"svg = d3.select(CIbody)\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"xScale = d3.scaleLinear()\n .domain([0, d3.max(dataset)])\n .range([0, width - margin.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"svg.selectAll(\"rect\")\n .data(dataset)\n .join(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => i * 25)\n .attr(\"width\", d => xScale(d))\n .attr(\"height\", 20)\n .attr(\"fill\", d => \"rgb(\"+ Math.round(d / 1.2) +\", \"+ Math.round(d / 2) +\", \"+ Math.floor(d) +\")\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"svg.selectAll(\"text\")\n .data(dataset)\n .join(\"text\")\n .text(d => d)\n .attr(\"x\", d => xScale(d) + 10)\n .attr(\"y\", (d, i) => i * 25 + 12.5)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"14px\")\n .attr(\"fill\", d => \"rgb(\"+ Math.round(d) +\", \"+ Math.round(d / 1.8) +\", \"+ Math.floor(d / 2) +\")\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`\n## 3. Button: Adding values and reset\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"reset = html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"add = html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {slide, slide_style} from \"@mbostock/slide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"winter_img = FileAttachment(\"winter-img.jpg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"