31:Tc44,viz = { const viz = d3.create("div").attr("class","viz") const svg = viz.append("svg") .attr("width",w) .attr("height",h) .attr("viewBox",[0,0,w,h]) const size = 600; const squareSize = 60; const authorTooltip = d3.select("body") .append("div") .attr("class","writerTooltip") .style("visibility","hidden") const scale = d3.scaleLinear() .domain([0,10]) .range([0,size]); const swatch = swatches({ colour: d3.scaleOrdinal(["activist","artist","author","journalist", "playwright","poet","publisher","scholar","sociologist"], ["#fed7af", "#00ffff", "#89065b", "#ffea47", "#e94f37", "#6477b9", "#fbd1fb", "#ffa50a", "#ffffff"]), swatchRadius: 8,}) const author = svg.append("g").attr("class","legend") .attr("transform",`translate(${w/2-310},100)`) .append(()=>swatch); const waffle = svg.append("g") .attr("transform",`translate(${w/2-290},200)`) .selectAll("rect") .data(data) .enter() .append("a") .attr("xlink:href",d=>d.Work) .attr("target","_blank") .append("rect") .attr("class","waffle") .attr("x",(d,i)=>{ const n = i % 10 return scale(n) }) .attr("y",(d,i)=>{ const n = Math.floor(i/10) return scale(n) }) .attr("width",squareSize-10) .attr("height",squareSize-10) .attr("stroke-width",1.5) .attr("stroke",d=>colorScale(d.Type)) .style("fill",d=> {if (d.Awards!="-"){return pattern.url()} else {return "transparent"}}) .on("mousemove",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",3) authorTooltip.transition() .duration(200) .style("visibility","visible") authorTooltip.html("

"+d.Name+"("+d.YearWritten+")"+"

"+d.About) .style("transform","translateY(-55%)") .style("left",(event.x)+10+"px") .style("top",(event.y)-15+"px") }) .on("mouseout",function (event,d){ d3.select(this).style("opacity",1).attr("stroke-width",2) authorTooltip.transition().style("visibility","hidden") }) svg.call(pattern) return viz.node() }32:T559,writerTimeline = { timeline const annotations = timelineData.map((d,i)=>{ return{ x:(timelineScale(d.YearWritten)<=250)?250:350, y:i*140+25, dy:0, dx: timelineScale(d.YearWritten)<=250? -70:70, color:"white", note:{ label:d.Awards, title:d.Name +" "+"("+ d.YearWritten +")" } }}) const type = d3.annotationCustomType(d3.annotationLabel, {"className":"custom", "connector":{"end":"dot"}, "note":{"align":"middle", "orientation":"leftRight", "lineType":"vertical"}}) const makeAnnotations = d3.annotation() .notePadding(10) .type(type) .textWrap(250) .annotations(annotations) d3.select("#svg2").append("g") .attr("transform",`translate(${w/2-320},50)`) .call(makeAnnotations) }33:[{"id":"b82d5b10f9aa19b29171cf53524e59610f42928cd32f05f1fab90e92c7789123c2d6a0848edd6dd0f2e6eafde53d0b50a5180b9a56bc973e08fc72d570de4701","href":"https://static.observableusercontent.com/files/b82d5b10f9aa19b29171cf53524e59610f42928cd32f05f1fab90e92c7789123c2d6a0848edd6dd0f2e6eafde53d0b50a5180b9a56bc973e08fc72d570de4701","name":"africanAmericanWriters.csv","type":"text/csv","lastModified":1613761599555.061,"size":40871}] 2f:{"title":"African American Writers","cells":[{"id":1190,"value":"html\n`

African American Writers

A chronological visualization of 100 African American Authors. Each tile is an individual writer with colour indicating the type of work they did.
- Hover over each tile for more information about the writer.
- Click on individual tile to read their literary work.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"html\n`

A Timeline of African American Writers.

Each shaded tile is a writer who was recognised for their lifetime achievements.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"timeline = {\n \n \n \n const viz = d3.create(\"div\")\n \n const svg = viz.append(\"svg\").attr(\"id\",\"svg2\")\n .attr(\"width\",w)\n .attr(\"height\",h2)\n .attr(\"viewBox\",[0,0,w,h2])\n \n const timeline = svg.append(\"g\")\n .attr(\"transform\",`translate(${w/2-320},50)`)\n .selectAll(\"timeline\")\n .data(timelineData)\n .join(\"rect\")\n .attr(\"class\",\"timeline\")\n .attr(\"x\",(d,i)=>timelineScale(d.YearWritten))\n .attr(\"y\",(d,i)=>i*140)\n .attr(\"width\",50)\n .attr(\"height\",50)\n .attr(\"stroke-width\",1.5)\n .attr(\"stroke\",d=>colorScale(d.Type))\n .style(\"fill\",pattern.url())\n \n \n \n \n return viz.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"html\n`
\n

Data Credits: \nWikipedia - List of African-American writers\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"timelineScale = d3.scaleOrdinal()\n .domain(timelineData.map(d=>d.YearWritten))\n .range([250,300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"timelineData = data.filter(d=>d.Awards!=\"-\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"authorLegend = d3.scaleOrdinal()\n .domain([\"activist\",\"artist\",\"author\",\"journalist\",\"physician\",\"playwright\",\"poet\",\"publisher\",\"scholar\",\"sociologist\"])\n .range([\"#393e41\",\"cyan\",\"#89065b\",\"#ffea47\",\"#e94f37\",\"#cfc9c9\",\"#6477b9\",\"#ffa50a\",\"white\",\"#0acdff\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"colorScale = d3.scaleOrdinal()\n.domain([\"activist\",\"artist\",\"author\",\"journalist\",\n \"playwright\",\"poet\",\"publisher\",\"scholar\",\"sociologist\"])\n .range(color)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"color = [\"#fed7af\",\n\"#00ffff\",\n\"#89065b\",\n\"#ffea47\",\n\"#e94f37\",\n\"#6477b9\",\n\"#fbd1fb\",\n\"#ffa50a\",\n\"#ffffff\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"pattern = textures.lines()\n .size(7)\n .strokeWidth(0.9)\n .background(\"transparent\")\n .stroke(\"#6b3395\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"h2 = 6200","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"h = 900;","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"w = width;","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = FileAttachment(\"africanAmericanWriters.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"import {swatches} from \"@bayre/svg-swatches\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"d3 = require('d3@6','d3-svg-annotation')","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}