32:Td6e,mapSvg = { const defaultDarkGray = '#575757' const dayScale = d3.scaleThreshold() .domain([5, 10, 15, 20]) // https://coolors.co/2e9c7c-87b8c3-f09865-dd6868-a20021 .range(['#2e9c7c', '#87b8c3', '#F09865', '#DD6868']); /** SVG GROUP SETUP */ // delete existing groups choropleth.selections.mapGroup .selectAll('g.city_cals .calendar_group') .remove(); choropleth.selections.svg .selectAll('g.tooltip') .remove(); const cityCalsGroup = choropleth.selections.mapGroup .append('g') .classed('city_cals', true); const tooltipGroup = choropleth.selections.mapGroup .append('g') .classed('tooltip', true); choropleth.selections.svg .on('click', () => { tooltipGroup.selectAll('g.calendar_group').remove(); }); /** LEGEND CALENDARS */ const index = 0; miniCalendar(legendDefault); // color legend const xOff = 130; ['< 1 week', '1-2 weeks', '> 2 weeks'].forEach((label, i) => { const nDays = (i + 1) * 4; miniCalendar({ ...legendDefault, hideWeekDays: true, numberOfDays: nDays, numberOfDaysLabel: '', centroid: { x: legendDefault.centroid.x + ((i + 1) * xOff), y: legendDefault.centroid.y }, rectFilledColor: dayScale(nDays), title: label, containerDiv: choropleth.selections.legendGroup.node(), }); }); /** calendar point projection */ const cityProjection = d3.geoAlbersUsa(); /** collision detection using force layout */ const packedNodes = forcePackNodesToRadii({ nodes: mortgageData, collideStrength: collideStrength, radiusAccessor: () => (0.85 * miniCalSize), xAccessor: ({lng, lat}) => { return cityProjection([Number(lng), Number(lat)])[0]; }, yAccessor: ({lng, lat}) => { return cityProjection([Number(lng), Number(lat)])[1]; }, xStrength: 0.5, yStrength: 0.6, }); /** FUNCTION TO RENDER ONE CALENDAR at a given longitude, latitude */ const geoLocatedMiniCalendar = (datum, index) => { // x, y props appended by forcePack method const { days_to_pay_mortgage, city, x, y, lat, lng } = datum; const nDays = Number(days_to_pay_mortgage); const isCompact = nDays < cityLabelVisibility; const id = `cal_${index}`; const config = { compactMode: true, cornerRound: 2, fontSize: '0.9em', hideWeekDays: true, title: isCompact ? '' : city, titleTextColor: defaultDarkGray, numberOfDays: nDays.toFixed(1), numberOfDaysLabel: `${nDays.toFixed(1)}`, centroid: { x, y }, containerDiv: cityCalsGroup.node(), margin: { top: 0, left: 0, bottom: 0, right: 0 }, rectCellPadding: 1, rectFilledColor: dayScale(nDays), rectUnfilledColor: 'rgb(209,209,209,0.3)', width: miniCalSize, }; miniCalendar({ ...config, onMouseOver: () => { tooltipGroup.selectAll('g.calendar_group').remove(); miniCalendar({ ...legendDefault, centroid: { x, y }, containerDiv: tooltipGroup.node(), fontSize: '1.1em', hideWeekDays: true, id: id, numberOfDays: nDays.toFixed(1), numberOfDaysLabel: `${nDays.toFixed(1)}`, rectFilledColor: dayScale(nDays), title: city, titleTextColor: defaultDarkGray, }); }, }); }; packedNodes.forEach(geoLocatedMiniCalendar); return choropleth.render() }33:[] 30:{"title":"How many 8 hour work days per month does it take to pay your mortgage?","cells":[{"id":0,"value":"md`# How many 8 hour work days per month does it take to pay your mortgage?\nCreated for fun as a [Makeover Monday](https://data.world/makeovermonday/2018w47) project\n\nSee linked workbooks below and [this notebook](https://beta.observablehq.com/@ryshackleton/get-city-locations-for-hours-worked-to-pay-mortgage) for data manipulation related to this project\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"viewof headerText = html`

How many 8 hour work days per month does it take to pay your mortgage?

Hover over calendars to see city names. Click to hide expanded calendar.

Original Mortgage Data From HowMuch.net

The source code for this chart can be found here on Observablehq.com\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"viewof mapRendered = html`${mapSvg}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"md`### The original graphic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"viewof originalChart = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`#### Toggles to get the sizing right`","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"viewof miniCalSize = slider({\n title: \"Calendar size\",\n value: 85,\n min: 50, \n max: 200, \n step: 1, \n format: \"\",\n description: \"Drag to change the size of the calendars for each city\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"viewof collideStrength = slider({\n title: \"Change spacing between calendars\",\n value: 0.0025,\n min: 0.0005, \n max: 0.01, \n step: 0.0001, \n format: \"\",\n precision: 5,\n description: \"Drag to change the collision force\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"viewof cityLabelVisibility = slider({\n value: 15,\n min: 0, \n max: 15, \n step: 1, \n format: \"\",\n description: \"Drag to display city labels based on number of days\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`### Main Calendar Rendering Code\n * Create a color scale\n * Pass configuration to MiniCalendar component for legend\n * Create map projection\n * Use force layout to detect collisions in map space\n * Render compact versions of calendars on map by passing config with newly computed positions to MiniCalendar\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":" legendDefault = ({\n compactMode: true,\n fontSize: '0.85em',\n width: 130,\n numberOfDays: 5.3,\n containerDiv: 'svg',\n centroid: { x: 330, y: 50 },\n title: 'Days / month',\n titleTextColor: '#4A4A4A',\n margin: { top: 5, left: 5, bottom: 5, right: 5 },\n numberOfDaysLabel: (d) => ('5.3 days'),\n rectFilledColor: 'gray',\n rectUnfilledColor: 'whitesmoke',\n weekdayTextColor: 'white',\n containerDiv: choropleth.selections.legendGroup.node(),\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`### MiniCalendar Component\nFunctional component used extensively above`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"import { miniCalendar } from '2392482d8bd61726'","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`### Collision detection using d3.force\nUses collision force with x/y centering force to keep nodes near their original centers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"forcePackNodesToRadii = ({\n nodes,\n alphaMin = 0.01,\n collideStrength = 0.8,\n maxTicks = 1000,\n radiusPadding = 0.3,\n radiusAccessor,\n xAccessor,\n yAccessor,\n xStrength = 0.2,\n yStrength = 0.2,\n}) => {\n const force = d3.forceSimulation(nodes)\n .force('x', d3.forceX().x((d) => { return xAccessor(d); }).strength(xStrength))\n .force('y', d3.forceY().y((d) => { return yAccessor(d); }).strength(yStrength))\n .force('collide', d3.forceCollide().strength(collideStrength).radius((d) => {\n return radiusAccessor(d) + radiusPadding;\n }))\n .stop();\n\n let i = 0;\n while (force.alpha() > alphaMin && ++i !== maxTicks) {\n force.tick();\n }\n\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md `### Basemap Props\nSee linked basemap below. Props passed are mainly for layout purposes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"mapProps = ({\n layout: {\n topoJSONBaseWidth: 950, // width scaling associated with the topojson\n topoJSONBaseHeight: 600, // width scaling associated with the topojson\n translateX: 30,\n translateY: 50,\n },\n zoomEnabled: false,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import {map as choropleth, stylesheet as baseStyleSheet } with { mapProps } from \"@ryshackleton/us-county-basemap-counties-nested-within-state-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md `#### Basemap Stylesheet\nCSS to hide irrelevant county boundaries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md `### Data\n\nSee linked notebook for data manipulation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"import { wrangledData as mortgageData } from '@ryshackleton/get-city-locations-for-hours-worked-to-pay-mortgage'","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md `### Other imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}