29:null 2a:["$","title",null,{"children":"The Metropolitan Museum of Art's Collection | Camille's Workspace | Observable"}] 2f:T49d,chart = { const svg = d3.create("svg").attr("viewBox", `0, 0, ${width}, ${height}`) const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") svg.selectAll("path") .data(countries.features) .enter() .append("path") .attr("d", path) .attr("stroke", "#111") .attr("stroke-width", 0.5) .attr("fill", d => d.properties.data ? cScale(d.properties.data) : "lightgrey") .on("mouseover", function(event, d) { let text = d.properties.name const numArt = d.properties.data const topPeriod = visOneMap2[d.properties.name] if (numArt > 0) { text = text + "\nTotal Art Pieces: " + numArt text = text + "\nTop Period: " + topPeriod showToolTip(text, [event.pageX, event.pageY]) } }) .on("mousemove", function(event) { d3.select(".tooltip") .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") }) .on("mouseout", function() { d3.select(".tooltip").style("visibility", "hidden") }) return svg.node() }30:T4a4,While exploring the dataset, we noticed that that there was a huge variety of different time periods represented throughout each of the departments. The Asian Art department even has 1800+ different time periods represented from various cultures and eras. Therefore, we wanted to create a donut chart that represented the most commonly represented periods of each department. However, for datasets with a huge number of time periods, many of the time periods would each only have under 50 art pieces, which is why we adapted our approach to only represent the top 15 most commonly represented periods of time for each department. In the visualization below, we display only five of the Met's departments because the other departments had a lack of period/time-related data, which forced us to use our "removeNulls" function to clean out the data. After doing so, we created a small-multiples chart of each of the departments where you can click on each donut chart for a more in-depth exploration of each department below. In the larger visualization, we have a tooltip explaining each of the section's period represented as well as the number of art pieces for each period represented. 31:T17d1,{ // the usual set up const {visWidth, visHeight, margin} = dimensions; const radius = 80 const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom) const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.append('text') .attr('x', visWidth - 100) .attr('y', visHeight - 100) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('CLEAR') .on('click', function (event, d) { onMouseExit(d) }) g.append('text') .attr('x', visWidth / 2) .attr('y', -margin.top + 5) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Division of Each Met Art Department by Top 15 Most Represented Periods'); const cells = g.selectAll('g') .data(departmentArray) .join('g') .attr('transform', (d, i) => { const r = Math.floor(i / numberOfCols); const c = i % numberOfCols; // use the scales to get the x, y coordinates return `translate(${colScale(c)}, ${rowScale(r) + 10})`; }) cells.append('text') .join('text') .attr('font-size', 15) .attr('font-family', 'sans-serif') .attr("text-anchor", "middle") .attr("transform", `translate(${visWidth / 6 - 10}, ${visHeight/2 - 30})`) .text(d => d[0]) const pie3 = d3.pie().value(d => d.count) const arc = d3.arc() .innerRadius(40) .outerRadius(radius) .cornerRadius(4) const expanded = d3.create("svg") //.attr("opacity", 1) .style("background-color", "azure") .style("margin", "0 auto") .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom) .style("border-radius", "10px") const promptText = expanded.append('text') .join('text') .attr('font-size', 15) .attr('color', "black") .attr('font-family', 'sans-serif') .attr("text-anchor", "middle") .attr("transform", `translate (${(visWidth + margin.left + margin.right) / 2}, ${(visHeight + margin.left + margin.right) / 2})`) .text("Click on donut charts for an in-depth look at each department") const arcTool = d3.arc() .innerRadius(100) .outerRadius(radius*2.5) .cornerRadius(10) function update(data) { var donutHolder = expanded.selectAll('donut') .data(data) donutHolder.exit().remove(); donutHolder .enter() .append("path") .merge(donutHolder) .attr('d', arcTool) .attr("transform", `translate (${(visWidth + margin.left + margin.right) / 2}, ${(visHeight + margin.left + margin.right) / 2})`) .attr('fill', function(d) { //console.log(d) var periodsArray = d.data.periodsArray var colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), periodsArray.length); var colorScale = d3.scaleOrdinal().domain(periodsArray).range(d3.schemeSet3) // console.log(d) return colorScale(d.data.period)}) //.attr('fill', d => createColors(d.size)) // .attr("fill", d => color(N[d.data])) .attr("stroke", "grey") .style("stroke-width", "2px") .on("mouseover", function (event, d) { showToolTip(d.data.period, d.data.count, d) }) .on("mouseout", function () { tooltip3.style("opacity", 0) }) } const tooltip3 = d3.create("div") .attr("class", "tooltip3") .attr("id", "tooltip3") .html(`

`) var showToolTip = (period, count, d) => { tooltip3.style("opacity", 1) tooltip3.select("#period") .text(period); tooltip3.select("#count") .text(count); const x = arcTool.centroid(d)[0] + (((visWidth + margin.left + margin.right) / 2)); const y = arcTool.centroid(d)[1] + ((visHeight + margin.top + margin.bottom) / 2); tooltip3.style("transform", `translate(calc( -50% + ${x}px), calc(-100% + ${y}px))`); } function onMouseClick(d) { expanded.selectAll('path').remove(); promptText.attr("opacity", 0) update(pie3(convertDepartment(d[1]))) } function onMouseExit(d) { promptText.attr("opacity", 1) expanded.selectAll('path').remove(); } const pieGroups = g.append('g') .selectAll('g') .data(departmentArray) .join('g') .attr('transform', (d, i) => { /* i is the current index in this case, the value of i will be from 0-25. */ // get the row index and column index for this cell const r = Math.floor(i / numberOfCols); const c = i % numberOfCols; // use the scales to get the x, y coordinates return `translate(${colScale(c) + visWidth/6 - 10}, ${rowScale(r) + 10 + visHeight/4 - 20})`; }) .on('click', function (event, d) { onMouseClick(d) }) pieGroups.selectAll('path') .data(d => pie3(convertDepartment(d[1]))) .join('path') .attr('d', d => arc(d)) .attr('fill', function(d) { //console.log(d) var periodsArray = d.data.periodsArray var colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), periodsArray.length); var colorScale = d3.scaleOrdinal().domain(periodsArray).range(d3.schemeSet3) // console.log(d) return colorScale(d.data.period)}) .attr("stroke", "grey") .style("stroke-width", "1px") return html`

${svg.node()}

${tooltip3.node()} ${expanded.node()}

`; }32:T1536,// match cultures with modern day countries function convertCountries(obj) { // create a mapping of original key to modern country name const countryMap = { "Japan": "Japan", "China": "China", "Korea": "South Korea", "India (Tamil Nadu)": "India", "India": "India", "India (Bihar)": "India", "Thailand (Ban Chiang)": "Thailand", "Thailand": "Thailand", "Indonesia (Java)": "Indonesia", "Nepal (Kathmandu Valley)": "Nepal", "Sri Lanka": "Sri Lanka", "Indonesia (Java, Lumajang, Pasiran)": "Indonesia", "Indonesia": "Indonesia", "Cambodia or Thailand": "Cambodia", "Indonesia (Sulawesi)": "Indonesia", "Vietnam": "Vietnam", "India (Bengal) or Bangladesh": "India", "India (Bihar or West Bengal)": "India", "Nepal, Kathmandu Valley": "Nepal", "Cambodia": "Cambodia", "Burma": "Myanmar", "China (Xinjiang Autonomous Region)": "China", "North America (Alaska, Cape Prince of Wales)": "United States of America", "North America (Alaska)": "United States of America", "China (Xinjiang Uyghur Autonomous Region)": "China", "China (?)": "China", "Vietnam (North)": "Vietnam", "China (Xinjiang Autonomous Region, Central Asia)": "China", "Northwest China/Eastern Central Asia": "China", "Roman": "Italy", "Greek": "Greece", "Roman, Cypriot": "Cyprus", "Cypriot": "Cyprus", "Phoenician": "Lebanon", "Roman, Eastern Mediterranean": "Italy", "Roman, Palestinian": "Israel", "Greek, Eastern Mediterranean": "Greece", "Greek, Cypriot": "Cyprus", "Greek, Rhodian": "Greece", "East Greek": "Greece", "Greek, Corinthian": "Greece", "Greek, Euboean": "Greece", "Greek, Attic": "Greece", "Helladic, Mycenaean": "Greece", "Mycenaean": "Greece", "Helladic": "Greece", "Egyptian": "Egypt", "Greek or Roman": "Greece", "Roman, Egyptian": "Egypt", "Roman, Syrian": "Syria", "Cypriot or Phoenician": "Cyprus", "Greek or Cypriot": "Greece", "Phoenician or Carthaginian": "Lebanon", "Egyptian, Ptolemaic": "Egypt", "Aegean": "Greece", "Possibly Cypriot": "Cyprus", "Phrygian": "Turkey", "Greek, Laconian": "Greece", "Greek, Boeotian": "Greece", "Etruscan": "Italy", "Greek, South Italian, Apulian": "Italy", "Greek, South Italian, Gnathian": "Italy", "Greek or Etruscan": "Italy", "Italic": "Italy", "Egyptian, Roman": "Egypt", "Roman": "Italy", "Rhenish": "Germany", "Syro-Palestinian": "Palestine", "Eastern Mediterranean or Italian": "Italy", "Greek": "Greece", "Asia Minor": "Turkey", "Ptolemaic": "Egypt", "Egypt, Alexandria-Hadra": "Egypt", "Ptolemaic, Cretan": "Greece", "South Italian, Campanian": "Italy", "South Italian, Apulian, Gnathian": "Italy", "Italic-Native, South Italian (Daunian)": "Italy", "South Italian, Lucanian": "Italy", "probably Italian": "Italy", "Villanovan": "Italy", "Etruscan or Italic": "Italy", "Praenestine": "Italy", "Italic, Villanovan": "Italy", "Chalcidian": "Greece", "South Italian, Campanian, Calenian": "Italy", "South Italian, Tarentine": "Italy", "Cretan": "Greece", "South Italian, Apulian, Canosan": "Italy", "Minoan": "Greece", "South Italian, Campanian, Teano": "Italy", "Greek Neolithic": "Greece", "Cycladic": "Greece", "Lydian": "Turkey", "Sicilian": "Italy", "East Greek/Sardis, Lydian": "Turkey", "Rhodian": "Greece", "Etruscan, Vulci": "Italy", "Roman, Pompeian": "Italy", "Ionian": "Turkey", "Etruscan, Etrusco-Corinthian": "Italy", "Minoan, Crete": "Greece", "Seleucid": "Syria", "Neolithic, Thessaly": "Greece", "Neolithic, Nemea": "Greece", "Neolithic, Gonia": "Greece", "Attic?": "Greece", "Corinthian?": "Greece", "Assyrian": "Iraq", "Syro-Anatolian-Levantine": "Syria", "Mitanni": "Syria", "Kassite": "Iraq", "Assyro-Babylonian": "Iraq", "Sasanian": "Iran", "Babylonian": "Iraq", "Babylonian or Achaemenid": "Iraq", "Achaemenid": "Iran", "Parthian or Sasanian": "Iran", "Parthian": "Iran", "Iran": "Iran", "Seleucid or Parthian": "Iran", "Akkadian": "Iraq", "Neo-Sumerian": "Iraq", "Hittite": "Turkey", "Old Assyrian Trading Colony": "Turkey", "Urartian": "Armenia", "Sasanian or Islamic": "Iran", "Nabataean": "Jordan", "Canaanite": "Israel", "Sumerian": "Iraq", "Islamic": "Saudi Arabia", "Israelite": "Israel", "Chinese": "China", "Elamite": "Iran", "Isin-Larsa": "Iraq", "Indus": "Pakistan", "Ubaid": "Iraq", "Bactria-Margiana Archaeological Complex": "Turkmenistan", "Hattian": "Turkey", "Yortan": "Turkey", "Parthian (?)": "Iran", "Edomite": "Jordan", "Ghassulian": "Jordan", "Costa Rican": "Costa Rica", "Aztec": "Mexico", "Mexican": "Mexico", "Peruvian": "Peru", "Tairona People; Gayraca style": "Colombia" }; const newObj = {}; for (const key in obj) { const country = countryMap[key]; if (country) { const existing = newObj[country]; if (existing) { for (const subkey in obj[key]) { existing[subkey] = (existing[subkey] || 0) + obj[key][subkey]; } } else { newObj[country] = obj[key]; } } } return newObj; }33:T497,For the second visualization, we decided to investigate the mediums popular in each period, extracting the "Period" and "Medium" columns. With this, we launched a cursory investigation into what this looks like for each period. One of the problems that we encountered was the hundreds of mediums recorded for each period. For example, a period would have 3 mediums with greater than 200 pieces of art and then tens or hundreds more with < 50. To clean the data and prep for visualization, we decided to only show the top 5 mediums for each period and include an "Other" category to encompass all artwork. We also strategically chose periods that didn't include "Other" as the majority of pieces, so that data exploration would be more informative to users. An interesting feature is that the scrubber does a word search through all period keys and add the associated object to a combined array to representing all data for that period. This was done because of the many ways to represent a period present in the dataset. For example, there would be the period name, the period name and year, the period name and a range of years, an expanded version of the period name, etc. 34:T11c8,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/donut-chart function DonutChartUnique(data, scrubPeriod, { name = ([x]) => x, // given d in data, returns the (ordinal) label value = ([, y]) => y, // given d in data, returns the (quantitative) value title, // given d in data, returns the title text width = 640, // outer width, in pixels height = 500, // outer height, in pixels innerRadius = Math.min(width, height) / 3, // inner radius of pie, in pixels (non-zero for donut) outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels labelRadius = (innerRadius + outerRadius) / 2, // center radius of labels format = ",", // a format specifier for values (in the label) names, // array of names (the domain of the color scale) colors, // array of colors for names stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths strokeWidth = 1, // width of stroke separating wedges strokeLinejoin = "round", // line join of stroke separating wedges padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges } = {}) { // Compute values. const N = d3.map(data, name); const V = d3.map(data, value); const I = d3.range(N.length).filter(i => !isNaN(V[i])); // Unique the names. if (names === undefined) names = N; names = new d3.InternSet(names); // Chose a default color scheme based on cardinality. if (colors === undefined) colors = d3.schemeSpectral[names.size]; if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size); // Construct scales. const color = d3.scaleOrdinal(names, d3.schemeSet3); // Compute titles. if (title === undefined) { const formatValue = d3.format(format); title = i => `${N[i]}\n${formatValue(V[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } // Construct arcs. const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Add a background label for the current year. svg.append("g") .attr('id', 'periodLabel') .attr('x', 0) .attr('y',0) .attr('fill', '#ccc') .attr('font-family', "'Work sans', sans-serif") .attr('font-weight', 500) .attr('font-size', 80) .text(scrubPeriod + "Period"); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 24) .attr("font-weight", 900) .attr("text-anchor", "middle") .append("text") .text(scrubPeriod + " Period"); svg.append("g") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .selectAll("path") .data(arcs) .join("path") .on("mouseover", (event, d) => onMouseEnter(d)) .on("mouseout", (event, d) => onMouseLeave(d)) .attr("fill", d => color(N[d.data])) .attr("d", arc) .append("title") .text(d => title(d.data)) svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .selectAll("tspan") .data(d => { const lines = `${title(d.data)}`.split(/\n/); return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1); }) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d); function onMouseEnter(d) { const lines = `${title(d.data)}`.split(/\n/); console.log(lines) const x = arc.centroid(d)[0] + (width / 2); const y = arc.centroid(d)[1] + (height / 2); tooltip2.style("opacity", 1); tooltip2.style("transform", `translate(calc( -50% + ${x}px), calc(-100% + ${y}px))`); tooltip2.select("#category") .text(lines[0]); tooltip2.select("#quantity") .text(lines[1]); } function onMouseLeave() { tooltip2.style("opacity", 0); } return Object.assign(svg.node(), {scales: {color}}); }35:T468,html` `36:T45c,After doing so, we had to do some additional data mutation in order to actually fit it into the donut chart because of the way that the d3 code was structured and the fact that much of the code only accepted arrays instead of objects. Therefore, we run "convertDepartment", which takes each of the second element objects from "departmentArray", and outputs it into an array of objects where each object again has the relevant period data, the count, as well as an array of the top 15 most represented periods. This is where we also cut off the top 15 and remove the rest of the periods. In addition, the reason why we stick the "periodsArray" data here, which is admittedly poor coding style, is because of the way that each of the donut arc data inputs are structured and the way that color works for the donut charts. In order for us to color the donut chart, we need to pre-emptively know what periods we're working with to create the domain for the color functions, but because each arc does not have access to the greater "pie" data, we need to stick the "periodsArray" in there in order for us to have access. 37:T41a,html` `38:T8c1,vis4 = { // give this svg an id so we can select it outside this cell const barChart = d3.select(html``); barChart.attr("width", svgWidth); barChart.attr("height", svgHeight); // add x-axis barChart.append("g") .attr('transform', `translate(${margin.left}, ${height4 + margin.top + spacing})`) .call(d3.axisBottom(xScale)) .selectAll("text") .attr("dx", "-.8em") .attr("dy", ".20em") .style("text-anchor", "end") .attr("transform", "rotate(-65)"); // add add y-axis barChart.append("g") .attr('transform', `translate(${margin.left}, ${margin.top + spacing})`) .call(d3.axisLeft(yScale)); // add chart title barChart.append("text") .attr("x", svgWidth / 2) .attr("y", 25) .attr("text-anchor", "middle") .text("Size of Each Department at the Met"); //add x-axis title barChart.append("text") .attr("x", margin.left + width4 / 2) .attr("y", svgHeight - 5) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Department"); // add y-axis title, remember that all transformations are around the (0, 0) origin barChart.append("text") .attr("x", -(margin.top + height4 / 2)) .attr("y", 15) .attr("transform", "rotate(-90") // rotate it by -90 degrees .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Size of Department"); var tooltip = d3Tip() .attr('id', 'd3-tip') .html(function(event, d) { return d.size; }); const barGroup = barChart.append("g") // create a group to keep the bars .attr("class", "barGroup") .attr("transform", `translate(${margin.left}, ${margin.top})`); // shift all bars by the margin offset // Add rectangles here by binding the totalPopDataEntries array with rect elements barGroup.selectAll("rect") .data(departmentEntries) .join("rect") .attr("x", d => xScale(d.department)) .attr("y", d => yScale(d.size) + spacing) .attr("width", xScale.bandwidth()) .attr("height", d => height4 - yScale(d.size)) .attr("fill", d => colorScale(d.department)) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide) .call(tooltip); return barChart }39:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1715622912689.118,"size":107761}] 2d:{"id":"48ccf9faea198a1a","slug":null,"title":"The Metropolitan Museum of Art's Collection","thumbnail":null,"access_level":"public","create_time":"$D2024-05-13T17:55:12.689Z","update_time":"$D2024-05-13T17:55:12.689Z","view_time":null,"first_public_time":"$D2024-05-13T17:55:12.689Z","fork":{"id":"f83530dab084b024","slug":null,"title":"The Metropolitan Museum of Art's Collection","owner":{"id":"6b9013225a568399","login":"amberpat","name":"Amber Pat"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a1c22cedaae1ce7b","login":"camilledlt","name":"Camille's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ff43985b4fcfb09ec72858d3308d704f782a52cb38cb773a0b753754f9904443","tier":"starter_2024"},"version":523,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ce24b37fe216a30","login":"camille2","name":"Camille","avatar_url":"https://avatars-next.observableusercontent.com/72e733367eaea79f502304d9c6e0decb595ff1907977a5c7eaf035e15ce35cb5","tier":null}],"members":[{"type":"individual","id":"0ce24b37fe216a30","login":"camille2","name":"Camille","avatar_url":"https://avatars-next.observableusercontent.com/72e733367eaea79f502304d9c6e0decb595ff1907977a5c7eaf035e15ce35cb5","tier":null,"role":"editor"},{"type":"team","id":"a1c22cedaae1ce7b","login":"camilledlt","name":"Camille's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/ff43985b4fcfb09ec72858d3308d704f782a52cb38cb773a0b753754f9904443","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"The Metropolitan Museum of Art's Collection","cells":[{"id":0,"value":"# The Metropolitan Museum of Art's Collection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md `#### Alex Lee and Amber Patrick`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"The Metropolitan Museum of Art is a longstanding fixture in New York City. With millions of works of art, with some dating back to over 5,000 year ago, the Met is undeniably a vault of human history. As one of the largest and most diverse museums in the world, there is much to be uncovered by diving into the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":451,"value":"md `## Exploring the Art's Origin`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"One of the attractions of the Met is the enormous collection of pieces derived from countless time periods. For example, the museum hosts limited time exhibitions that often focus on the art from a specific time and location. Thus, we wanted to begin our exploration process by investigating where the art in the Met is sourced from. Additionally, we were interested in knowing which period the plurality of pieces is from. In our first visualization, we explored this idea through an interactive map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":169,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"legend({\n color: cScale,\n title: \"Number of Artworks\",\n tickFormat: t => t,\n ticks: 5,\n width: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"From our visualization, we saw the highest concentrations of artworks in countries like China, Greece, Japan, and other ancient civilizations. (Of course, this is partially due to the data cleaning processes rationalized in our Methods section.) Interestingly, these countries are also associated with flourishing ancient civilizations, where the documented artwork spans centuries, if not millennia. While we were not surprised by this result, we were eager to dive further into some of the periods contributing to this distribution of origin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":471,"value":"md `## Exploring the Mediums of Time Periods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"When determining how to investigate periods at a smaller scale, we learned that we were most excited by how these pieces of art were created. In particular, we chose 5 periods of personal interest to better understand the materials of each time, and how this distribution evolves as the periods progress.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":256,"value":"viewof scrubPeriod = Scrubber([\"Neolithic\", \"Iron\", \"Roman\", \"Byzantine\", \"Edo\"], {delay: 2000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"html`\n

\n \n

\n ${updateDonut(scrubPeriod)}\n ${tooltip2.node()}\n \n

\n \n \n `;\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":413,"value":"From our visualization, we were able to note how the most popular mediums used to create art evolved over time. From flint in the Neolithic Period to glass in the Byzantine period, we can note how the mediums became more sophisticated as time progressed. Interestingly, there were some consistently prevalent mediums, such as terracotta. Used for sculpture making in particular, thousands of pieces at the Met can be derived back to terracotta.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":446,"value":"md `## Exploring each Department's various time periods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"As you can see, a great number of the departments have a huge variety of periods represented, where there seems to be an overly represented period followed by a selection of much smaller sections. A deeper exploration of the data shows that there seems to be a lot of overlap between the types of periods, such as within the Asian Art department where there are several variations of the Edo period being represented. Therefore, if given more time, we'd love to have figured out a way to extract unique periods using ChatGPT or some other NLP-based solution and get a better sense of the data. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":461,"value":"md `## Comparing the Met's departments to each other`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"After comparing the relative breakdown of each of the departments, we were curious to see how the departments stacked up against each other instead. Therefore, we took each of the departments and got the number of objects associated with each department to compare against each other. And you can hover over each of the bars to see how many objects exactly are in each department. \n\nAs we can see, there is a clear overrepresentation of the \"Drawing and Prints\" department at 167,152 objects and the \"European Sculpture and Decorative Art\" department coming in at a distant second with 42,934. And given our general knowledge of art museums, this doesn't seem to be too surprising at all! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":426,"value":"vis4.node();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"md `## Wrap Up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"Overall, we're extemely happy to have worked with the Met's dataset. We've extracted some interesting insights, from the importance of ancient civilizations in the representation of a country's works in the Met to the distribution of art pieces across departments. Throughout our work, we've grown an even stronger appreciation for the robust documentation of human history present in the Metropolitan Museum of Art. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md `# Data and Methods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"Data was sourced from The Metropolitan Museum of Art's Open Access Initiative (https://github.com/metmuseum/). *Due to the scale of the data source, please see the link instead of a file submission, as discussed with teaching staff.*\n\nEach visualization is based off of a set few generic wrangling methods. First, the massive dataset was imported into d3 using d3.csv(\"https://media.githubusercontent.com/media/metmuseum/openaccess/master/MetObjects.csv\"). Next, we created widely applicable functions (that were later used on a case by case basis) for further cleaning, such as removeNulls (removes rows with null values for columns of interest) and createMap (given two columns of interest, create a map from the initial array of objects). Beyond this, we then split into visualization specific methods. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":166,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"d3Tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"// get object data\nobjectsData = d3.csv(\"https://media.githubusercontent.com/media/metmuseum/openaccess/master/MetObjects.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"function createMap (objects, first, second) { //generic version of getDepartmentPeriods\n var mapping = new Object(); //initialize mapping\n var firstList = getUnique(objects, first); //get list of uniques for first category\n firstList.forEach(firstObj => mapping[firstObj] = new Object()); //generate dictionaries for each of the categories \n objects.forEach(function (object) {\n var firstObject = mapping[object[first]] //retrieve the dictionary that correlates to the object's first category that we're searching for \n if (object[second] in firstObject) { //if the second category exists as a key in the retrieved dictionary\n mapping[object[first]][object[second]] = mapping[object[first]][object[second]] + 1; //update counter\n }\n else {\n mapping[object[first]][object[second]] = 1; \n }\n })\n //mapping = cleanMap(mapping);\n return mapping; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"// once the data has been condensed into desired columns, remove null values\nfunction removeNulls (objects) {\n var noNulls = [];\n objects.forEach(object => {\n var nullPresent = false;\n for (var k in object) {\n if (object[k] === \"\" || object[k] === \" \" || object[k] === \" | \") {\n nullPresent = true;\n }\n }\n nullPresent ? null : noNulls.push(object);\n });\n return noNulls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"// get the visualized data in form of array of objects\nfunction getVisData(objects, first, second) {\n var cleanedVisData = [];\n objects.forEach(object => cleanedVisData.push(_.pick(object, first, second))); \n return cleanedVisData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"// get unique set of qualifiers (based on category) to map\nfunction getUnique (objects, qualifier) {\n var qualifierSet = new Set(); \n // need to make case insensitive\n objects.forEach(object => qualifierSet.add(object[qualifier])); \n var qualifierList = [...qualifierSet];\n return qualifierList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"md `#### Visualization 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"For the first visualization, we decided that the best way to approach visualizing the origin data was to find the relevant columns in the dataset, which were \"Culture\" and \"Period.\" Culture, as opposed to \"Artist Nationality\" or \"Country\" presented the dataset with the greatest number of rows after nulls were taken into account. The problem, however, was 700+ uniquely named cultures that all had to be hand keyed to be associated with a modern country for mapping. To address this problem, we decided to trim the dataset such that only cultures with at least 10 pieces of art were included. After keying each culture to a modern country, we combined objects with the same country to get a dataset of all represented periods for a country and the total counts. With this, we extracted the period with the largest count as the most popular period and generated a total count across all periods as well. After this extensive process, we developed our visualization with inspiration from the source in our appendix. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":139,"value":"// only keep cultures with at least 10 works of art\nfunction cleanMapVis1 (map) {\n for (var k in map) {\n var total = 0;\n for (var key in map[k]) {\n total += (map[k][key]);\n }\n total < 10 ? delete map[k] : null;\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"cleanedVisOneData = removeNulls(getVisData(objectsData, 'Culture', 'Period'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"// change form that data is in for visualization\nfunction convertForVisOne (countries) {\n var converted = [];\n var allCountries = Object.keys(countries);\n for (var country in allCountries) {\n var temp = new Object;\n temp[\"name\"] = allCountries[country];\n temp[\"value\"] = countries[allCountries[country]];\n converted.push(temp);\n }\n return converted;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"// apply country conversions to data\nvisOneData = convertCountries(createMap(cleanedVisOneData, 'Culture', 'Period'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"tempVisOneData = convertForVisOne(visOneData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"function findGreatest(arr) {\n var modified = [];\n arr.forEach(object => {\n var greatestNum = 0;\n var greatest = \"\";\n var currVal = object.value;\n var allKeys = Object.keys(currVal);\n allKeys.forEach(key => {\n if (currVal[key] > greatestNum) {\n greatestNum = currVal[key];\n greatest = key;\n }\n });\n object[\"greatest\"] = greatest;\n modified.push(object)\n });\n \n return modified;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"// add up number of pieces of artwork from each country\nfunction sumValues(arr) {\n return arr.map(obj => ({\n name: obj.name,\n greatest: obj.greatest,\n value: Object.values(obj.value).reduce((acc, curr) => acc + curr)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"// add totals for map\nfinalVisOneData = sumValues(findGreatest(tempVisOneData))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"// convert counts to map format to add to country=>property=>data\nvisOneMap = {\n var output = {}; \n for(var object of finalVisOneData) {\n output[object.name] = object.value;\n }\n return output; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"// for greatest period\nvisOneMap2 = {\n var output = {}; \n for(var object of finalVisOneData) {\n output[object.name] = object.greatest;\n }\n return output; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"// tooltip\nshowToolTip = (text, coords) => {\n d3.select(\".tooltip\")\n .text(text)\n .style(\"top\", coords[1] + \"px\")\n .style(\"left\", coords[0] + \"px\")\n .style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"// scale for coloring map\ncScale = d3.scaleSqrt()\n .domain([\n 0,\n d3.max(finalVisOneData, d => d.value)])\n .range([-1, 0, 1])\n .interpolate((a, b) => t => d3.interpolatePurples(t))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"outline = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"projection = d3.geoNaturalEarth1()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"world = await FileAttachment(\"countries-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"countries = {\n // group entities by name and year\n const entities = d3.group(finalVisOneData, d => d.country);\n const applicableCountries = [];\n \n // attach data to each country in properties\n const countries = topojson.feature(world, world.objects.countries);\n countries.features.forEach(country => {\n if (finalVisOneData.some(obj => obj.name === country.properties.name)) {\n country.properties.data = visOneMap[country.properties.name];\n } else {\n country.properties.data = 0;\n }\n })\n \n return countries;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"entities = d3.group(finalVisOneData, d => d.country, d => d.value);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md `#### Visualization 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":231,"value":"// if less than 10 \nfunction cleanMapVis2 (map) {\n for (var k in map) {\n var total = 0;\n for (var key in map[k]) {\n total += (map[k][key]);\n }\n total < 10 ? delete map[k] : null;\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"function visTwoCreateMultiLine (objects) {\n var singleLine = [];\n objects.forEach(object => {\n var noDelimiter = [];\n var med = object[\"Medium\"];\n if (med.indexOf(', ') >= 0) {\n noDelimiter = med.split(\", \");\n }\n if (med.indexOf('; ') >= 0) {\n noDelimiter = med.split(\"; \");\n }\n if (noDelimiter.length > 0) {\n for (var index in noDelimiter) {\n var temp = new Object;\n temp[\"Period\"] = object[\"Period\"];\n temp[\"Medium\"] = noDelimiter[index];\n singleLine.push(temp);\n } \n } else {\n singleLine.push(object);\n }\n });\n return singleLine;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"cleanedVisTwoData = visTwoCreateMultiLine(removeNulls(getVisData(objectsData, 'Period', 'Medium')))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"mediumPeriodsObj = cleanMapVis2(createMap(cleanedVisTwoData, \"Period\", 'Medium'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"// change data format for visualization\nfunction convertForVisTwo (period) {\n var converted = [];\n var name = Object.keys(period);\n var allMeds = period[name];\n for (var med in allMeds) {\n var temp = new Object;\n temp[\"name\"] = med;\n temp[\"value\"] = allMeds[med];\n converted.push(temp);\n }\n return converted;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"// https://stackoverflow.com/questions/33850412/merge-javascript-objects-in-array-with-same-key\nfunction findRelevantPeriods (objects, periodSubStr) {\n periodSubStr = periodSubStr.toLowerCase();\n var temp = [];\n var relevantPeriods = [];\n var allPeriods = Object.keys(objects);\n objects.forEach(period => {\n var periodKeys = Object.keys(period);\n for (var key in periodKeys) {\n if (periodKeys[key].toLowerCase().indexOf(periodSubStr) !== -1) {\n var mediumsPerPeriod = convertForVisTwo(period);\n for (var ind in mediumsPerPeriod) {\n temp.push(mediumsPerPeriod[ind]);\n }\n }\n }\n });\n return temp;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"// obejects with the same period can be combined\nfunction combineObjects(array) {\n var result = {};\n for (let i = 0; i < array.length; i++) {\n var { name, value } = array[i];\n var lowerCaseName = name.toLowerCase(); \n if (result[lowerCaseName]) {\n result[lowerCaseName] += value;\n } else {\n result[lowerCaseName] = value;\n }\n }\n return Object.keys(result).map(name => ({ name, value: result[name] }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"// get top five mediums\nfunction topFive(arr) {\n arr.sort((a, b) => b.value - a.value);\n var topFive = arr.slice(0, 5);\n var otherValue = arr.slice(5).reduce((acc, cur) => acc + cur.value, 0);\n if (otherValue > 0) {\n topFive.push({ name: \"other\", value: otherValue });\n }\n return topFive;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":279,"value":"mediumPeriods = Object.entries(mediumPeriodsObj).map((e) => ( { [e[0]]: e[1] } ));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"function getVisTwoData(periodName) {\n return topFive(combineObjects(findRelevantPeriods(mediumPeriods, periodName)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"updateDonut = function(period) {\n var visTwoInitialData = getVisTwoData(scrubPeriod);\n var chart = DonutChartUnique(visTwoInitialData, scrubPeriod, {\n name: d => d.name,\n value: d => d.value,\n width,\n height: 500\n })\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"tooltip2 = d3.create(\"div\")\n .attr(\"id\", \"tooltip2\")\n .attr(\"class\", \"tooltip2\")\n .html(`\n

\n \n

\n `);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md `#### Visualization 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"For this visualization, we focus on separating the data so that it's divided into multiple departments, with each department having all of the period related data for each object. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":469,"value":"Then, we create the small-multiples donut charts through each of the departments and a separate SVG for the click to explore section as well. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":490,"value":"For data-cleaning, we utilize a similar approach from Vis 2 and clean out the data by removing all of the null objects with no period-related data. This leaves us with a number of empty departments, which is why we clean that out. After doing so, we work through a lot of data mutations in order to get our final desired dataset, represented by \"departmentArray\". This stores an array of each department object that has an array where the first element is the department name and the second element is an object where each element has the period as the key and the number of objects for that period as the value. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":494,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":282,"value":"function cleanMapVis3 (map) {\n for (var department in map) {\n var total = 0;\n for (var period in map[department]) {\n if (map[department][period] < 10) {\n delete map[department][period]\n }\n }\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"cleanedVisThreeData = removeNulls(getVisData(objectsData, 'Department', 'Period'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"departmentPeriods = cleanMapVis3(createMap(cleanedVisThreeData, \"Department\", 'Period'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"departmentArray = {\n var holder = Object.entries(departmentPeriods)\n holder.splice(4,1); \n return holder\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"periods = getUnique(cleanedVisThreeData, 'Period')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"function convertDepartment (data){\n var output = []; \n var empty = []; \n for(const [key, value] of Object.entries(data)) {\n output.push({period: key, count: value, periodsArray: empty}); \n }\n output = output.sort((p1, p2) => p2.count - p1.count)\n output = output.splice(0,15)\n var periodsArray = []\n \n output.forEach((current) => periodsArray.push(current.period))\n output.forEach((current) => current.periodsArray = periodsArray)\n \n return output; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"convertDepartment(departmentArray[0][1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"dimensions = {\n const margin = { top: 10, bottom: 10, right: 10, left: 10 };\n const visWidth = vis3width - margin.left - margin.right;\n const visHeight = 500 - margin.top - margin.bottom;\n \n return { margin, visWidth, visHeight };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"vis3width = 800\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"numberOfCols = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"numberOfRows = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"colScale = d3.scaleBand()\n .domain(d3.range(numberOfCols))\n .range([0, dimensions.visWidth])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"rowScale = d3.scaleBand()\n .domain(d3.range(numberOfRows))\n .range([0, dimensions.visHeight])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"md `#### Visualization 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"For the fourth visualization, we take the objects data and group them into each department. Then, we take that dataset and mutate it so that we get an array of objects with the departments as one field and the count as another. Then, we feed it into a bar chart that allows us to compare the department sizes. \n\nThis data-cleaning process was far more straight-forward compared to the other visualizations we were performing, so there isn't much to be said here. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":292,"value":"departmentCount = d3.group(objectsData, object => object.Department)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"departmentEntries = Array.from(departmentCount, function (department) {\n return {department: department[0], size: department[1].length}; \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"\n\n\n\n\n\n\n

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":300,"value":"xScale = d3.scaleBand()\n .domain(departmentEntries.map(d => d.department))\n .range([0, 480])\n .padding(0.1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(departmentEntries, d => d.size)]) // d3.max returns the maximum population value here\n .range([210, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"colorScale = d3.scaleOrdinal().range(d3.schemeSet3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"spacing = 20; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"margin = ({top: 40, right: 20, bottom: 200, left: 100}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"svgWidth = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"svgHeight = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"width4 = svgWidth - margin.left - margin.right ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"height4 = svgHeight - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"Sources:\nhttps://www.metmuseum.org/about-the-met","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md `#### Visualization 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"Inspiration for the first visualization was drawn from https://observablehq.com/@toltman/aiddata-world-map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"md `#### Visualization 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"Inspiration for the second visualization was drawn from https://observablehq.com/@d3/donut-chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md `#### Visualization 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"Inspiration for the third visualization was drawn from https://observablehq.com/@d3/donut-chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"md `#### Visualization 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Inspiration for the fourth visualization was drawn from https://d3-graph-gallery.com/barplot.html.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"