29:null 2a:["$","title",null,{"children":"Monochromatic visualization | Tom MacWright | Observable"}] 2f: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(); }30:[] 2d:{"id":"961fb943a2ed32c3","slug":"monochromatic-visualization","title":"Monochromatic visualization","thumbnail":"5cf7f0d0d3acd6e9facef4aca7b2383d1030b3c23af5c4797b9f7bf2f0d976f6","access_level":"public","create_time":"$D2019-09-24T04:09:36.394Z","update_time":"$D2019-10-07T16:51:24.999Z","view_time":null,"first_public_time":"$D2019-09-26T18:22:12.275Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":185,"publish_version":185,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"6bc6860a04a990e5","slug":"b-w","title":"B&W","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof color = DOM.select(['black', 'red', 'blue'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"