31:Tae7,function circleChart (width, height, op, share=false, columns=10, cellsize=90, label, fontSize=14) { const svg = d3.select(DOM.svg(width+2, height+2)); const sheight = 2 * maxRadius + parseInt(regionRollup.length/columns) * cellsize const radiusScale = d3.scaleLinear() .domain(op === 'population' ? popExtent : op === 'area' ? areaExtent : densityExtent) .range([3, maxRadius]) const colorScale = colorSelect === 'Type' ? typeColor : d3.scaleSequential(d3.interpolateBlues) .domain(colorSelect === 'Population' ? popExtent : colorSelect === 'Area' ? areaExtent : densityExtent) stateOrder.forEach((r,i) => { const xi = 1 + maxRadius + (i%columns)*cellsize const yi = 1 + maxRadius + parseInt(i/columns) * cellsize * 1.4 const state = regionRollup.filter(s => s.stateAbb === r)[0] getRegionCircles (svg, state.children.sort((a,b) => op === 'population' ? b.population - a.population : op === 'area' ? b.sqmi - a.sqmi : b.ppsm - a.ppsm), xi, yi, op, share ? radiusScale : radiusScale.domain(d3.extent(state.children, d => op === 'population' ? d.population : op === 'area' ? d.sqmi : d.ppsm)), share || colorSelect === 'Type' ? colorScale : colorScale.domain(d3.extent(state.children, d => colorSelect === 'Population' ? d.population : colorSelect === 'Area' ? d.sqmi : d.ppsm )), 2, state.stateAbb, state.region) }) const p = svg.append("g") .attr("transform", "translate("+[width/2, height-42]+")") .append('text') .style('text-anchor', 'middle') .style('-webkit-text-stroke', '1px black') .attr("dominant-baseline", "central") .text(label) .attr('fill', '#7fdbed') .attr('stroke', '#000') .attr('stroke-opacity', 0.7) .attr('stroke-thickness', 1.5) .attr('font-family', 'Arial') .attr('font-weight', 'bold') .attr('font-size', fontSize + 6) return Object.assign(svg.node()) }32:T9b6,function getRegionCircles (svg, data, x, y, op, radiusScale, colorScale, thickness, label, tooltip, fontSize=14) { const p = svg.append("g") .attr("transform", "translate("+[x, y]+")"); const us = p.selectAll("circle") .data(data) const div = d3.select('#tooltip') us.enter() .append('circle') .attr("cx", 0) .attr("cy", 0) .attr('r', d => op === 'population' ? radiusScale(d.population) : op === 'area' ? radiusScale(d.sqmi) : radiusScale(d.ppsm) ) .attr('fill', d => colorScale(colorSelect === 'Population' ? d.population : colorSelect === 'Area' ? d.sqmi : colorSelect === 'Density' ? d.ppsm : d.type)) .attr('fill-opacity', 0.25) .attr('stroke', '#000') // tooltip .style('cursor', 'crosshair') .on('mouseover', d => { div .transition() .duration(200) .style('opacity', 0.9); div .html(getTooltip(op, d)) .style('left', d3.event.pageX + 18 + 'px') .style('top', d3.event.pageY - 28 + 'px'); }) .on("mousemove", d => { div .style("left", d3.event.pageX+18 + 272 > width ? d3.event.pageX - 272 + 'px' : (d3.event.pageX+18) + "px") .style("top", (d3.event.pageY-28) + "px"); }) .on('mouseout', () => { div .transition() .duration(500) .style('opacity', 0); }) // tooltip d3 .select('body') .append('div') .attr('id', 'tooltip') .attr('style', 'border: none') .style('border-radius', '10px') .style('box-shadow', '4px 4px 5px lightgrey') .style('background', 'white') .style("position", "absolute") .style("z-index", "10") .style('font-size', '14') .style('font-family', 'Roboto') .style('padding', '10px 10px 10px 10px') .style('opacity', 0); p .append('text') .style('text-anchor', 'middle') .style('-webkit-text-stroke', '1px black') .attr("dominant-baseline", "central") .text(label) .attr('fill', '#fff') .attr('stroke', '#000') .attr('stroke-opacity', 0.7) .attr('stroke-thickness', 1.5) .attr('y', 50) .attr('font-family', 'Arial') .attr('font-weight', 'bold') .attr('font-size', fontSize) .append("title") .text(tooltip) return p }33:Tc30,function regionCircleChart (data, width, height, op, label, fontSize=18, fill=false) { const svg = d3.select(DOM.svg(width, height)); const div = d3.select('#tooltip') const svgg = svg .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); const gr = svgg.append("g") // concentric rings .selectAll("circle") .data(data.sort((a,b) => op === 'population' ? b.population - a.population : op === 'area' ? b.sqmi - a.sqmi : b.ppsm - a.ppsm)) .enter().append("circle") .attr('r', d => op === 'population' ? 3 * popRadius(d.population) : op === 'area' ? 3 * areaRadius(d.sqmi) : 3 * densityRadius(d.ppsm) ) .attr('fill', d => colorSelect === 'Population' ? popColor(d.population) : colorSelect === 'Area' ? areaColor(d.sqmi) : colorSelect === 'Density' ? densityColor(d.ppsm) : typeColor(d.type) ) .attr('fill-opacity', 0.25) .attr('stroke', d => !fill ? '#000' : colorSelect === 'Population' ? popColor(d.population) : colorSelect === 'Area' ? areaColor(d.sqmi) : colorSelect === 'Density' ? densityColor(d.ppsm) : typeColor(d.type)) .attr('stroke-opacity', 0.2) // tooltip .style('cursor', 'crosshair') .on('mouseover', d => { div .transition() .duration(200) .style('opacity', 0.9); div .html(getTooltip(op, d)) .style('left', d3.event.pageX + 9 + 'px') .style('top', d3.event.pageY - 28 + 'px'); }) .on("mousemove", d => { div .style("left", d3.event.pageX+9 > width ? d3.event.pageX - 160 + 'px' : (d3.event.pageX+9) + "px") .style("top", (d3.event.pageY-28) + "px"); }) .on('mouseout', () => { div .transition() .duration(500) .style('opacity', 0); }) // tooltip d3 .select('body') .append('div') .attr('id', 'tooltip') .attr('style', 'border: none') .style('border-radius', '10px') .style('box-shadow', '4px 4px 5px lightgrey') .style('background', 'white') .style("position", "absolute") .style("z-index", "10") .style('font-size', '14') .style('font-family', 'Roboto') .style('padding', '10px 10px 10px 10px') .style('opacity', 0); svgg .append('text') .style('text-anchor', 'middle') .style('-webkit-text-stroke', '1px black') .attr("dominant-baseline", "central") .text(label) .attr('fill', '#7fdbed') .attr('stroke', '#000') .attr('stroke-opacity', 0.7) .attr('stroke-thickness', 1.5) .attr('y', 90) .attr('font-family', 'Arial') .attr('font-weight', 'bold') .attr('font-size', fontSize); return Object.assign(svg.node()) }34:[] 2f:{"title":"US Region Circles","cells":[{"id":0,"value":"md`# US Region Circles\n\nVisualizing US state region population and area distributions as concentric circles.\n\nCompare the same data distributions shown as histograms: https://observablehq.com/@jonhelfman/us-region-histograms See also https://observablehq.com/@jonhelfman/histogram-vs-circle-chart\n\nHover for details.\n\nScroll down to see similar charts that share a common radius scale or to change the maximum radius.\n\nStates are arranged in an order that mimics their geographic locations.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"circleChart(width, 700, 'population', false, 10, 90, 'State Region Populations (no common scale)')","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"circleChart(width, 700, 'area', false, 10, 90, 'State Region Areas (no common scale)')","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"circleChart(width, 700, 'density', false, 10, 90, 'State Region Population Densities (no common scale)')","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"colorSelect === 'Type' ? \n swatches({ color: typeColor }) :\n colorSelect === 'Population' ? \n legend({ color: popColor, title: 'Population' }) :\n colorSelect === 'Area' ?\n legend({ color: areaColor, title: 'Area' }) :\n legend({ color: densityColor, title: 'Density' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"viewof colorSelect = select({title: 'Color:', options: metrics, value: 'Type'})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof maxRadius = slider({\n min: 12, \n max: 100, \n step: 1, \n value: 42, \n title: \"Maximum radius\", \n description: \"Set the maximum radius used for the charts\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"circleChart(width, 700, 'population', true, 10, 90, 'State Region Populations')","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"circleChart(width, 700, 'area', true, 10, 90, 'State Region Areas')","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"circleChart(width, 700, 'density', true, 10, 90, 'State Region Population Densities')","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"regionCircleChart(stateData, 400, 400, 'population', 'State Populations')","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"regionCircleChart(stateData, 400, 400, 'area', 'State Areas')","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"regionCircleChart(stateData, 400, 400, 'density', 'State Population Densities')","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"regionCircleChart(regionData, 800, 800, 'density', 'Region Densities')","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"// an order that, when split into 5 rows, mimics the regions' relative positions \nstateOrder = ['AK', 'WA', 'MT', 'ND', 'MN', 'MI', 'NY', 'VT', 'NH', 'ME',\n'OR', 'ID', 'WY', 'SD', 'WI', 'MA', 'CT', 'RI', 'NJ', 'DE',\n'NE', 'IA', 'IL', 'IN', 'OH', 'PA', 'KY', 'WV', 'VA', 'MD',\n'CA', 'NV', 'UT', 'CO', 'OK', 'KS', 'MO', 'AR', 'TN', 'NC',\n'HI', 'AZ', 'NM', 'TX', 'LA', 'AL', 'MS', 'GA', 'SC', 'FL', ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"metrics = [\"Population\", \"Area\", \"Density\", \"Type\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"getTooltip = (op, d) => { \n const row1 = d.id.length === 2 ? `${d.region}` : `${d.region}, ${getStateNameFromAbb(d.stateAbb)}`\n const row2 = op === 'population' ? \n `${format(d.population)} people` : \n op === 'area' ?\n `${format(d.sqmi)} sq.mi.` : \n `${format(d.ppsm)} people/sq.mi.` \n return('' + row1 + row2 + '

' )\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"md`### Data prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"stateData = data.filter(d => d.id.length === 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"regionData = data.filter(d => d.id.length === 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"regionRollup = stateData.map(s => {\n const children = regionData.filter(d => d.stateAbb === s.stateAbb)\n const popExtent = d3.extent(children, d => d.population)\n const areaExtent = d3.extent(children, d => d.sqmi)\n const densityExtent = d3.extent(children, d => d.ppsm)\n return ({...s, children, popExtent, areaExtent, densityExtent})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"popExtent = [d3.min(regionRollup, d => d.popExtent[0]), d3.max(regionRollup, d => d.popExtent[1])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"areaExtent = [d3.min(regionRollup, d => d.areaExtent[0]), d3.max(regionRollup, d => d.areaExtent[1])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"densityExtent = [d3.min(regionRollup, d => d.densityExtent[0]), d3.max(regionRollup, d => d.densityExtent[1])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"popRadius = d3.scaleSqrt()\n .domain(d3.extent(stateData, d => d.population))\n .range([3, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"areaRadius = d3.scaleSqrt()\n .domain(d3.extent(stateData, d => d.sqmi))\n .range([3, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"densityRadius = d3.scaleSqrt()\n .domain(d3.extent(stateData, d => d.ppsm))\n .range([3, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"popColor = d3.scaleSequential(d3.interpolateBlues)\n .domain(d3.extent(stateData, d => d.population))","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"areaColor = d3.scaleSequential(d3.interpolateBlues)\n .domain(d3.extent(stateData, d => d.sqmi))","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"densityColor = d3.scaleSequential(d3.interpolateBlues)\n .domain(d3.extent(stateData, d => d.ppsm))","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"distinctTypes = {\n const o = {}\n regionRollup.forEach(state => state.children.forEach(reg => o[reg.type] ? o[reg.type]++ : o[reg.type] = 1))\n return o;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"typeColor = d3.scaleOrdinal(['#00b8dd', '#00d539', '#ad6aff', '#00b287', '#3385ff', '#779100', '#00ffff', '#ffa8a7', '#ff00e5', '#ff9000', '#ff005c', '#faff00' ]) // set the range\n .domain(Object.keys(distinctTypes))","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { data, getRegionId, getStateNameFromAbb, idToDensity, idToRegion, idToPopDensityRecord } from '@jonhelfman/population-density-of-us-regions'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"import { legend, swatches } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}