31:Ta4e,function colorTreemap (data, width, height, f, units, op='population') { const root = f(data); const div = d3.select('#tooltip') const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => color(d.data.stateAbb)) .attr("fill-opacity", 0.45) .attr("stroke", '#666') .attr("stroke-width", 1) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .on('click', d => (mutable selectedState = d.data.stateAbb)) leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.region.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); //leaf.append("title") // .text(d => `${d.data.region}, ${d.data.stateAbb}, ${format(d.value)} ${units}`); leaf .style('cursor', 'crosshair') .on('mouseover', d => { div .transition() .duration(200) .style('opacity', 0.9); div .html(getTooltip(op, d.data)) .style('left', d3.event.pageX + 9 + 'px') .style('top', d3.event.pageY - 28 + 'px'); }) .on("mousemove", d => { div //.style("left", d3.event.pageX+9 + 172 > width ? d3.event.pageX - 160 + 'px' : (d3.event.pageX+9) + "px") .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); return svg.node(); }32:[] 2f:{"title":"US County Treemaps","cells":[{"id":0,"value":"md`# US County Treemaps\n\nCode adapted from https://observablehq.com/@d3/treemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"colorTreemap(treemapData, width, theight, poptreemap, 'people', 'population')","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`### US State and County Populations\n\nMost of the people live in California, New York, and Texas.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"colorTreemap(treemapData, width, theight, areatreemap, 'sq.mi.', 'area')","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`### US State and County Square Miles\nMost of the land is in Alaska and Texas.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"mutable selectedState = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"selectedData = countyData.filter(d => d.stateAbb === selectedState).map(d => ({...d, value: d.ppsm})).sort((a, b) => b.ppsm - a.ppsm)","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"selectedState ? table(selectedData) : md`### Select a state to see details`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md `### Data Prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"treemapData = {\n return ({\n name: 'County Population',\n children: stateData.map(s => ({region:s.region, id:s.id, pop: s.population, children: countyData.filter(d => d.stateAbb === s.stateAbb)})).sort((a,b) => b.pop - a.pop)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"ppsmData = stateData.map(s => ({region:s.region, id:s.id, ppsm: s.ppsm, children: countyData.filter(d => d.stateAbb === s.stateAbb).sort((a,b) => b.ppsm - a.ppsm)}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"stateData = data.filter(d => d.id.length === 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"countyData = data.filter(d => d.id.length === 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"height= 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"theight = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"margin = ({top: 30, right: 0, bottom: 10, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"getTooltip = (op, d) => { \n const row1 = `${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":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"poptreemap = data => d3.treemap()\n .tile(d3['treemapSquarify'])\n .size([width, theight])\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.population)\n .sort((a, b) => b.height - a.height || b.population - a.population))","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"areatreemap = data => d3.treemap()\n .tile(d3['treemapSquarify'])\n .size([width, theight])\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.sqmi)\n .sort((a, b) => b.height - a.height || b.sqmi - a.sqmi))","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(ppsmData, c => d3.max(c.children, d => d.ppsm))])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"sx = d3.scaleLinear()\n .domain([0, d3.max(selectedData, c =>c.ppsm)])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"y = d3.scaleBand()\n .domain(d3.range(selectedData.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, data.format))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(i => data[i].name).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3\", \"d3-array@^2.2\")","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":203,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}