2d:null 2e:["$","title",null,{"children":"Data types, Aesthetics, Scales | Stephen N. | Observable"}] 33:T452,chart = { let svg = d3.create("svg").attr("viewBox", [0, 0, fullWidth, fullHeight]) let canvas = svg.append("g") .classed("canvas",true) .attr("transform", `translate(${margin.left}, ${margin.top})`) .style("font-family", "Courier New") canvas.selectAll("path") .data(lineData) .join("path") .attr("d", line) .attr("stroke", (d, i)=>colors.get(towns[i])) .attr("stroke-width", 2) .attr("fill", "none") //Add axis canvas.append("g").classed("x axis", true).call(horzAxis); canvas.append("g").classed("y axis", true).call(vertAxis); let callOutWrapper = canvas.append('g').classed('callout', true).attr('dispay', 'none') canvas.append('rect') .attr('width', width) .attr('height', height) .style('opacity', 0) .style('cursor', 'crosshair') .on('mousemove', (event)=>callout(event, callOutWrapper)) .on('mouseout', ()=>{ callOutWrapper.style('display', 'none') }) legend(canvas.append("g").classed("legend", true).attr("transform", `translate(${width}, 0)`), towns) return svg.node(); }34:T476,function callout(event, container){ let [x, y] = d3.pointer(event); container.attr('transform', `translate(${x}, 0)`).style('display', ''); let line = container .selectAll('line.marker') .data([null]) .join('line') .classed('marker', true) .attr('stroke', 'black') .attr('stroke-width', 0.5) .attr('stroke-dasharray', '5') .attr('y2', height) let label = container .selectAll('g.label') .data([null]) .join('g') .classed('label', true) .attr('transform', `translate(0, ${y})`) let frame = label .selectAll('path') .data([null]) .join('path') .attr('fill', 'white') .attr('fill-opacity', 0.7) .attr('stroke', 'black') .attr('stroke-width', 1) let text = label .selectAll('text') .data([null]) .join('text') .style('font-size', '0.6em') text.selectAll('tspan') .data([null]) .join('tspan') .attr('dx', 10) .text(()=>`${d3.format(".2f")(vertScale.invert(y))}°F`) let {width:w, height:h} = text.node().getBBox(); w += 15; frame.attr('d', `M0,0 10,-${h} ${w},-${h} ${w},${h} 10,${h}z`) }35:[{"id":"5619a3a0d7c78ce4c812f86b6488206d69ede43af677220951f5ca73eaa806a26639704ac39b3e9af94961677e3d1932fdcec11382dd0473fb44d7d7811f7238","href":"https://static.observableusercontent.com/files/5619a3a0d7c78ce4c812f86b6488206d69ede43af677220951f5ca73eaa806a26639704ac39b3e9af94961677e3d1932fdcec11382dd0473fb44d7d7811f7238","name":"Temparature 2020 - Kenya towns.csv","type":"text/csv","lastModified":1607525929380.768,"size":437}] 31:{"id":"c23171bdc113cb07","slug":"kenya-towns-temperature-2020","title":"Data types, Aesthetics, Scales","thumbnail":"128e908048369521ff723b8a44f12a30f4242a513aa575811df66f61edefa925","access_level":"public","create_time":"$D2020-12-09T14:57:57.346Z","update_time":"$D2020-12-20T11:20:08.281Z","view_time":null,"first_public_time":"$D2020-12-17T04:24:05.963Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e15d3c8802103c9d","login":"stevndegwa","name":"Stephen N.","avatar_url":"https://avatars-next.observableusercontent.com/3b13f3107a9c610480f776566aa3098f8827169dd092797ccfe35daac6b0e474","tier":"starter_2024"},"version":707,"publish_version":707,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1045db8eaa6575a","login":"stevndegwa","name":"Stephen N.","avatar_url":"https://avatars-next.observableusercontent.com/3b13f3107a9c610480f776566aa3098f8827169dd092797ccfe35daac6b0e474","tier":null}],"members":[{"type":"individual","id":"a1045db8eaa6575a","login":"stevndegwa","name":"Stephen N.","avatar_url":"https://avatars-next.observableusercontent.com/3b13f3107a9c610480f776566aa3098f8827169dd092797ccfe35daac6b0e474","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"44b72f333cc0c757","slug":"data-viz","title":"Data Viz","owner":{"id":"e15d3c8802103c9d","login":"stevndegwa","name":"Stephen N."}},"type":"notebook","body":{"title":"Data types, Aesthetics, Scales","cells":[{"id":0,"value":"md`# Data types, Aesthetics, Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"md`## Kenya Towns Temperature 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`### Data table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"html`

Data Types

Continous (temperature)
Discrete, unordered (towns)
Dicrete, ordered (months)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html`\n \n \n \n \n ${dataset.columns.map((column)=>html``)}\n \n \n \n ${dataset.map((city)=>html`\n \n ${dataset.columns.map((column)=>html``)}\n \n `)}\n \n

${column}
${city[column]}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`### Line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"html`

Aesthetics: \n
1. Positon (month X axis, and temperature Y axis)
2. Color (town)
\n
Scales: \n
1. Months position scale (x axis)
2. Temperature position scale (y axis)
3. Towns color scale
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"lineData = {\n return d3.rollups(dataset, \n (v)=>{\n let e = []; \n v = v[0];\n for(let key in v){\n e.push([key, v[key]]);\n }\n return e.slice(1);\n }, \n (d)=>d.City)\n .map((d)=>d[1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"horzScale = d3.scalePoint().domain(months).range([0, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"horzAxis = (g)=>g.call(d3.axisBottom(horzScale).tickFormat(formatMonths)).attr(\"transform\", `translate(0, ${height})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"vertScale = d3.scaleLinear().domain([0, d3.max(lineData, (d)=>d3.max(d, (d)=>d[1]))]).range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"vertAxis = (g)=>g.call(d3.axisLeft(vertScale).ticks(10).tickFormat(tempFormat)).select(\".domain\").remove()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"line = d3.line().x((d)=>horzScale(d[0])).y((d)=>vertScale(d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"colors = new Map([\n [\"Nairobi\", \"#e91e63\"],\n [\"Kisumu\", \"#64b5f6\"],\n [\"Mombasa\", \"#81c784\"],\n [\"Eldoret\", \"#fdd835\"],\n [\"Mandera\", \"#f4511e\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"function legend(container, labels, symbol = d3.symbol(d3.symbolCircle)){\n let content = container.append(\"g\")\n .classed(\"legend-content\", true)\n .attr(\"transform\", `translate(20, 0)`)\n \n let wrapper = content.append(\"rect\")\n .classed(\"legend-wrapper\", true)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#979a9a\")\n .attr(\"stroke-width\", 1)\n .attr(\"rx\", 10)\n \n let labelsContent = content\n .append('g')\n .attr('transform', 'translate(10, 30)')\n .selectAll(\"g\")\n .data(labels)\n .join(\"g\")\n .attr(\"transform\", (d,i)=>(`translate(0, ${i*30})`))\n \n labelsContent.append(\"path\")\n .attr(\"d\", symbol)\n .attr(\"fill\", (d)=>colors.get(d))\n \n labelsContent.append(\"text\")\n \n .attr(\"y\", 5)\n .attr(\"x\", 10)\n .text((d)=>d)\n \n //let {x, y, width, height} = content.node().getBBox();\n \n wrapper.attr(\"width\", 150).attr(\"height\", 200);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`### Heat Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"html`

Aesthetics: \n
1. Positon (month X axis, and town Y axis)
2. Color (temperature)
\n
Scales:\n
1. Months position scale (x axis)
2. Towns position scale (y axis)
3. Temperature color scale
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"hmData = d3.rollup(dataset, \n (v)=>{\n let e = []; \n v = v[0];\n for(let key in v){\n e.push([key, v[key]]);\n }\n return e.slice(1);\n },\n (d)=>d.City)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"domain = d3.nice(0, d3.max(lineData, (d)=>d3.max(d, (d)=>d[1])), 10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"colorScale = d3.scaleSequential(domain, d3.interpolateInferno)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"horzScale2 = d3.scaleBand().domain(months).range([0, width]).padding(0.02)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"horzAxis2 = (g)=>g.call(d3.axisBottom(horzScale2).tickFormat(formatMonths)).attr('transform', `translate(0, ${height})`).select('.domain').remove();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"vertScale2 = d3.scaleBand().domain(towns).range([0, height]).padding(0.02)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"vertAxis2 = (g)=>{\n let a = g.call(d3.axisLeft(vertScale2));\n \n a.selectAll('text')\n .attr('transform', `rotate(-45) translate(10, -10)`)\n \n a.select('.domain')\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"hmChart = {\n let svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, fullWidth, fullHeight]);\n \n let canvas = svg.append(\"g\").attr('transform', `translate(${margin.left}, ${margin.top})`);\n \n hmData.forEach((v, a)=>{\n canvas.append('g')\n .classed(a,true)\n .selectAll('rect')\n .data(v)\n .join('rect')\n .attr('x', (d)=>horzScale2(d[0]))\n .attr('y', (d)=>vertScale2(a))\n .attr('width', horzScale2.bandwidth())\n .attr('height', vertScale2.bandwidth())\n .attr('fill', (d)=>colorScale(d[1]))\n .attr('stroke', 'none')\n .attr('stroke-width', 0)\n .append('title')\n .text((d)=>(`${tempFormat(d[1])}`))\n })\n \n //axis\n canvas.append('g').classed('x axis', true).call(horzAxis2)\n canvas.append('g').classed('y axis', true).call(vertAxis2)\n \n legend2(canvas.append('g').attr('transform', `translate(${width}, 0)`))\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"function legend2(container){\n let data = d3.ticks(domain[0], domain[1], 10);\n \n let axis = (g)=>g.call(d3.axisRight(d3.scalePoint().domain(data).range([height, 0])).tickFormat(tempFormat)).attr('transform', 'translate(50, 0)').select('.domain').remove()\n \n container.append('defs')\n .append('linearGradient')\n .attr('id', 'grad')\n .attr('x1', '0%')\n .attr('y1', '100%')\n .attr('x2', '0%')\n .attr('y2', '0%')\n .selectAll('stop')\n .data(data)\n .join('stop')\n .attr('offset', (d)=>(d/domain[1]))\n .style('stop-color', (d)=>colorScale(d))\n \n let g = container.append('g').attr('transform', 'translate(20,0)')\n \n g.append('rect')\n .attr('width', 50)\n .attr('height', height)\n .attr('stroke', 'none')\n .attr('fill', 'url(#grad)')\n \n g.append('g').classed('legend-axis',true).call(axis)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"dataset = d3.csvParse(await FileAttachment(\"Temparature 2020 - Kenya towns.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"months = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"margin = ({top:20, right:200, bottom:20, left:40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"fullWidth = width + margin.left + margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"fullHeight = height + margin.bottom + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"function formatMonths(month){\n switch(month){\n case \"January\":\n return \"Jan\";\n case \"February\":\n return \"Feb\";\n case \"March\":\n return \"March\";\n case \"April\":\n return \"April\";\n case \"May\":\n return \"May\";\n case \"June\":\n return \"June\";\n case \"July\":\n return \"July\";\n case \"August\":\n return \"Aug\";\n case \"September\":\n return \"Sept\";\n case \"October\":\n return \"Oct\";\n case \"November\":\n return \"Nov\";\n case \"December\":\n return \"Dec\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"tempFormat = (d)=>(`${d} °F`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"towns = [\"Nairobi\", \"Kisumu\", \"Mombasa\", \"Eldoret\", \"Mandera\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"