31: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(); }32:T6c1,style = html``33:[] 2f:{"title":"VISUAL ENCODING BUTTON | HTML","cells":[{"id":0,"value":"md`# VISUAL ENCODING BUTTON | HTML`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":719,"value":"html`\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":16,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"margin = ({top: 10, right: 10, bottom: 10, left: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"w = 950","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}