31:Tdec,{ const div = html`

` const svg = d3.select(div).selectAll("svg") .data(nestedNYC) .join("svg") .attr("width", width) .attr("height", height + 200) .each((e) => { const pack = d3.pack() .radius(d => radiusScale(d.value)) .size([width - 2, height - 2]) (d3.hierarchy({children: e.values}) .sum(d => { return d.values != undefined ? d.values[0].value : 0 })) e.pack = pack.leaves(); }).append("g") .attr("transform", `translate(${0}, ${75})`) const forceX = d3.forceX().x(d => { const centroid = path.centroid(d.data.values[0].data) return centroid[0] }).strength(2) const forceY = d3.forceY().y(d => { const centroid = path.centroid(d.data.values[0].data) return centroid[1] }).strength(2) const simulation = d3.forceSimulation(svg.data()[0].pack) .velocityDecay(0.2) .force("x", forceX) .force("y", forceY) .force("collide", d3.forceCollide().radius(d => d.r).iterations(.1).strength(.1)) .on("tick", ticked); svg.append("g") .attr("transform", `translate(${legendMargin / 2},${height + 50})`) .call(legend); svg.append("g") .attr("transform", `translate(${width/4}, -10)`) .append("text") .style("text-anchor", "middle") .text("Bubble Map"); svg.append("g") .attr("transform", `translate(${-width/4}, 0)`) .selectAll(".backgroundOne") .data(d => d.pack, d => d.data.key) .join("path") .attr("d", d => path(d.data.values[0].data)) .attr("class", "backgroundOne") .style("fill", "#fff") .style("stroke", "#000") .style("stroke-width", .25); svg.append("g") .attr("transform", `translate(${-width/4}, 0)`) .selectAll(".groupOne") .data(d => d.pack, d => d.data.key) .join("path") .attr("d", function(d) { const centroid = path.centroid(d.data.values[0].data) return pathCircle(centroid[0], centroid[1], d.r) }) .attr("class", "groupOne") .style("fill", d => { const val = medianAskingMap["$" + date]["$" + d.data.key] if(val == undefined) { return "#fff" } else { return colorScale(val[0].val) } }) .style("stroke", "#000") .style("stroke-width", .25) .style("fill-opacity", .5); svg.append("g") .attr("transform", `translate(${width*3/4}, -10)`) .append("text") .style("text-anchor", "middle") .text("Pseudo-Dorling Cartogram") svg.append("g") .attr("transform", `translate(${width/4}, 0)`) .selectAll(".backgroundTwo") .data(d => d.pack, d => d.data.key) .join("path") .attr("d", d => path(d.data.values[0].data)) .attr("class", "backgroundTwo") .style("fill", "#fff") .style("stroke", "#000") .style("stroke-width", .25) const nodes = svg.append("g") .attr("transform", `translate(${width/4}, 0)`) .selectAll(".nyc") .data(d => d.pack, d => d.data.key) .join("path") .attr("d", function(d) { const centroid = path.centroid(d.data.values[0].data) return pathCircle(centroid[0], centroid[1], d.r) }) .attr("class", "nyc") .style("fill", d => { const val = medianAskingMap["$" + date]["$" + d.data.key] if(val == undefined) { return "#fff" } else { return colorScale(val[0].val) } }) .style("stroke", "#000") .style("stroke-width", .5) function ticked() { nodes .attr("d", function(d) { const centroid = path.centroid(d.data.values[0].data) return pathCircle(d.x, d.y, d.r) }) } return div; }32:T75b,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = dates[input]; if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : dates[value]; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }33:[] 2f:{"title":"StreetEasy - Pseudo-Dorling Cartogram","cells":[{"id":0,"value":"md`# StreetEasy - Pseudo-Dorling Cartogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`Using collision detection to spread out my bubble map into a Pseudo-Dorling Cartogram (similar to an older post by [MB](https://bl.ocks.org/mbostock/4055892)). I added a comparison to bubble map to see how much I am distorting the results. If you want to read more about types of cartograms, I thought this [page](http://www.ncgia.ucsb.edu/projects/Cartogram_Central/types.html) was fun.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof selectedDate = slider({\n min: 0, \n max: dates.length - 1, \n step: 1, \n value: dates.length - 1, \n format: true,\n title: \"Month / Year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`## Data and Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"nyc = d3.json(\"https://gist.githubusercontent.com/pstuffa/f9f9f78d52e634fa8ad107e3a2050803/raw/8d732cf241fce6ebe69e55336f112e5e9ec31b16/neighborhoods.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"nycGeo = topojson.feature(nyc, nyc.objects.area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"nycMonthFlat = {\n \n const flatData = [];\n dates.forEach(month => {\n d3.hierarchy({children: nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')})\n .leaves()\n .forEach(d => { \n const checkValue = medianAskingMap[\"$\" + month][\"$\" + d.data.properties.name];\n \n flatData.push({id: d.data.properties.name, \n data: d.data,\n month: month,\n parent: d.parent, \n value: (checkValue == undefined ? 0 : checkValue[0].val) });\n }) \n })\n\n return flatData;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"nestedNYC = d3.nest()\n .key(d => d.month)\n .key(d => d.id)\n .entries(nycMonthFlat.filter(d => d.month == date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"path = d3.geoPath()\n .projection(d3.geoConicConformal()\n .parallels([33, 45])\n .rotate([96, -39])\n .fitSize([width, height], nycGeo))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"legendMargin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"colorScale = d3.scaleThreshold()\n .domain([500000, 800000, 1000000, 1200000, 1500000, 2000000, 3000000, 10000000])\n .range(d3.schemeGreens[9])","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"colorScaleCompare = d3.scaleThreshold()\n .domain([-2, -1, -.5, -.25, 0, .25, .5, 1, 2])\n .range(d3.schemePiYG[10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"radiusScale = d3.scaleLinear()\n .domain(d3.extent(nycMonthFlat, d => d.value))\n .range([0, 50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"dates = { \n const array = d3.set(medianAskingPricePivot.map(d => moment(d.date).format('MM/YYYY'))).values();\n array.shift() // Remove first invalid date\n return array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"date = dates[selectedDate]","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"legend = g => {\n \n const x = d3.scaleLinear()\n .domain(d3.extent(colorScale.domain()))\n .rangeRound([0, width - legendMargin]);\n\n g.selectAll(\"rect\")\n .data(colorScale.range().map(d => colorScale.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => colorScale(d[0]));\n\n g.append(\"text\")\n .attr(\"class\", \"caption\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Median Asking Price\")\n .style(\"font\", \"12px sans-serif\")\n\n const ticks = g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d3.format(\"$.0s\"))\n .tickValues(colorScale.range().slice(1).map(d => colorScale.invertExtent(d)[0])))\n \n ticks.selectAll(\".tick\").select(\"text\").style(\"font\", \"8px sans-serif\")\n ticks.select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"bottomLegend = g => {\n \n const x = d3.scaleLinear()\n .domain(d3.extent(colorScaleCompare.domain()))\n .rangeRound([0, width - legendMargin]);\n\n g.selectAll(\"rect\")\n .data(colorScaleCompare.range().map(d => colorScaleCompare.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => colorScaleCompare(d[0]));\n\n g.append(\"text\")\n .attr(\"class\", \"caption\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"% Above or Below Selected Median Asking Price\");\n\n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d3.format(\".0%\"))\n .tickValues(colorScaleCompare.range().slice(1).map(d => colorScaleCompare.invertExtent(d)[0])))\n .select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"flubber = require('flubber')","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"import {medianAskingPricePivot, months} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"medianAskingMap = d3.nest()\n .key(d => moment(d.date).format(\"MM/YYYY\"))\n .key(d => d.area)\n .map(medianAskingPricePivot)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`I was using the famous [inputs]('@jashkenas/inputs') module, but I need some custom formatting on the display result for my slider.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"pathCircle = (x, y, r) => { \n return `M ${x}, ${y} \n m ${-r}, 0 \n a ${r}, ${r} 0 1,0 ${r*2}, 0\n a ${r}, ${r} 0 1,0 ${-r*2}, 0`\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}