2e:null 2f:["$","title",null,{"children":"Correlation Matrix Dreamcatcher | Toph Tucker | Observable"}] 34:T404,chart = svg``35:T4c8,md`To upload a new file, click the File Attachment icon on the right of the page and select “Replace file” in the menu beside \`boston_correlation_matrix.csv\`.`36:[{"id":"84a0d858b96688c3bcc06654511b5d35ee4c44b64d61a23d9e70f240bc023130b1daeab0b7cd04800fa955cee9743ff667cc57298c29776b1c6364831d154805","href":"https://static.observableusercontent.com/files/84a0d858b96688c3bcc06654511b5d35ee4c44b64d61a23d9e70f240bc023130b1daeab0b7cd04800fa955cee9743ff667cc57298c29776b1c6364831d154805","name":"boston_correlation_matrix.csv","type":"text/csv","lastModified":1618335436611.423,"size":2014}] 32:{"id":"ba487c8024d14b9c","slug":"correlation-matrix-dreamcatcher","title":"Correlation Matrix Dreamcatcher","thumbnail":"7d6730caa20bfc2258103aa222073bd9a36c3cedbd278595c3b2f21c3995817f","access_level":"public","create_time":"$D2021-04-13T16:56:49.175Z","update_time":"$D2021-04-14T01:28:36.929Z","view_time":null,"first_public_time":"$D2021-04-14T01:28:59.949Z","has_unpublished_edits":null,"fork":true,"stars":15,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":558,"publish_version":558,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Correlation Matrix Dreamcatcher","cells":[{"id":1,"value":"md`# Correlation Matrix Dreamcatcher\nDone with Annabella for her work; this chart may have a more standard name but I liked hers, “dreamcatcher”. This example is based on the [Rdataset](https://observablehq.com/@tmcw/rdatasets) on “Housing Values in Suburbs of Boston” (from Harrison and Rubinfeld 1978, named \\`datasets.Boston\\` there), with correlations computed by [Boris and Yuri Vishnevsky](https://observablehq.com/@borisvish/correlation-filtering?ui=classic).\n\nClick the **⋮** menu to the left of the cell below and select “Download PNG”.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"data = FileAttachment(\"boston_correlation_matrix.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`Map the column names to more readable labels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"niceNames = new Map([\n [\"crim\", \"Crime per capita\"],\n [\"zn\", \"Residential land zoned for large lots\"],\n [\"indus\", \"Non-retail business acres\"],\n [\"chas\", \"Charles River adjacent\"],\n [\"nox\", \"Nitrogen oxides concentration\"],\n [\"rm\", \"Rooms per dwelling\"],\n [\"age\", \"Units built prior to 1940\"],\n [\"dis\", \"Mean distance to employment centres\"],\n [\"rad\", \"Accessibility to radial highways\"],\n [\"tax\", \"Property-tax rate\"],\n [\"ptratio\", \"Pupil-teacher ratio\"],\n [\"black\", \"Proportion of Black residents\"],\n [\"lstat\", \"Lower status of population\"],\n [\"medv\", \"Median value of homes\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`Adjust the radius of the dreamcatcher circle:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"radius = 260","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`Adjust how far out the labels are positioned (where 1 is right on top of the nodes, and 1.03 gives them a little padding):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"labelPadFactor = 1.03","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`Adjust the height of the whole graphic:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"height = width * 0.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`---\n## Appendix\nCode you probably don’t have to change.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"// size of color legend\nmarginTop = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"// more scales available here https://github.com/d3/d3-scale-chromatic\ncolor = d3.scaleSequential([-1, 1], d3.interpolateRdBu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"stroke = value => 3 * Math.abs(value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"nodes = data.map(d => d.id)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"getPoint = id => {\n const i = nodes.indexOf(id);\n return [radius * Math.cos(angle(i)), radius * Math.sin(angle(i))];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"angle = d3.scaleLinear([0, nodes.length], [0, Math.PI * 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"md`To compute the example CSV, I pulled from Boris and Yuri Vishnevsky’s notebook, which has some wonerful similar visualization:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"import { cor } from \"@borisvish/correlation-filtering\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"md`This gets it into a correlation matrix format, which I downloaded as a CSV and re-uploaded in the hopes that it’d match what a reader might have on hand:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"d3\n .rollups(\n cor,\n arr => Object.fromEntries(arr.map(({ key2, cor }) => [key2, cor])),\n d => d.key1\n )\n .map(([id, obj]) => ({ id, ...obj }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`Boris and Yuri are pulling from this notebook by Tom MacWright building on Vincent Arel-Bundock, which comes with nice documentation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"import { datasets } from \"@tmcw/rdatasets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"datasets.Boston.doc","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"