2e:null 2f:["$","title",null,{"children":"Marks and Channels in D3 | John Alexis Guerra Gómez | Observable"}] 34:T4c4,{ const height = 300, margin = {left:50, right:10, top: 10, bottom:50}, iwidth = width/2 - margin.left -margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(html`

Example insight

A short description of the chart. Usually what's on the y axis

Example insight

A short description of the chart. Usually what's on the y axis

`; const width = 500, height = 500, svg = d3.select(target).select("#chart") .append("svg") .attr("width", width) .attr("height", height); const margin = ({top: 50, right: 30, bottom: 30, left: 40}), iwidth = width - margin.left - margin.right, iheight = height - margin.top - margin.bottom; const gDrawing = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3.scaleLinear() .domain([0, 1]) .range([0, iwidth]); const y = d3.scaleLinear() .domain([0, 1]) .range([iheight, 0]); const xAxis = svg => svg .attr("transform", `translate(0,${iheight})`) .call(d3.axisBottom(x)); const yAxis = svg => svg .call(d3.axisLeft(y)); gDrawing.append("g") .call(xAxis) .append("text") .style("fill", "black") .style("font-size", "12pt") .text("xAxis") .style("text-anchor", "end") .attr("transform", `translate(${iwidth}, ${30})`); gDrawing.append("g") .call(yAxis) .append("text") .style("fill", "black") .style("font-size", "12pt") .attr("transform", `translate(${0}, -10)`) .text("yAxis"); return target; }37:T6ba,{ const height = 300, margin = {left:50, right:10, top: 10, bottom:50}, iwidth = width/2 - margin.left -margin.right, iheight = height - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width, height)); const x = d3.scaleLinear() .domain([0, d3.max(lineData, d => d.pos)]) .range([0, iwidth]); const y = d3.scaleLinear() .domain([0, d3.max(lineData, d => d.temp)]) .range([iheight, 0]); // const c = d3.scaleOrdinal(d3.schemeCategory10) // A color hue scale with 10 values // .domain(d3.set(studentsData.map(d=> d.program)).values()) const line = d3.line() .x( d=> x(d.pos)) .y( d=> y(d.temp)); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) let tooltip ; g.append("g") .call(d3.axisBottom(x)) .attr("transform", `translate(0,${iheight})`); g.append("g") .call(d3.axisLeft(y)); g.append("path") .style("stroke", "salmon") .style("fill", "none") .attr("d", line(lineData)) g.selectAll("circle") .data(lineData).enter() .append("circle") .attr("cx", d => x(d.pos)) .attr("cy", d => y(d.temp)) .attr("r", 5) .style("fill", "salmon") .on("mouseover", function (d) { console.log(d); tooltip.attr("x", x(d.pos)) .attr("y", y(d.temp) - 15) .text(`temp=${d.temp} pos=${d.pos}`); d3.select(this) .transition() .duration(2000) .attr("r", 20); }); tooltip = g.append("text") .style("font-size", "8pt") .style("font-family", "sans-serif") .style("color", "steelblue") .attr("x", -100); return svg.node(); }38:[] 32:{"id":"cce866b4757ca326","slug":"marks-and-channels-in-d3","title":"Marks and Channels in D3","thumbnail":"9b67e6e67884da51bf86844af8b31d2939902cc0256b81b0fe28fceb63f36cce","access_level":"public","create_time":"$D2018-07-27T17:50:35.586Z","update_time":"$D2020-09-02T20:35:52.006Z","view_time":null,"first_public_time":"$D2019-08-21T17:00:25.103Z","has_unpublished_edits":null,"fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":625,"publish_version":625,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":103,"collection":{"id":"d4a72bc9c6841b90","slug":"d3-tutorials","title":"D3 Tutorials","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Marks and Channels in D3","cells":[{"id":0,"value":"md`# Marks and Channels in D3\n\nData visualization idioms are constructed by taking basic *marks* and modifying their properties using channels to represent data. Marks are basic geometric primitives points, lines, areas and volumes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html` $\"types$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"marks = md`These basic marks can be easily represented on the browser using either SVG or Canvas.\n\nChannels on the other hand are modifications of the marks that allow us to use them to encode data. Let's take a simple example. Lets start with 3 points, and let's said that each one represents a student.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"numPoints = Generators.input(marks.querySelector(\"#slNumPoints\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"studentsData = d3.range(numPoints).map(() => ({\n age: Math.random()*100, \n tuition: Math.random()*2500,\n gpa: Math.random()*4.0,\n program: [\"Engineering\", \"Arts\", \"Math\"][Math.floor(Math.random()*3)]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"{\n const height = 100;\n var svg = d3.select(html`