2b:null 2c:["$","title",null,{"children":"Capstone Mineral Resources | JacKu | Observable"}] 31:T495,Plot.plot({ height: 700, projection: "equal-earth", width: 1000, marks: [ Plot.sphere({ fill: "#A7E3E2", stroke: "black", strokeOpacity: 0.5 }), Plot.graticule(), Plot.geo(land, { fill: "#DAF7A6", stroke: "black", strokeOpacity: 0.5 }), Plot.dot(minerals, { filter: (d) => deposits.includes(d.dep_type), x: "longitude", y: "latitude", z: "dep_type", stroke: "black", strokeWidth: 1, fill: (d) => { switch (d.dep_type) { case "Hydrothermal": return "#47EDFF"; case "Surficial": return "limegreen"; case "Sedimentary": return "yellow"; case "Igneous": return "orange"; case "Metamorphic": return "red"; case "Gemstone": return "purple"; case "Unclassified": return "silver"; default: return "gray"; // Default color for unknown types } }, channels: { country: "country", name: "dep_name", formation: "dep_type", commodity: "commodity" }, tip: true }) ] })32:T14a4,Earth = { //this creates a new svg element (two-dimentional graphics display) and gives it dimentions const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //this gives the svg object a projection (I chose equirectangular) and sets the size and position within the overall frame const projection = d3.geoOrthographic() .scale(250) .center([0, 0]) .rotate([0,-30,0]) .translate([width / 2, height / 2]); //this creates two items that stores the initial scale for later and makes a path generator that uses the same projection const initialScale = projection.scale(); const path = d3.geoPath().projection(projection); //this sets a color scale for the points to be plotted and maps the original dataset into a new array based on the deposit type field const colorScale = d3.scaleOrdinal(d3.schemeCategory10) .domain(Array.from(new Set(minerals.map(d => d.dep_type)))); //now we make a new item called "g" that will house all of the different elements that help to zoom the map, this uses the initialScale element that was created earlier. Next, append a circle that will be the globe itself const g = svg.append("g"); g.append("circle") .attr("cx", width / 2) .attr("cy", height / 2) .attr("r", initialScale) .style("fill", "#A7E3E2") .style("stroke", "#000"); //display land from the world topoJSON element and change fill, stroke, and stroke width as desired const land = g.append("path") .datum(topojson.feature(world, world.objects.countries)) .attr("fill", "#DAF7A6") .attr("stroke", "#000") .attr("stroke-width", "0.5px"); //take the mineral dataset and map it to convert into geoJSON const mineralFeatures = minerals.map(d => ({ type: "Feature", properties: d, geometry: { type: "Point", coordinates: [+d.longitude, +d.latitude] } })); //make a new group for the individual points of mineral deposit locations const mineralsGroup = g.append("g") .attr("class", "minerals"); //now make your own tool tip that displays the nessesary information about each deposit const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "10px"); //make a new function that will update as you move the map around //okay wow that was a lot, I get parts of it but there is still a lot that is a little confusing, mostly syntax and knowing what certain words will do function updateEarth() { //updates the land path land.attr("d", path); //update the mineral deposit points const mineralPoints = mineralsGroup.selectAll(".mineral") .data(mineralFeatures); const color_map = { Surficial: "#45B814", Hydrothermal: "#47EDFF", Igneous: "#E1A414", Sedimentary: "#E7FF33", Gemstone: "#3F292B", Unclassified: "silver", Metamorphic: "#F54500" }; const colorScale = d3.scaleOrdinal() .domain(Array.from(new Set(minerals.map(d => d.dep_type)))) // Domain .range(Object.values(color_map)); // Range mineralPoints.enter() .append("path") .attr("class", "mineral") .merge(mineralPoints) .attr("d", path.pointRadius(3)) .attr("fill", d => colorScale(d.properties.dep_type)) .attr("fill-opacity", 1) .attr("stroke", "#000") .attr("stroke-width", 1) .attr("stroke-opacity",0.75) .on("mouseover", function (event, d) { d3.select(this).attr("d", path.pointRadius(5)); tooltip.style("visibility", "visible") .html(`Deposit Name: ${d.properties.dep_name}
Deposit Type: ${d.properties.dep_type}
Commodity: ${d.properties.commodity}
Country: ${d.properties.country}`); }) .on("mousemove", function (event) { tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX) + 10 + "px"); }) .on("mouseout", function () { d3.select(this).attr("d", path.pointRadius(3)); tooltip.style("visibility", "hidden"); }); mineralPoints.exit().remove(); } //render the globe initially updateEarth(); // this will change the map as you drag and zoom in and out const drag = d3.drag() .on("start", dragstarted) .on("drag", dragged); function dragstarted() { d3.select(this).style("cursor", "grabbing"); } function dragged(event) { const rotate = projection.rotate(); const k = sensitivity / projection.scale(); projection.rotate([ rotate[0] + event.dx * k, rotate[1] - event.dy * k ]); updateEarth(); } const zoom = d3.zoom() .scaleExtent([0.5, 8]) .on("zoom", zoomed); function zoomed(event) { const newScale = initialScale * event.transform.k; projection.scale(newScale); //update the earth after dragging and zooming g.select("circle").attr("r", newScale); updateEarth(); } //apply these behaviors(behaviors?) to the svg element as a whole svg.call(drag).call(zoom); //sensitivity of the drag rotation const sensitivity = 75; //return the whole svg node to be rendered return svg.node(); }33:[{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1731001978896.61,"size":756420},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1731001978896.61,"size":545534},{"id":"31076bec74366bb29123348b2959c3876b08459964b5277d0564a882cc4e71f004d23855d059a358c801770bbdcadc5146ae465d679e79ddfa8acc9df9c890f5","href":"https://static.observableusercontent.com/files/31076bec74366bb29123348b2959c3876b08459964b5277d0564a882cc4e71f004d23855d059a358c801770bbdcadc5146ae465d679e79ddfa8acc9df9c890f5","name":"minerals.csv","type":"text/csv","lastModified":1731001978896.61,"size":318662},{"id":"b99fc229015e3aab083365bf5a0f27e70d6ea39e1fbeaa674d463163b82bd83693b216b547df800e84fc74b8e9eeb7967c87b663d488ff731039a4d67b4bc955","href":"https://static.observableusercontent.com/files/b99fc229015e3aab083365bf5a0f27e70d6ea39e1fbeaa674d463163b82bd83693b216b547df800e84fc74b8e9eeb7967c87b663d488ff731039a4d67b4bc955","name":"minerals_geo.geojson","type":"application/geo+json","lastModified":1731001978896.61,"size":1226118},{"id":"e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","href":"https://static.observableusercontent.com/files/e34d00a1441938da12b88603d3f2f6012369d8f1bec25ed9fb6db16c0d16d5ea4861bd6066275b8de9cc4ea3db735741008c4245e8142cd10c13ffa4c9741873","name":"us-counties-10m.json","type":"application/json","lastModified":1731001978896.61,"size":842143}] 2f:{"id":"97ea361bd809f478","slug":null,"title":"Capstone Mineral Resources","thumbnail":"f4c79f9974b2e81ab618dc99ccc68ed0e07420b4a8c2e655992248bbb577aecf","access_level":"public","create_time":"$D2024-11-07T17:52:58.896Z","update_time":"$D2024-12-04T20:19:25.443Z","view_time":null,"first_public_time":"$D2024-11-07T17:53:05.965Z","has_unpublished_edits":null,"fork":{"id":"a433d4ae20356cd4","slug":null,"title":"Mineral Resources","owner":{"id":"d88ab42004196bd7","login":"jacku","name":"JacKu"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d88ab42004196bd7","login":"jacku","name":"JacKu","avatar_url":"https://avatars-next.observableusercontent.com/d71422b7be076e8f10ef2ebd447a08fe615876104ac62379aeaac6e2c7bccc3b","tier":"starter_2024"},"version":875,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"17f8ba8293e24cd9","login":"jacku","name":"JacKu","avatar_url":"https://avatars-next.observableusercontent.com/f5c008fdc21d5314e8ab983e50c42195334234d70ccd243e48148837bae71edc","tier":null}],"members":[{"type":"individual","id":"17f8ba8293e24cd9","login":"jacku","name":"JacKu","avatar_url":"https://avatars-next.observableusercontent.com/f5c008fdc21d5314e8ab983e50c42195334234d70ccd243e48148837bae71edc","tier":null,"role":"editor"},{"type":"team","id":"d88ab42004196bd7","login":"jacku","name":"JacKu","avatar_url":"https://avatars-next.observableusercontent.com/d71422b7be076e8f10ef2ebd447a08fe615876104ac62379aeaac6e2c7bccc3b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Capstone Mineral Resources","cells":[{"id":0,"value":"# Capstone Mineral Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":805,"value":"**Sources:**\nData was obtained from the USGS website: https://mrdata.usgs.gov/major-deposits/ and coding assistance/examples for the drag and zoom map were offered by Jake Bova, CSCI 444 TA (while I used his code, I made the effort of using it as a template and actually writing and understanding (to an extent) the code myself for this section of the project opposed to just copying and pasting without comprehension and thus am citing his help as an official source).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":521,"value":"viewof deposits = Inputs.checkbox(color_map, {\n value: [\"Hydrothermal\",\"Igneous\", \"Sedimentary\", \"Metamorphic\"],\n label: html`Deposit Type`,\n format: ([dep_type, color]) =>\n html`${dep_type}`,\n valueof: ([key, value]) => key\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"viewof deposits5 = Inputs.checkbox(color_map, {\n value: [\"Surficial\"],\n label: html`Deposit Type`,\n format: ([dep_type, color]) => html`\n

\n ${dep_type}\n

\n `,\n valueof: ([key, value]) => key\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"First, we start with the table of raw data, _minerals_, that was obtained from the USGS database on global mineral resources. I cleaned this and attached the continent from which each deposit site is located\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"minerals = await FileAttachment(\"minerals.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"minerals","database":"$undefined"},{"id":526,"value":"color_map = new Map([[\"Hydrothermal\", \"#47EDFF\"],[\"Surficial\",\"#45B814\"],[\"Sedimentary\",\"#E7FF33\"],\n[\"Igneous\",\"#E1A414\"],[\"Metamorphic\",\"#F54500\"],[\"Gemstone\",\"#3F292B\"],[\"Unclassified\",\"silver\"]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"minerals_geo = FileAttachment(\"minerals_geo.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"statemesh = topojson.mesh(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"path = d3.geoPath().projection(projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"projection = d3.geoOrthographic()//.rotate([83, -30])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"world = d3.json(\"https://gist.githubusercontent.com/sarah37/dcca42b936545d9ee9f0bc8052e03dbd/raw/550cfee8177df10e515d82f7eb80bce4f72c52de/world-110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"countries50m = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"land = topojson.feature(land50m, land50m.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"land50m = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"