2f:T41f,html``30:T4bc,{ const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const yTitle = g => g .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", 10) .text("↑ Frequency"); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "%")) .call(g => g.select(".domain").remove()); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const bar = svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.letter)) .attr("y", d => y(d.frequency)) .attr("height", d => y(0) - y(d.frequency)) .attr("width", x.bandwidth()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.call(yTitle); // svg // .append('g') // .attr('transform', `translate(0,${height - margin.bottom})`) // .call(d3.axisBottom(x)); // svg // .append("g") // .attr("transform", `translate(${margin.left},0)`) // .call(d3.axisLeft(y)); return svg.node(); }31:Tf56,function makeChart({ data, format, color, colTitle, title, type_ = "Display", colorScale, pointer, xBuffer = 175 / 954 }) { const barHeight = (35 / 954) * width; const titleSize = pxToVw(16.5); const header = type_ === "Display" ? "Zone" : "Team"; const dataWithZone = [{ name: header, value: 0 }].concat(data); const height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom; const x = d3 .scaleLinear() .domain(d3.extent(dataWithZone, d => d.value)) .rangeRound([margin.left + xBuffer * width, width - margin.right]); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); function fillFunction(d) { if (colorScale) return colorScale(d.value); if (type_ === "Display") return color; else return d.name.includes("Bucks") ? "darkgreen" : "#94ae83"; } const y = d3 .scaleBand() .domain(d3.range(dataWithZone.length)) .range([margin.top, height - margin.bottom]) .paddingInner(.4); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickSize(0) .tickFormat(i => dataWithZone[i].name) ) .selectAll("text") .attr("dy", "0.785em") .attr("text-anchor", "start"); const rect = svg .append("g") .selectAll("rect") .data(dataWithZone) .join("rect") .attr("fill", d => fillFunction(d)) .attr("x", d => x(Math.min(d.value, 0))) .attr("y", (_, i) => y(i) + (y.step() - y.bandwidth()) / 2) .attr("width", d => Math.abs(x(d.value) - x(0))) .attr("height", y.bandwidth()) .attr("id", d => d.name) .attr("opacity", ".8") .attr("style", `cursor: ${pointer}`); svg .append("g") .attr("font-family", "sans-serif") .selectAll("text") .data(dataWithZone) .join("text") .attr("text-anchor", d => (d.value < 0 ? "end" : "start")) .attr("x", (d, i) => { if (i === 0) return x(0) + 1; return x(d.value) + Math.sign(d.value - 0) * 4; }) .attr("y", (d, i) => y(i) + y.step() / 2) .attr("dy", "0.35em") .attr("font-size", (d, i) => (i === 0 ? titleSize : pxToVw(14))) .attr("font-weight", (d, i) => { if (i === 0) return "bold"; }) .text((d, i) => { if (i > 0) return format(d.value); else return colTitle; }); svg .append("g") .selectAll("line") .data(dataWithZone) .join("line") .attr("x1", x.range()[0] - xBuffer * width) .attr("x2", x.range()[1]) .attr("y1", (d, i) => y(i) + y.step()) .attr("y2", (d, i) => y(i) + y.step()) .attr("style", "stroke: lightgrey; stroke-width: 1.5px; opacity: .25"); const zeroValue = d3.line()([ [x(0), y(0) + y.step()], [x(0), y(dataWithZone.length - 1) + y.step()] ]); svg .append("g") .append("path") .attr("d", zeroValue) .attr("style", "stroke: lightgrey; stroke-width: 2.5px"); svg .append("g") .call(yAxis) .call(g => g.select(".domain").remove()) .selectAll("text") .attr("font-size", (d, i) => (i === 0 ? titleSize : pxToVw(15))) .attr("font-weight", (d, i) => { if (i === 0) return "bold"; }); const chart = svg.node(); let titleDiv = `

`; if (title) titleDiv = `

${title}

`; const container = html` ${titleDiv} ${chart}

`; container.value = null; rect .on('mouseover', function() { d3.select(this).attr('opacity', '1'); container.value = d3.select(this).attr("id"); container.dispatchEvent(new CustomEvent("input")); }) .on('mouseout', function(d, i) { d3.select(this).attr('opacity', '.8'); container.value = null; container.dispatchEvent(new CustomEvent("input")); }); return container; }32:[{"id":"f72488c0dc29726aa1a5e2158aa90a2ac09b54807f99aa520a217e85b3a1a90f67cfa2ce56f6e34b780afb991782853d6ef6310e07006cc5ee17727895fec9a6","href":"https://static.observableusercontent.com/files/f72488c0dc29726aa1a5e2158aa90a2ac09b54807f99aa520a217e85b3a1a90f67cfa2ce56f6e34b780afb991782853d6ef6310e07006cc5ee17727895fec9a6","name":"Active_users.csv","type":"text/csv","lastModified":1590826222585.442,"size":38593},{"id":"8ea5e7e4c614f5750b5e484011d93bec301123e27978e4835d9abe040a2d51a6dd49c51f39ebe03299aaac9e501243017fde46d33facf2f630729a08c98d11c3","href":"https://static.observableusercontent.com/files/8ea5e7e4c614f5750b5e484011d93bec301123e27978e4835d9abe040a2d51a6dd49c51f39ebe03299aaac9e501243017fde46d33facf2f630729a08c98d11c3","name":"alphabet.csv","type":"text/csv","lastModified":1590850058209.845,"size":274}] 2d:{"title":"Rough notebook","cells":[{"id":0,"value":"md`# Rough notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`From [Introduction to D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"gapminder = (await require('vega-datasets'))['gapminder.json']()","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"listData = gapminder\n .filter(d => d.year === 2005)\n .sort((a, b) => b.pop - a.pop)\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"active = {\n const text = await FileAttachment(\"Active_users.csv\").text();\n // const parseDate = d3.utcParse(\"%Y-%m-%d\");\n return d3.csvParse(text, d => ({\n ...d,\n month: new Date(d.month.split(' ')[0]),\n sessions: +d.sessions\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## D3 scales`","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"fruits = [\n { name: \"🍊\", count: 21 },\n { name: \"🍇\", count: 13 },\n { name: \"🍏\", count: 8 },\n { name: \"🍌\", count: 5 },\n { name: \"🍐\", count: 3 },\n { name: \"🍋\", count: 2 },\n { name: \"🍎\", count: 1 },\n { name: \"🍉\", count: 1 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"color = d3.scaleOrdinal(d3.schemeTableau10).domain(barData.map(d => d.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"barData = d3\n .nest()\n .key(d => d.cluster)\n .rollup(vals => ~~d3.mean(vals, d => d.life_expect))\n .entries(gapminder.filter(d => d.year === 2005))\n .sort((a, b) => +a.key - +b.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"{\n const data = [4, 8, 15, 16, 23, 42];\n\n const x = d3\n .scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, 300]);\n\n const div = d3\n .create(\"div\")\n .style(\"font\", \"10px sans-serif\")\n .style(\"text-align\", \"right\")\n .style(\"color\", \"white\");\n\n div\n .selectAll(\"div\")\n .data(data)\n .join(\"div\")\n .style(\"background\", \"steelblue\")\n .style(\"padding\", \"3px\")\n .style(\"margin\", \"1px\")\n .style(\"width\", d => `${x(d)}px`)\n .text(d => d);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md `## Coding a chart automatically`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"{\n const data = [4, 8, 15, 16, 23, 42];\n\n const width = 640;\n\n const x = d3\n .scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, width]);\n\n const y = d3\n .scaleBand()\n .domain(d3.range(data.length))\n .range([0, 20 * data.length]);\n\n const svg = d3\n .create('svg')\n .attr(\"width\", width)\n .attr(\"height\", y.range()[1])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\");\n\n const bar = svg\n .selectAll('g')\n .data(data)\n .join('g')\n .attr(\"transform\", (d, i) => `translate(0,${y(i)})`);\n\n bar\n .append(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"width\", x)\n .attr(\"height\", y.bandwidth() - 2);\n\n bar\n .append(\"text\")\n .attr(\"fill\", \"black\")\n .attr(\"x\", d => x(d) + 15)\n .attr(\"y\", y.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.frequency)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"x = d3\n .scaleBand()\n .domain(data.map(d => d.letter))\n .rangeRound([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"margin = ({ top: 20, right: 0, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"[margin.left, width - margin.left]","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"data = d3.csvParse(await FileAttachment(\"alphabet.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md `## Deep dive bar table`","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"function pxToVw(px) {\n return `${(px / 954) * 100}vw`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"makeChart({\n data: [\n { name: \"🍅Tomatoes\", value: .323 },\n { name: \"🍎 Apples\", value: .260 },\n { name: \"🍊 Oranges\", value: .160 },\n { name: \"🍐 Pears\", value: .450 },\n { name: \"🍋 Lemon\", value: .10 },\n { name: \"🍑 Peach\", value: .120 },\n { name: \"🥭 Mango\", value: .30 }\n ],\n format: d3.format(\".1%\"),\n title: \"Favourite fruits\",\n type_: \"Compare\",\n xBuffer: 100 / width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md `## Global Temperature Trends`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}