3e:null 3f:["$","title",null,{"children":"HTML, CSS, SVG, and JavaScript | Xianbin Gu (Bing) | Observable"}] 45:T46c,face = { const svg = d3.create('svg') .attr("width", 800) .attr("height", 800); let g = svg.append("g") .attr("id", "background") .attr("transform", "translate(" + 400 + "," + 400 + ")"); g.append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', 300) .attr('fill','yellow') .on('mouseover', function(event, d){ d3.select(this).attr('fill', 'lightgreen'); mouth.attr('d', 'M -150 100 S 0 50 150 100') d3.selectAll(".eye").attr("fill", 'red'); }) .on('mouseout', function(event, d){ d3.select(this).attr('fill', 'yellow'); d3.select('#mouth').attr('d', 'M -150 100 S 0 200 150 100'); d3.selectAll(".eye").attr("fill", 'black'); }) g.append('circle') .attr('cx', -150) .attr('cy', -150) .attr('r', 50) .attr('class', "eye"); g.append('circle') .attr('cx', 150) .attr('cy', -150) .attr('r', 50) .attr('class', "eye"); const mouth = g.append('path') .attr('d', 'M -150 100 S 0 200 150 100') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', '20') .attr('id', 'mouth') return svg.node() }46:Tab0,scatterplot = { const WIDTH=800; const HEIGHT=600; const svg = d3.create("svg") .attr("width", WIDTH) .attr("height", HEIGHT); // const data = d3.csv('https://gist.githubusercontent.com/hogwild/c2704a1ae38c0a36983bc13121050dac/raw/7fd577be21752939375d92cd3a808558106e903b/oldFaithfulGeyserDataset.csv').then(data => { console.log(data); data.forEach(d => { d.eruptions = +d.eruptions; d.waiting = +d.waiting; }); let margin = { top: 120, bottom: 120, left: 120, right: 120 }; let width = svg.attr("width") - margin.left ; let height = svg.attr("height") - margin.top; let xScale = d3.scaleLinear() .range([0, width]) .domain([0, d3.max(data, (d)=> d.eruptions)]) .nice(); let yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(data, (d)=> d.waiting)]) .nice(); let g = svg.append("g") .attr("id", "background") .attr("transform", "translate(" + 100 + "," + 100 + ")"); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale) .ticks(5); g.append('g') .attr("transform", "translate(0," + (height) + ")") .attr('class', 'x-axis') .call(xAxis); g.append('g') .attr('class', 'y-axis') .call(yAxis); // Create rectangle FIRST but hidden const coverRect = g.append("rect") .attr("id", "cover") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .style("fill", "lightgreen") .style("opacity", 0) // Start hidden .style("pointer-events", "none"); // Don't block mouse events g.selectAll('.point') .data(data) .enter() .append('circle') .attr('class', "point") .attr("cx", d => xScale(d.eruptions)) .attr('cy', d =>yScale(d.waiting)) .attr('r', "5") .style('fill', 'steelblue') .style('stroke', 'black') .on('mouseover', function(d){ coverRect.style("opacity", 0.6).raise(); // Show rectangle d3.select(this).style('fill', 'red').raise(); }) .on('mouseout', function(d){ coverRect.style("opacity", 0); // Hide rectangle d3.select(this).style('fill', 'steelblue'); }) //adding axis-lables g.append('g') .attr("class", 'axis-lable') .attr('transform', 'translate(0,' + (-20) + ')') .append("text") .style("text-anchor", 'middle') .text("Waiting") g.append('g') .attr("class", 'axis-lable') .attr('transform', 'translate(' + (width-30) + ',' +(height-10) + ')') .append("text") .style("text-anchor", 'middle') .text("Eruption") }); return svg.node(); }47:[] 43:{"id":"22d038810ed68a25","slug":null,"title":"HTML, CSS, SVG, and JavaScript","thumbnail":"289f72c693c51969cd6cab658fdee67b2b65befe5497c924ccd07e6ca90b3920","access_level":"public","create_time":"$D2025-10-23T07:28:56.811Z","update_time":"$D2025-11-05T07:19:07.055Z","view_time":null,"first_public_time":"$D2025-10-26T08:12:34.200Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc47cb92b6f2e60d","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":"starter_2024","bio":"A Ph.D. in information science. My research interests are machine learning and its applications in image processing and data analysis. ","following":false},"version":201,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c89db03381bed69a","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":null,"bio":"A Ph.D. in information science. My research interests are machine learning and its applications in image processing and data analysis. ","following":false}],"members":[{"type":"individual","id":"c89db03381bed69a","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":null,"role":"editor"},{"type":"team","id":"dc47cb92b6f2e60d","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HTML, CSS, SVG, and JavaScript","cells":[{"id":0,"value":"# HTML, CSS, SVG, and JavaScript\n- Examples for lab 4 and 5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"{\n let name = \"world\";\n console.log(`Hello ${name}`);\n console.log(1 === '1');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"\n\n

Example: HTML and CSS

Sausage
Fried noodle
Baozi meat
Banana pancake

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"

SVG example: Making a face

Can you add a nose for me?

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"# JavaScript: Array methods\n- array.forEach()\n- array.map()\n- array.filter()\n- array.reduce()\n- the chain rule, e.g., array.map(...).filter(...)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"laptops = [{make:\"lenovo\", price: 1000}, {make:\"dell\", price: 1500}, {make: \"hp\", price: 2000}, {make:\"Apple\", price: 2500}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"laptops.map(d=>d.price).filter(d => d>1500)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"# D3 introduction\n- create an HTML container (e.g., div, svg): d3.create('div')/d3.create('svg')\n- select the DOM node: d3.select('id of the tag')/d3.selectAll('class name of the tags')\n- append a DOM node to its parent node: parent_node_name.append('circle')\n- set attributes for a node: node_name.attr('attribute_name', value)\n- get attribute value from a node: node_name.attr('attribute_name') ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"## Make a face using D3\n### special syntax for Obeservable Notebook:\n- A cell can run multiple statements (e.g., a whole JS program) but you should wrap the statements with a {}\n- If the program in the cell need to render a webpage in Observable Notebook, you should add a return statement in the {}, which returns the root node of the program. For example, the below JS programe drawing a face, and the root node of it is the svg, so it should return svg.node() to let the cell render the objects.\n- In D3, we can add mouse event to an object by .on() method.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"## Create a scatter plot using D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"## Integrate views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"// Create final visualization composition\n// finalVisualization = {\n// const container = d3.create(\"div\");\n \n// // Add title\n// container.append(\"h2\")\n// .text(\"Scatter Plot and Face\")\n// .style(\"text-align\", \"center\");\n \n// // Add view 1\n// container.append(() => scatterplot);\n \n// // Add view 2\n// container.append(() => face)\n// .style(\"margin-top\", \"20px\");\n \n// return container.node();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"