30:T4a9,function chart(data, comment, symbols, hachures) { const x = d3.scaleLinear(d3.extent(data, d => d.x), [20, width - 20]); const y = d3.scaleLinear(d3.extent(data, d => d.y), [20, height - 23]); const s = d3.scaleOrdinal(new Set(data.map(d => d.type)), symbols); const r = d3.scaleSqrt(); const svg = d3 .create("svg") .attr("viewBox", `0 0 ${width} ${height + 60}`) .attr("width", width) .classed("chart", true); if (hachures) svg.call(hachures); svg .append("rect") .attr("x", 1) .attr("y", 1) .attr("width", width - 2) .attr("height", height - 2) .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke", "black"); svg .append("defs") .selectAll() .data(symbols) .join("g") .attr("id", d => d[0]) .html(d => d[1]); svg .append("g") .selectAll() .data(data) .join("use") .attr("href", d => "#" + s(d.type)[0]) .attr("transform", d => `translate(${x(d.x)},${y(d.y)})scale(${r(3.8)})`); svg .append("foreignObject") .attr("width", width) .attr("height", 55) .attr("y", height + 5) .append("xhtml:div") .html(comment); return svg.node(); }31:[{"id":"19a959748046327805b05d15c473f043b31a6a0feb7d1e8d8ead650cab2d9de79dd825a6fbb6fe47cf087e57e9eb82e1e8ce6b310838887fe8306a4322d27e9e","href":"https://static.observableusercontent.com/files/19a959748046327805b05d15c473f043b31a6a0feb7d1e8d8ead650cab2d9de79dd825a6fbb6fe47cf087e57e9eb82e1e8ce6b310838887fe8306a4322d27e9e","name":"data.csv","type":"text/csv","lastModified":1607859499894.335,"size":715}] 2e:{"title":"Scintillating symbols","cells":[{"id":0,"value":"md`# Scintillating symbols\n\nRecreation of an early work by Jacques Bertin, in _Paris et l'agglomération parisienne_ (Paul-Henry Chombart de Lauwe, 1952, tome II, chapitre 3 “Recherches graphiques”, page 36). Bertin later generalized this type of observations in _Semiology of Graphics._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"html`${chart0.outerHTML} ${chart1.outerHTML} ${chart2.outerHTML}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`The purpose is to demonstrate that **chart b)**, which uses “scintillating” or “sparkling” symbols, is better than **a)** and than **c)**, since it can be used to perform two visual operations:\n- _fusion_: i.e. see the overall distribution of the data points, and\n- _selection_: identification of patterns within that distribution.\n\nIn _Sémiologie graphique_ (1967) this will be clarified as being the “vibratory effect of texture” (page 80); in the epilogue of the book, Bertin remarks:\n\n> _In “Paris and the Parisian Region” (1952), Paul-Henry Chombart de Lauwe spoke of differences in VALUE, SHAPE, and SCINTILLATION. It was noted that value and “scintillation” (texture) are much more selective than \ndifferences in shape, which make it difficult to distinguish one type of sign from another. In 1957 in a publication of the Ecole Estienne, COLOR was added, while “scintillation” became “TEXTURE.”_ (Translation: William J. Berg.)\n\n\n------\n_code_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"// digitized by @fil\ndata = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"chart0 = chart(\n data,\n \"a) Difference in shape. The complete fusion is striking. Selection is difficult.\",\n new Map([\n [\n \"circle\",\n ``\n ],\n [\"triangle\", ``],\n [\n \"square\",\n ``\n ]\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"chart1 = chart(\n data,\n \"b) Difference in scintillation. Selection is easier to operate. Complete fusion is obtained by looking at the drawing from a distance of 1 meter.\",\n new Map([\n [\n \"circle1\",\n ``\n ],\n [\n \"eye\",\n `\n `\n ],\n [\"cross\", ``]\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"chart2 = chart(\n data,\n \"c) Difference in value. Selection is striking, fusion is more difficult to achieve.\",\n new Map([\n [\n \"circle01\",\n // the black circle must be larger because of its white stroke\n ``\n ],\n [\n \"circle02\",\n ``\n ],\n [\n \"circle03\",\n\n ``\n ]\n ]),\n hachures02\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"hachures02 = textures\n .lines()\n .orientation(\"6/8\")\n .size(2.2)\n .strokeWidth(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`---\n_Experimental zone…_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"chart3 = chart(\n data,\n \"Colors might be helped by different shapes.\",\n new Map([\n [\n \"circle31\",\n ``\n ],\n [\n \"eye3\",\n `\n `\n ],\n [\n \"cross3\",\n ``\n ]\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 292","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"width = height","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"cross = {\n const p = d3.path();\n d3.symbolCross.draw(p, 58); // 64 is a bit too much\n return \"\" + p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"triangle = {\n const p = d3.path();\n d3.symbolTriangle.draw(p, 60);\n return \"\" + p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"textures = require(\"textures@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}