2c:null 2d:["$","title",null,{"children":"VISUAL ENCODING BUTTON | HTML | Sandraviz | Observable"}] 32:T92e,chart = { const svg = d3.select(DOM.svg(w, h)); let x = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[0])]) .range([margin.left, w - margin.right]); let r = d3 .scaleSqrt() .domain([0, d3.max(data, (d) => d[0])]) .range([10, 1]); let c = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[0])]) .range(["#323D3D", "#B8E0E0"]); let o = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[0])]) .range([1, 0.001]); let s = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[0])]) .range([2.5, 0.01]); let y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d[1])]) .rangeRound([h - margin.bottom, margin.top]); var circle = svg .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d) => x(d[0])) .attr("cy", (d) => y(d[1])) .attr("stroke-width", 0) .style("stroke", "black") .attr("r", 6) .attr("fill-opacity", 0.8) .style("fill", "black"); d3.select("#radius").on("click", function () { circle .transition() .duration(1000) .attr("stroke-width", 0) .style("stroke", "black") .attr("fill-opacity", 0.5) .style("fill", "black") .attr("r", (d) => r(d[0])); }); d3.select("#color").on("click", function () { circle .transition() .duration(1000) .attr("stroke-width", 0) .style("stroke", "black") .attr("r", 6) .attr("fill-opacity", 1) .style("fill", (d) => c(d[0])); }); d3.select("#opacity").on("click", function () { circle .transition() .duration(1000) .attr("stroke-width", 0) .style("stroke", "black") .attr("r", 6) .attr("fill-opacity", (d) => o(d[0])) .style("fill", "black"); }); d3.select("#stroke").on("click", function () { circle .transition() .duration(1000) .attr("r", 6) .attr("fill-opacity", 0) .style("fill", "black") .style("stroke", "black") .attr("stroke-width", (d) => s(d[0])); }); d3.select("#reset").on("click", function () { circle .transition() .duration(1000) .attr("stroke-width", 0) .style("stroke", "black") .attr("r", 6) .attr("fill-opacity", 0.8) .style("fill", "black"); }); return svg.node(); }33:T6c1,style = html``34:[] 30:{"id":"add33a665c9cbf9a","slug":"visual_encoding_button","title":"VISUAL ENCODING BUTTON | HTML","thumbnail":"2b69a6167267f5b4e85d35621cdab76342590c7f78f1074b1af9e79cb18a658f","access_level":"public","create_time":"$D2021-07-22T14:10:38.695Z","update_time":"$D2023-05-23T16:12:59.960Z","view_time":null,"first_public_time":"$D2021-07-22T14:33:07.958Z","has_unpublished_edits":null,"fork":{"id":"7c70d4e8cfbfccda","slug":"log-scatter-plot","title":"SCATTER PLOT WITH AXES","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/e6a2480f89a40dcfbe75f19d5081ae2296848971c4b934ed0499fd3b7f1973eb","tier":"starter_2024"},"version":907,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}],"members":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"5fd1d6addd68348a","slug":"30-days-of-d3-dataviz","title":"30 days of d3.js data viz","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"type":"notebook","body":{"titling":"auto","title":"VISUAL ENCODING BUTTON | HTML","cells":[{"id":0,"value":"md`# VISUAL ENCODING BUTTON | HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"md`“When a graph is constructed, quantitative and categorical information is encoded, chiefly through position, shape, size, symbols, and color. When a person looks at a graph, the information is visually decoded by the person’s visual system. A graphical method is successful only if the decoding is effective.”\n\nCleveland & McGill\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"html`\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"data = {\n\n let data_random = [];\n\t\n for (let i = 0; i < 3500; i++) {\n\t\n const newNumber1 = Math.floor(Math.random() * 1000);\n\tconst newNumber2 = Math.floor(Math.random() * 1000);\n\n data_random.push([newNumber1, newNumber2]);\n }\n \n return data_random; \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"margin = ({top: 10, right: 10, bottom: 10, left: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"w = 950","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"