2b:null 2c:["$","title",null,{"children":"Notes on Semiology of Graphics | Hamza Amjad | Observable"}] 31:T8ad,figure_one = svg``32:T9c9,figure_two = svg``33:Tc1b,figure_three = { const data = {}; const svg = d3 .create("svg") .attr("width", "52mm") .attr("height", "57mm"); const frame = svg .append("rect") .attr("x", "1mm") .attr("y", "1mm") .attr("width", "50mm") .attr("height", "55mm") .attr("fill", "white") .attr("stroke", "black"); svg .append("text") .attr("x", "30mm") .attr("y", "4mm") .attr("font-family", "Open Sans") .attr("font-size", "3.5mm") .attr("dominant-baseline", "middle") .text("STOCK X"); svg .append("text") .attr("x", "25mm") .attr("y", "8mm") .attr("font-family", "Open Sans") .attr("font-size", "2mm") .attr("dominant-baseline", "middle") .text("Paris exchange, cash"); svg .append("text") .attr("x", "23.5mm") .attr("y", "10mm") .attr("font-family", "Open Sans") .attr("font-size", "2mm") .attr("dominant-baseline", "middle") .text("payment, closing price"); svg .append("circle") .attr("cx", "4.5mm") .attr("cy", "44.5mm") .attr("r", "1.5mm"); const bullet_one = svg .append("text") .attr("x", "0mm") .attr("y", "0mm") .attr("font-family", "Open Sans") .attr("font-size", "3mm") .attr("dominant-baseline", "middle") .attr("transform", "translate(0, 0) rotate(-90)") .text("FRANCS"); bullet_one.attr('x', '-40mm').attr('y', '5mm'); svg .append("circle") .attr("cx", "10mm") .attr("cy", "50.5mm") .attr("r", "1.5mm"); svg .append("text") .attr("x", "14mm") .attr("y", "50.5mm") .attr("font-family", "Open Sans") .attr("font-size", "3mm") .attr("dominant-baseline", "middle") .text("JUNE 1959"); const x = d3 .scalePoint() .domain([1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 15]) .range([mm_to_px(14), mm_to_px(44)]); svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(${mm_to_px(0)},${mm_to_px(43.5)})`) .style("font-family", "Open Sans") .style("font-size", "2.2mm") .call( d3 .axisBottom(x) .tickSizeOuter(0) .tickSizeInner(mm_to_px(1)) ); svg .selectAll(".x-axis") .selectAll("line") .attr("y2", -mm_to_px(1)); const y = d3 .scaleLinear() .domain([400, 440]) .range([mm_to_px(43.5), mm_to_px(14)]); svg .append("g") .attr("transform", `translate(${mm_to_px(14)},0)`) .style("font-family", "Open Sans") .style("font-size", "2.2mm") .call( d3 .axisLeft(y) .ticks(4) .tickSize(mm_to_px(1)) ); svg .append("line") .attr('x1', mm_to_px(44) + px_to_mm(166.1875) - 44) .attr('y1', mm_to_px(43.5)) .attr('x2', mm_to_px(44) + px_to_mm(166.1875) - 44) .attr('y2', mm_to_px(14)) .attr('stroke', 'black') .attr('stroke-width', 0.75); svg .append("line") .attr('x1', mm_to_px(44) + px_to_mm(166.1875) - 44) .attr('y1', mm_to_px(14)) .attr('x2', mm_to_px(14)) .attr('y2', mm_to_px(14)) .attr('stroke', 'black') .attr('stroke-width', 0.75); return svg.node(); }34:[] 2f:{"id":"1127ac747592e49e","slug":"notes-on-semiology-of-graphics","title":"Notes on Semiology of Graphics","thumbnail":"84f7551be36643e65902b1f4c47b44e210630ff5bb16240f68fb8526b7e6b1c6","access_level":"public","create_time":"$D2020-12-11T17:10:23.111Z","update_time":"$D2021-02-05T04:42:29.549Z","view_time":null,"first_public_time":"$D2020-12-15T16:17:09.459Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"94ec2c192e76a917","login":"hamzaamjad","name":"Hamza Amjad","avatar_url":"https://avatars-next.observableusercontent.com/5f8ce1ecf5125d1485b2d84a32df05d44154c33343eb404b136c425f2dfb5ebe","tier":"starter_2024"},"version":533,"publish_version":533,"role":null,"authored":false,"authors":[{"type":"individual","id":"9efdccbbde682173","login":"hamzaamjad","name":"Hamza Amjad","avatar_url":"https://avatars-next.observableusercontent.com/5f8ce1ecf5125d1485b2d84a32df05d44154c33343eb404b136c425f2dfb5ebe","tier":null}],"members":[{"type":"individual","id":"9efdccbbde682173","login":"hamzaamjad","name":"Hamza Amjad","avatar_url":"https://avatars-next.observableusercontent.com/5f8ce1ecf5125d1485b2d84a32df05d44154c33343eb404b136c425f2dfb5ebe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Notes on Semiology of Graphics","cells":[{"id":0,"value":"md`\n\n# Notes on Semiology of Graphics\n\n*Sémiologie graphique* by Jacques Bertin\n\nRecreations of graphics in text. Definitions of terms I (1) was unfamiliar with and/or (2) found confusing.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"background = md`\n# Brief history\n- First published in French in 1967\n- Second edition published in 1973\n- English edition published in 1983\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`\n\n# General Theory\n\n> *Graphics owes it special significance to its double function as a storage mechanism and a research instrument. A rational and efficient tool when the properties of visual perception are competently utilized, graphics is one of the major \"languages\" applicable to information processing. Electronic displays, such as the cathode ray tube, open up an unlimited future of graphics.*\n\n## Definition of Graphics\n\n### A Monosemic System\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"md`\n\n### A Visual System\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"px_to_mm(166.225) - 44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"function mm_to_px(mm) {\n const px = mm * mm_svg.getBoundingClientRect().width;\n return px;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"function px_to_mm(px) {\n const mm = px / mm_svg.getBoundingClientRect().width;\n return mm;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"window.devicePixelRatio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"mm_to_px(57)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"mm_svg = d3\n .create(\"svg\")\n .attr(\"width\", \"1mm\")\n .attr(\"height\", \"1mm\")\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"d3 = require(\"d3@v6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"style = await html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"