2c:null 2d:["$","title",null,{"children":"Rockefeller Center Christmas Tree Origins | D3 Work | Observable"}] 32:T1334,{ const svg = d3.create("svg").attr("viewBox", [700, 25, 450, 250]); const canvas = html`

${svg.node()}

`; // https://observablehq.com/@d3/u-s-map const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305]); const g = svg .append("g") .attr("fill", "none") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke", "gray") .attr("stroke-width", 0.25) .style("filter", "drop-shadow(1px 1px 1px rgb(0.5 0.5 0.5 / 0.05))"); // draw states g.selectAll(".pathUS") .data( topojson.feature(us, us.objects.states).features //.filter((d) => states.includes(d.properties.name)) ) .join("path") .attr("d", path) .attr("fill", (d) => grayStates.includes(d.properties.name) ? "#eee" : "#FFECD6" ) .attr("opacity", 0.5) .attr("stroke", (d) => grayStates.includes(d.properties.name) ? "silver" : "gray" ); const length = d3.scaleLinear( [0, d3.max(treesData, (d) => d.Frequency)], [0, 20] ); // add trees const trees = g .selectAll() .data(treesData) .join("path") .attr( "transform", (d) => `translate( ${projection([d["Longitude"], d["Latitude"]])[0]}, ${projection([d["Longitude"], d["Latitude"]])[1]})` ) .attr("d", (d) => spike(length(d.Frequency))) // palette source: https://coolors.co/palettes/popular/green,6%20colors .attr("fill", (d) => d["Decade"] === "1920s" ? "rgba(170, 213, 118, 0.65)" : d["Decade"] === "1940s" ? "rgba(115, 169, 66, 0.65)" : d["Decade"] === "1960s" ? "rgba(83, 141, 34, 0.65)" : d["Decade"] === "1980s" ? "rgba(36, 85, 1, 0.65)" : d["Decade"] === "2000s" ? "rgba(26, 67, 1, 0.65)" : "rgba(20, 54, 1, 0.65)" ) .attr("fill-opacity", 0.5) .attr("stroke", (d) => d["Decade"] === "1920s" ? "rgba(170, 213, 118, 1)" : d["Decade"] === "1940s" ? "rgba(115, 169, 66, 1)" : d["Decade"] === "1960s" ? "rgba(83, 141, 34, 1)" : d["Decade"] === "1980s" ? "rgba(36, 85, 1, 1)" : d["Decade"] === "2000s" ? "rgba(26, 67, 1, 1)" : "rgba(20, 54, 1, 1)" ) .attr("stroke-width", 0.3); // add tooltip const tooltip = d3.select(canvas).select(".tooltip"); trees .on("mouseover", (e, d) => { const tooltipContents = `

${d["City"]}

${ d["State"] }

${ d["Year"].includes(",") ? `Years: ${d["Year"]}` : `Year: ${d["Year"]}` }

`; tooltip.html(tooltipContents); tooltip .style("transform", `translate(${e.x}px, ${e.y - 520}px)`) .transition() .duration(500) .style("opacity", 0.95); }) .on("mouseout", () => tooltip.transition().style("opacity", 0)); // add Rockefeller Center point g.selectAll("circle") .data(rockefellerCoords) .join("circle") .attr("cx", (d) => projection([d[0], d[1]])[0]) .attr("cy", (d) => projection([d[0], d[1]])[1]) .attr("r", 1.5) .attr("fill", "rgba(239, 64, 64, 0.75)") .attr("stroke", "rgba(239, 64, 64, 1)") .attr("stroke-width", 0.5); // add RC label g.append("text") .data(rockefellerCoords) .attr("x", (d) => projection([d[0], d[1]])[0]) .attr("y", (d) => projection([d[0], d[1]])[1]) .attr("dx", 3) .attr("dy", 6) .text("Rockefeller Center") .attr("font-family", "Helvetica") .attr("font-size", "0.35rem") .attr("font-weight", 400) .attr("fill", "#333") .attr("stroke", "none"); // states: stroke // g.append("path") // .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", (d) => (d ? "#eee" : null)) // .attr("stroke-width", 0.5) // .attr("stroke-linejoin", "round") // .attr("d", path); svg.call( d3 .zoom() .extent([ [0, 0], [450, 250] ]) .scaleExtent([1, 8]) .on("zoom", zoomed) ); function zoomed({ transform }) { g.attr("transform", transform); } return canvas; }33:[{"id":"a1ee8c348a1ff39a2544935c6cc9c49e47125ebe319aebd53acbdc4511e6114931db49b95a734081e935faa3923f68ba1d50fb2fc82c44f9fdc68b02834dec31","href":"https://static.observableusercontent.com/files/a1ee8c348a1ff39a2544935c6cc9c49e47125ebe319aebd53acbdc4511e6114931db49b95a734081e935faa3923f68ba1d50fb2fc82c44f9fdc68b02834dec31","name":"states-albers-10m.json","type":"application/json","lastModified":1703306139191.414,"size":82031},{"id":"a78c0497b49c6433787902625b27e0c2ccf346c528f0ab5663beff475f919988efe0b4249b0e81e61401b87fc03c983e9d4872d36e9bf61a07d9ff4503e9f186","href":"https://static.observableusercontent.com/files/a78c0497b49c6433787902625b27e0c2ccf346c528f0ab5663beff475f919988efe0b4249b0e81e61401b87fc03c983e9d4872d36e9bf61a07d9ff4503e9f186","name":"50m.json","type":"application/json","lastModified":1703457701654.652,"size":738365}] 30:{"id":"7d6f837d5669708a","slug":null,"title":"Rockefeller Center Christmas Tree Origins","thumbnail":"0356a9f0bd208a62402a396640d12c4bf7cdbc3a66757e9897fdf953974c34ed","access_level":"public","create_time":"$D2023-12-23T04:34:43.523Z","update_time":"$D2023-12-31T05:03:58.577Z","view_time":null,"first_public_time":"$D2023-12-23T04:34:43.523Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024"},"version":722,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7f8a8c8d4026c16","login":"jeche","name":"Jennifer","avatar_url":"https://avatars-next.observableusercontent.com/2c99b0f3c8f49df2fdfe70a529d22c753549f920292875a89064bfb32601f46e","tier":null}],"members":[{"type":"individual","id":"c7f8a8c8d4026c16","login":"jeche","name":"Jennifer","avatar_url":"https://avatars-next.observableusercontent.com/2c99b0f3c8f49df2fdfe70a529d22c753549f920292875a89064bfb32601f46e","tier":null,"role":"editor"},{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rockefeller Center Christmas Tree Origins","cells":[{"id":29,"value":"# Rockefeller Center Christmas Tree Origins\n\nThe iconic Rockefeller Center Christmas tree has illuminated the area in Midtown Manhattan in New York City for nearly a century. Ranging from 70 to as high as 100 feet (20-30 meters) in recent decades, the trees tend to come from regions in or near the metropolitan area, but have also originated from as far as Ohio, Maine and Ontario.\n\nUsing [tree data from Wikipedia](https://en.wikipedia.org/wiki/Rockefeller_Center_Christmas_Tree) and based on the [U.S. State Map](https://observablehq.com/@mbostock/u-s-state-map) and [spike map](https://observablehq.com/@d3/spike-map/2), this visualization shows the geographic origins of the trees, where data was available. The shade of the markers indicates when the tree was in Rockefeller Center. The **darker the shade**, the more recent the tree's arrival. If the location provided more than one tree, the most recent year was used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"states = [\n \"New York\",\n \"New Jersey\",\n \"Rhode Island\",\n \"Connecticut\",\n \"Massachusetts\",\n \"Connecticut\",\n \"Maine\",\n \"Maryland\",\n \"Pennsylvania\",\n \"New Hampshire\",\n \"Ontario\",\n \"Ohio\",\n \"Vermont\",\n \"Virginia\",\n \"West Virginia\",\n \"Delaware\",\n \"Kentucky\",\n \"Indiana\",\n \"Michigan\",\n \"North Carolina\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"grayStates = [\n \"Virginia\",\n \"West Virginia\",\n \"Delaware\",\n \"Kentucky\",\n \"Indiana\",\n \"Michigan\",\n \"North Carolina\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"treesDataRaw = d3.csv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQYgSGRD1GbUa34isSbKZQ7khKzsINFyjk7EYwTnhrUiCBf928Gv4lM_4hACOyGCYGjixK_uCRpVlav/pub?gid=0&single=true&output=csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"treesData = treesDataRaw\n .map((d) => ({\n ...d,\n Latitude: +d.Latitude,\n Longitude: +d.Longitude,\n Frequency: +d.Frequency\n }))\n .filter((d) => d.Longitude)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"rockefellerCoords = [[-73.9786736, 40.75818758]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":694,"value":"### Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"spike = (length, width = 3) => `M${-width / 2},0L0,${-length}L${width / 2},0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"