28:null 29:["$","title",null,{"children":"Assignment 3 | Shreyan's Workspace | Observable"}] 2e:Tb30,chart = { const width = 1000; const height = 667; d3.treemap() .size([width, height]) .paddingOuter(5) .paddingInner(2) .round(true) (root); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff"); const leaf = svg.selectAll("g") .data(root.leaves(), d => d.data.ticker) .join( enter => { const g = enter.append("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); g.append("rect") .attr("fill", d => color(d.parent.data[0])) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("stroke", "#fff"); const fo = g.append("foreignObject") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // Flex container to center text and prevent overflow const div = fo.append("xhtml:div") .style("color", "white") .style("padding", "2px") .style("height", "100%") .style("width", "100%") .style("box-sizing", "border-box") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "center") // Center vertically .style("align-items", "center") // Center horizontally .style("text-align", "center") .style("overflow", "hidden"); div.append("div") .attr("class", "name-label") .style("font-weight", "bold") .style("line-height", "1") // This ensures text scales down in small boxes .style("font-size", d => { const boxWidth = d.x1 - d.x0; return boxWidth < 50 ? "8px" : "11px"; }) .style("word-wrap", "break-word") .style("width", "100%") .text(d => d.data.displayName.toUpperCase()); div.append("div") .style("font-size", "9px") .style("opacity", "0.9") .style("margin-top", "2px") .text(d => `${d.data.ticker} | $${d.data.MarketCap_BillionsUSD}B`); return g; }, update => update.call(u => u.transition().duration(750) .attr("transform", d => `translate(${d.x0},${d.y0})`) .call(g => { g.select("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); g.select("foreignObject") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // Update font-size during transition for shrinking boxes g.select(".name-label") .style("font-size", d => (d.x1 - d.x0) < 50 ? "8px" : "11px"); })), exit => exit.remove() ); yield svg.node(); }2f:Tbed,yearAnnotations = ({ 1989: "Exxon leads at $62.6B. IBM #2 at $52B. Traditional energy and computing dominate.", 1990: "Exxon remains #1 at $64.4B. IBM #2. Walmart enters top 3 as retail giant emerges.", 1991: "Exxon #1 at $75.6B. Walmart #2. Microsoft debuts at #15 with $19.7B.", 1992: "Exxon #1 at $75.9B. Microsoft climbs to #12. Intel enters at #19.", 1993: "Exxon still #1 at $78.4B. Coca-Cola #2. Microsoft drops to #17.", 1994: "Exxon #1 at $75.4B. Coca-Cola #2 at $66.3B. Microsoft jumps to #8 at $35.5B.", 1995: "Exxon #1 at $100B. Coca-Cola #2 at $93.2B. PC revolution accelerates.", 1996: "Coca-Cola becomes #1 at $130.6B! Exxon #2, Intel #3. Microsoft not in top 20.", 1997: "Coca-Cola #1 at $164.6B. Microsoft #2 at $157.4B. GE #4. Tech arrives at summit.", 1998: "Microsoft takes #1 at $348B! GE #2, Intel #3. Dot-com bubble inflating.", 1999: "Microsoft peaks at $604B. Cisco #2 at $355B. GE #3. Bubble at maximum.", 2000: "Bubble bursts. Exxon #1 at $302B, GE #2. Cisco #3, Microsoft falls to #6.", 2001: "Microsoft #1 at $358B. Exxon #2. Tech sector recovering from crash.", 2002: "Microsoft #1 at $276.6B. Exxon #2. Post-bubble consolidation continues.", 2003: "Microsoft #1 at $295.3B. Exxon #2 at $269.3B. Stability returns.", 2004: "Exxon reclaims #1 at $328B. Microsoft #2. Oil prices rising.", 2005: "Exxon #1 at $349.5B. Microsoft #2. Energy sector strengthens.", 2006: "Exxon #1 at $447B. Microsoft #2. Oil boom drives valuations.", 2007: "Exxon dominates at $504B. Microsoft #2. Apple enters top 20 at #12 ($174B).", 2008: "Financial crisis. Exxon #1 at $406B. Walmart #2. All valuations plunge.", 2009: "Exxon #1 at $322B. Microsoft #2. Apple surges to #5 at $191B.", 2010: "Exxon #1 at $364B. Apple jumps to #2 at $297B! iPhone era begins.", 2011: "Exxon #1 at $406B. Apple closes in at #2 with $377.5B.", 2012: "Apple becomes #1 at $499.7B, overtaking Exxon ($389.7B). Mobile computing wins.", 2013: "Apple #1 at $500.7B. Exxon #2. Amazon enters at #14.", 2014: "Apple #1 at $643B. Exxon #2. Facebook (Meta) at #12.", 2015: "Apple #1 at $583.6B. Alphabet #2 at $534.8B. Amazon #6. FAANG era.", 2016: "Apple #1 at $609B. Alphabet #2. Amazon #6. Cloud computing rises.", 2017: "Apple #1 at $860.9B. Alphabet #2. Amazon #4. Tech dominance complete.", 2018: "Microsoft #1 at $780.4B. Apple #2 at $746B. Amazon #3. Cloud computing pivotal.", 2019: "Apple #1 at $1,288B. Microsoft #2 at $1,200B. First trillion-dollar companies.", 2020: "Pandemic surge. Apple #1 at $2,232B. Microsoft #2. Tesla enters at #6 ($677B).", 2021: "Apple #1 at $2,902B. Microsoft #2 at $2,522B. Nvidia #7 at $735B.", 2022: "Correction year. Apple #1 at $2,067B (down 29%). Microsoft #2. Nvidia #13.", 2023: "Apple #1 at $2,994B. Microsoft #2. AI boom starts: Nvidia surges to #5 at $1,223B.", 2024: "Apple #1 at $3,785B. Nvidia explodes to #2 at $3,289B! Microsoft #3. AI revolution.", 2025: "Nvidia takes #1 at $4,341B! Microsoft #2 at $3,770B. Apple falls to #3 at $3,380B." })30:Tfbf,chart2 = { const width = 1000; const height = 667; d3.treemap() .size([width, height]) .paddingOuter(5) .paddingInner(2) .round(true) (root); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff"); // Tooltip event handlers function handleMouseOver(event, d) { tooltip.transition().duration(200).style("opacity", 1); tooltip.html(`

${d.data.Company}

Ticker: ${d.data.ticker}

Sector: ${d.parent.data[0]}

Market Cap: $${d.data.MarketCap_BillionsUSD}B

Rank: #${d.data.Rank}

${d.data.Company}

Ticker: ${d.data.ticker}

Sector: ${d.parent.data[0]}

Market Cap: $${d.data.MarketCap_BillionsUSD}B

Rank: #${d.data.Rank}

`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); d3.select(event.currentTarget).attr("stroke", "#000").attr("stroke-width", 2); } function handleMouseMove(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); } function handleMouseOut(event) { tooltip.transition().duration(200).style("opacity", 0); d3.select(event.currentTarget).attr("stroke", "#fff").attr("stroke-width", 1); } const leaf = svg.selectAll("g") .data(root.leaves(), d => d.data.ticker) .join( enter => { const g = enter.append("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); g.append("rect") .attr("fill", d => color(d.parent.data[0])) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("stroke", "#fff") .style("cursor", "pointer") .on("click", (event, d) => { //ADDITION createCompanyTimeline(d.data.ticker, d.data.Company, cleanedFinalData); }); const fo = g.append("foreignObject") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .style("pointer-events", "none"); const div = fo.append("xhtml:div") .style("color", "white") .style("padding", "2px") .style("height", "100%") .style("width", "100%") .style("box-sizing", "border-box") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "center") .style("align-items", "center") .style("text-align", "center") .style("overflow", "hidden") .style("pointer-events", "none"); div.append("div") .attr("class", "name-label") .style("font-weight", "bold") .style("line-height", "1") .style("font-size", d => { const boxWidth = d.x1 - d.x0; return boxWidth < 50 ? "8px" : "11px"; }) .style("word-wrap", "break-word") .style("width", "100%") .text(d => d.data.displayName.toUpperCase()); div.append("div") .style("font-size", "9px") .style("opacity", "0.9") .style("margin-top", "2px") .text(d => `${d.data.ticker} | $${d.data.MarketCap_BillionsUSD}B`); return g; }, update => update.call(u => u.transition().duration(750) .attr("transform", d => `translate(${d.x0},${d.y0})`) .call(g => { g.select("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); g.select("foreignObject") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); g.select(".name-label") .style("font-size", d => (d.x1 - d.x0) < 50 ? "8px" : "11px"); })), exit => exit.remove() ); // Apply tooltip handlers to all rectangles leaf.select("rect") .on("mouseover", handleMouseOver) .on("mousemove", handleMouseMove) .on("mouseout", handleMouseOut); yield svg.node(); }33:[{"id":"de210d62a2ef48f46060f18ccb78a6437064d5c0609fbafa0c13f7497c9dfb8889d5088b3298ad0ed7e6fc4f0cec5c798ff028bfe1bd5b4d18c69c1184496fff","href":"https://static.observableusercontent.com/files/de210d62a2ef48f46060f18ccb78a6437064d5c0609fbafa0c13f7497c9dfb8889d5088b3298ad0ed7e6fc4f0cec5c798ff028bfe1bd5b4d18c69c1184496fff","name":"S&P 500 Historical Components & Changes.csv","type":"text/csv","lastModified":1770591507706.255,"size":7791584},{"id":"59faf9abe94b34bde00ed789413d60095ae1820f3ea5e3f9809c972795c1f85910a88289abab8134417722ab6f9543a16fbc1621be54c250dd807f6d65f2d633","href":"https://static.observableusercontent.com/files/59faf9abe94b34bde00ed789413d60095ae1820f3ea5e3f9809c972795c1f85910a88289abab8134417722ab6f9543a16fbc1621be54c250dd807f6d65f2d633","name":"constituents.csv","type":"text/csv","lastModified":1770592245077.523,"size":53625},{"id":"5505d0dc8e437cf777038ea9378b5665ba1645889269eac74e6877424b2afb2a4b0351a262d2ec20db3309a6d680a116c54d39c29dadade962fe674bbab9e4ed","href":"https://static.observableusercontent.com/files/5505d0dc8e437cf777038ea9378b5665ba1645889269eac74e6877424b2afb2a4b0351a262d2ec20db3309a6d680a116c54d39c29dadade962fe674bbab9e4ed","name":"sp500_top20.csv","type":"text/csv","lastModified":1770591197053.342,"size":30169}] 2c:{"id":"3cb48db7d2660444","slug":null,"title":"Assignment 3","thumbnail":"d90b98fbcb8ef67ace779b0dec20f2075abf8fcbacae27dd649d73f7a893ca29","access_level":"unlisted","create_time":"$D2026-02-08T22:11:24.417Z","update_time":"$D2026-02-09T11:59:43.569Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"56c6ce2094d38aa2","login":"shreyans-workspace","name":"Shreyan's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d7b61c045d89ec17c33c5b57bb18c705d24d88cf72e828a86c5455b98b19d15f","tier":"starter_2024"},"version":223,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe2613d1c6752fe7","login":"shreyan-mitra","name":"Shreyan Mitra","avatar_url":"https://avatars-next.observableusercontent.com/1e25d5c68424593f12ee333f38dbfede6f369431b0f3c380f34c42dd0b58aba9","tier":null}],"members":[{"type":"individual","id":"fe2613d1c6752fe7","login":"shreyan-mitra","name":"Shreyan Mitra","avatar_url":"https://avatars-next.observableusercontent.com/1e25d5c68424593f12ee333f38dbfede6f369431b0f3c380f34c42dd0b58aba9","tier":null,"role":"editor"},{"type":"team","id":"56c6ce2094d38aa2","login":"shreyans-workspace","name":"Shreyan's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d7b61c045d89ec17c33c5b57bb18c705d24d88cf72e828a86c5455b98b19d15f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 3","cells":[{"id":0,"value":"# Assignment 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"First, we import the D3 library for visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"## Loading Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"Now, we upload a Kaggle Dataset showing top 20 companies on the S&P 500 from 1989 to 2024, along with their market caps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"historicalMarketData = await FileAttachment(\"sp500_top20.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"Now, we also download a dataset showing the category of each company in the S&P 500 currently. I understand that some tickers we encounter in the historical data above may be delisted and therefore not be shown in this dataset. We will fill in those cases manually.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"sectors = await FileAttachment(\"constituents.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"Create a high-performance dictionary from sectors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":36,"value":"sectorMap = new Map(sectors.map(d => [d.Symbol, d[\"GICS Sector\"]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"Now we join with the historical data, keeping tickers with unknown categories blank.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":42,"value":"finalData = historicalMarketData.map(d => ({ ...d, ticker: d.Ticker?.trim(), sector: sectorMap.get(d.Ticker?.trim()) ?? null }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"Let's view the resulting dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"Inputs.table(finalData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"As you can see, some companies have blank categories. Let's fill them out. First, let's see which companies have empty sector fields in finalData.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"checkMissing = finalData\n .filter(d => d.sector === null)\n .map(d => ({ Ticker: d.ticker, Company: d.Company }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"Inputs.table(checkMissing)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"We fix this manually.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"cleanedFinalData = finalData.map(d => {\n // Fix the ticker, replacing it with the modern ticker\n const tickerOverrides = {\n \"WMMVY\": \"WMT\",\n \"0R2N\": \"RTX\",\n \"4338\": \"MSFT\",\n \"4335\": \"INTC\",\n \"BRK.A\": \"BRK.B\",\n \"WFC PR L\": \"WFC\"\n };\n\n const cleanTicker = tickerOverrides[d.ticker] ?? d.ticker;\n\n let cleanName = d.Company;\n if (cleanName === \"UNITEDHEALTH GROUP INCORPORATED\") {\n cleanName = \"United Health Group Inc\";\n }\n\n cleanName = cleanName\n .replace(/INCORPORATED/gi, \"INC\")\n .replace(/CORPORATION/gi, \"CORP\")\n .replace(/COMMUNICATIONS/gi, \"COMMS\")\n .trim(); // Cleans up any trailing spaces\n\n //Re-run the sector lookup using the CLEAN ticker\n const assignedSector = sectorMap.get(cleanTicker) ?? null;\n\n return {\n ...d,\n ticker: cleanTicker, // D3 animation key\n displayName: cleanName, // Keep original name for now\n sector: assignedSector //Dynamically recalculated\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Inputs.table(cleanedFinalData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"## Visualization: Tree Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":82,"value":"Time to create the treemap.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":90,"value":"Interactive year selector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof viewYear = Inputs.range([1989, 2024], {step: 1, label: \"Select Year\", value: 2024})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"Define the hierarchy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":88,"value":"root = {\n const yearData = cleanedFinalData.filter(d => d.Year === viewYear);\n const rolledUp = d3.group(yearData, d => d.sector);\n \n return d3.hierarchy(rolledUp)\n .sum(d => Array.isArray(d) ? 0 : d.MarketCap_BillionsUSD) \n .sort((a, b) => b.value - a.value);\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"Define color palette.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":105,"value":"color = d3.scaleOrdinal()\n .domain(cleanedFinalData.map(d => d.sector))\n .range(d3.schemeTableau10) // High-contrast professional colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"Add legend.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":118,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"legend = Swatches(color, { columns: \"150px\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"Now, actual visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"Now, we add tooltips and annotations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":179,"value":"tooltip = {\n const div = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"padding\", \"12px\")\n .style(\"background\", \"rgba(0, 0, 0, 0.9)\")\n .style(\"color\", \"white\")\n .style(\"border-radius\", \"8px\")\n .style(\"pointer-events\", \"none\")\n .style(\"opacity\", 0)\n .style(\"transition\", \"opacity 0.2s\")\n .style(\"font-size\", \"13px\")\n .style(\"line-height\", \"1.5\")\n .style(\"max-width\", \"250px\")\n .style(\"z-index\", \"1000\");\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"viewof annotationDisplay = {\n const div = html`

\n ${viewYear}: ${yearAnnotations[viewYear] || `Market capitalization data for ${viewYear}.`}\n

`;\n \n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"Re-rendering the chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"## Visualization: Individual Company Timelines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":191,"value":"Now, let's work on individual company timelines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":193,"value":"Company Timeline function outputs a chart given a company name and ticker:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":195,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"The following HTML and CSS help format and display the actual graph. Note that the output of the cell below will be blank until you run the \"Putting It All Together\" section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":215,"value":"viewof timelineContainer = html`\n

\n ×\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"timelineStyles = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"{\n // Set up close button\n const closeBtn = document.getElementById(\"timeline-close\");\n closeBtn.onclick = () => {\n document.getElementById(\"timeline-section\").style.display = \"none\";\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"## Putting it all together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":202,"value":"Let's modify our treemap to have click handlers that connect with our individual company line graphs. Click any company in the graph below. Then scroll up to the ``timelineContainer`` view to confirm it populates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"