28:null 29:["$","title",null,{"children":"Matrix Chart | Ismael | Observable"}] 2e:T576,// font: 10px => text y="5" (halfe the font) chart2 = html` `2f:[{"id":"1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","href":"https://static.observableusercontent.com/files/1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","name":"cars.json","type":"application/json","lastModified":1599516839366.756,"size":100492}] 2c:{"id":"a7abcf64c53b5be0","slug":"matrix-chart","title":"Matrix Chart","thumbnail":"40ed0808ea35405b7f8f628552929ca506c0db48a2245d770959adcf6b7b42dd","access_level":"public","create_time":"$D2020-09-07T22:13:38.740Z","update_time":"$D2024-07-14T02:40:57.248Z","view_time":null,"first_public_time":"$D2020-09-10T01:37:39.082Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"557d14c482e36ea6","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/b11e1d83947882ef94223b945a436c98b065f41b9189825c7a9cb8be8b098871","tier":"starter_2024"},"version":353,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a395abf26b7b50b1","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/5e9ea0fcb9b927f69c5162983f12c9f373d3bf0794e2832ce20ee4c29a7aa6c9","tier":null}],"members":[{"type":"individual","id":"a395abf26b7b50b1","login":"ismaelmasharo","name":"Ismael","avatar_url":"https://avatars-next.observableusercontent.com/5e9ea0fcb9b927f69c5162983f12c9f373d3bf0794e2832ce20ee4c29a7aa6c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"2f18e7c45f168ae2","slug":"common-charts","title":"Common Charts","owner":{"id":"557d14c482e36ea6","login":"ismaelmasharo","name":"Ismael"}},"type":"notebook","body":{"title":"Matrix Chart","cells":[{"id":0,"value":"md`# Matrix Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`This is a basic plot showcasing the counts of car brands produced by country per year based on the *cars dataset* (attached within this notebook). The size of the dots represent the relative count across years.\n\nThe main purpose is to applied some of the guidelines when developing a d3 visualization (separating concerns: dimensions, axis, scales, chart) both in pure d3 grammar as well as using Observable html templating.\n\nFurther interactions and styling could be develop.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`## D3 style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, dimensions.width, dimensions.height])\n\n const bounds = svg.append(\"g\")\n .style(\"transform\", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)\n // bellow is the equivalent transformation using attrs (no \"px\" string unis at the end)\n //.attr(\"transform\", `translate(${dimensions.margin.left}, ${dimensions.margin.top})`)\n\n bounds\n .selectAll(\"g\")\n .data(countObj)\n .join(\"g\")\n .selectAll(\"circle\")\n .data(d => d)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(new Date(d.date)))\n .attr(\"cy\", d => yScale(d.country))\n .attr(\"r\", d => sizeScale(d.value))\n\n bounds.append(\"g\")\n .call(xAxis)\n\n bounds.append(\"g\")\n .call(yAxis)\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md`## Templating style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"printTable(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = await FileAttachment(\"cars.json\").json();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"countGroups = d3.group(data, v => v.Origin, v => v.Year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"counts = d3.rollups(data, v => v.length, v => v.Origin, v => v.Year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"countObj = counts.map(([country, data]) => data.map(([date, value]) => ({date, country, value})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`The x scale gets inverted, so in order to display ascending dates (from left to right) a reverse operation is performed on the year array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`### X`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"dates = {\n const yearIterator = d3.group(data, v => v.Year).keys()\n return Array.from(yearIterator).map(year => new Date(year)).reverse()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`Since one year is missing scaleTime will produce a gap so using scalePoint instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"xScale = d3.scalePoint()\n .domain(dates)\n .range([dimensions.boundedWidth, 0])\n .padding(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`### Y`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"countries = counts.map(([country, _]) => country)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"yScale = d3.scalePoint()\n .domain(countries)\n .range([0, dimensions.boundedHeight])\n .padding(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`### Size`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"values = counts.flatMap(([country, data]) => data.map(([year, value]) => value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"sizeScale = {\n const sizeExtent = d3.extent(values)\n \n const minRadius = 2\n const maxRadius = 15\n \n return d3.scaleLinear()\n .domain(sizeExtent)\n .range([minRadius, maxRadius])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`## Axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`Note: Watch out for timezones.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"xAxis = g => g\n .call(d3.axisTop(xScale).tickFormat(d3.utcFormat('%Y'))) \n .call(g => g.selectAll(\".domain\").remove())\n .call(g => g.selectAll(\".tick>line\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"yAxis = g => g\n .call(d3.axisLeft(yScale))\n .call(g => g.selectAll(\".domain\").remove())\n .call(g => g.selectAll(\".tick>line\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"dimensions = {\n let dimensions = {\n width: width,\n height: 300,\n margin: {top: 20, rigth: 40, bottom: 30, left: 50}\n }\n\n dimensions.boundedWidth = dimensions.width\n - dimensions.margin.left\n - dimensions.margin.rigth\n\n dimensions.boundedHeight = dimensions.height\n - dimensions.margin.top\n - dimensions.margin.bottom\n \n return dimensions\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"