31:T539,chart = type => { const height = width / 4; const margin = { top: 20, right: 0, bottom: 30, left: 40 }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('width', width) .attr('height', height); const x = d3 .scaleBand() .domain(data.map(d => d.name)) .range([margin.left, width - margin.right]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5)) .call(g => g.select(".domain").remove()); svg .append("g") .selectAll("g.rect") .data(data) .join("g") .attr('class', 'rect') .attr("transform", d => `translate(${x(d.name)}, ${y(d.value)})`) .append('rect') .attr("fill", patterns[type].url) .attr('stroke', 'currentColor') .attr('stroke-width', 2) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()); svg.append(() => patterns[type].defs); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }32:[] 2f:{"title":"Monochromatic visualization","cells":[{"id":0,"value":"md`# Monochromatic visualization\n\nThis is an exploration of black & white visualization. I’ve really liked visualizations that were able to do without color.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"html`

${Object.keys(patterns).map(chart)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof color = DOM.select(['black', 'red', 'blue'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"patterns = ({\n stripes: makePattern(svg`\n \n `),\n diagonalStripes: makePattern(svg`\n \n `),\n boxes: makePattern(svg`\n \n `)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"makePattern = defs => {\n let id = DOM.uid();\n defs.querySelector('pattern').id = id.id;\n return {\n defs,\n url: id.toString()\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = (await d3.csv(\n \"https://gist.githubusercontent.com/mbostock/81aa27912ad9b1ed577016797a780b2c/raw/3a807eb0cbb0f5904053ac2f9edf765e2f87a2f5/alphabet.csv\",\n ({ letter, frequency }) => ({ name: letter, value: +frequency })\n)).sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`#### References\n\n- [Map Showing The Distribution Of The Slave Population Of The Southern States\n](https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~306908~90076814:Map-Showing-The-Distribution-Of-The?sort=Pub_List_No_InitialSort%2CPub_Date%2CPub_List_No%2CSeries_No&qvq=q:subject%3D\"data%20visualization\"%20;sort:Pub_List_No_InitialSort%2CPub_Date%2CPub_List_No%2CSeries_No;lc:RUMSEY~8~1&mi=56&trs=2206), David Rumsey collection. Has a lovely 8-step ramp with gray patterns.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}