2b:null 2c:["$","title",null,{"children":"Final Project | NIU ReDAV | Observable"}] 31:T695,chart = { const width = 750; const height = 550; const dataArray = Object.entries(bubble).map(([name, value]) => ({ name, value })); function pack(data) { return d3.pack() .size([width - 2, height - 2]) .padding(3) (d3.hierarchy({children: data}) .sum(d => d.value))} const minValue = Math.min(...yesValuesArray); const maxValue = Math.max(...yesValuesArray); var color = d3.scaleQuantize() .domain([minValue, maxValue]) .range(d3.schemeReds[3]); const root = pack(bubbleData); var svg = d3 .create("svg") .attr("width", width) .attr("height", height) const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); leaf.append("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("r", d => d.r) //.attr("fill-opacity", 0.7) .attr("fill", function (d) { var result = bubbleData1.get(d.data.name).get("Yes") || 0; return color(result); }) .append("title") .html((d) => { var yes = bubbleData1.get(d.data.name).get("Yes"); return `${d.data.name}\nInfraction Count: ${d.data.value}\nSerious Injuries: ${yes}` }); leaf.append("text") .attr("dy", ".3em") .style("text-anchor", "middle") .style("font", "10px sans-serif") .style("pointer-events", "none") .text(function(d) { return d.data.name.substring(0, d.r / 3); }); leaf.append("text") .attr("dy", ".5em") .attr("transform", d => `translate(-10, ${d.r/10})`) .attr("font-size", d => d.r / 10) .text(d => d.data.value); return svg.node(); }32:T505,1. Utilizing a donut chart, one can easily discern the annual variations in the number of infractions over the years. The size of each arc corresponds to the magnitude of infractions recorded in each respective year. 2. By analyzing a New Mexico state map, spatial trends associated with infractions become apparent. Notably, the top-left counties exhibit the highest concentration of recorded infractions, providing valuable insights into regional patterns. 3. A stacked bar chart effectively illustrates trends in infractions across different school grades. Noteworthy findings reveal an increasing trend in infractions up to 8th grade, followed by a subsequent decline. This visualization offers insights into the correlation between school grades and infraction occurrences. 4. Leveraging a bubble chart, one can swiftly identify infraction types with higher incidences of serious injuries. Additionally, this chart allows for the immediate recognition of the infraction categories associated with the highest overall number of recorded infractions. 5. By looking at a line chart, you can easily see how the number of infractions has changed over the years. This type of chart helps us understand the trends and notice any unusual patterns or differences in the data over time.33:Ta2b,function pie_chart(){ const width = 500; const height = 400; var svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("id", "pie"); const years_basedStack = d3.rollup(data, v => v.length, d => d["Discipline Infraction Date"].getFullYear()); const yearsObject = Object.fromEntries(years_basedStack); const color = d3.scaleOrdinal(Object.keys(yearsObject),d3.schemeTableau10); const g = svg.append('g').attr("id", "donutChart") .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')') const pie = d3.pie() .value((d) => d[1]) .sort(null) const arc = d3.arc() .innerRadius(110) .outerRadius(180) const part = g.selectAll('path') .data(pie(Object.entries(yearsObject))) .enter() .append('g') .on("mouseover.highlight", function(d) { d3.select(this) .raise() .style("stroke", "black") .style("stroke-width", 2); }) .on("mouseout.highlight", function(d) { d3.select(this).style("stroke", null); // Lower the text back }) .on("click", function (e, d) { d3.select(lineChart_map).select("g#lines").selectAll("path").remove(); d3.select(stack).select("g#race-stack").selectAll("rect").remove(); var filteredData= data_file.filter(item => { const infractionDate = new Date(item['Discipline Infraction Date']); return infractionDate.getFullYear() === parseInt(d.data[0], 10); }); var lineData = line_chart(filteredData); console.log("Clicked!", d.data[0]); var lineDiv = document.getElementById("lineChart"); lineDiv.innerHTML = ''; var newLine = line_chart_main(lineData); lineDiv.appendChild(newLine); var stackDiv = document.getElementById("stack"); stackDiv.innerHTML = ''; var newStack = stack_bar(filteredData); stackDiv.appendChild(newStack); var segDiv = document.getElementById("segment"); segDiv.innerHTML = ''; segDiv.textContent = 'Selected Year: ' + d.data[0]; }); part.append('path') .attr('d', arc) .attr('fill', (d, i) => color(i)) .append("title") .html((d) => { //console.log(d); return `Infraction Count: ${d.data[1]}` }); part.append("text").attr("id", "donutChart") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ") rotate(" + angle(d) + ")"; }) .attr("text-anchor", "middle") .text(function(d) { return d.data[0]; }); function angle(d) { var a = (d.startAngle + d.endAngle) * 90 / Math.PI; return a > 180 ? a + 90 : a - 90; } return svg.node() }34:Tad4,function mapfunc(){ const container = html`

`; container.style.width = '100%'; const width = 500; const height = 400; var svg = d3.select(container).append('svg') .attr('width', width) .attr('height', height); const projection = d3.geoTransverseMercator().rotate([104 + 20 / 60, -31]).fitExtent([[5, 5], [width, height]], polygons); const path = d3.geoPath().projection(projection); const map_main = d3.rollup(data, v => v.length, d => d["District Name"]); const County_list = countylist.map(item => { return { ...item, "County_Name": item["County_Name"] + ", NM" }; }); //console.log("County_list", County_list); var countyCounts = {} County_list.forEach((item) => { const countyName = item.County_Name; countyCounts[countyName] = (countyCounts[countyName] || 0) + 1; }); //console.log("countyCounts", countyCounts); const map_data = County_list.map(item => { const districtName = item["District Name"]; const count = map_main.get(districtName); return { ...item, count }; }); //console.log("map_data", map_data); const countySumMap = new Map(); map_data.forEach(item => { const countyName = item["County_Name"]; const count = item["count"]; if (countySumMap.has(countyName)) { countySumMap.set(countyName, countySumMap.get(countyName) + count); } else { countySumMap.set(countyName, count); } }); const countyValues = Array.from(countySumMap.values()); const minValue = Math.min(...countyValues); const maxValue = Math.max(...countyValues); var color = d3.scaleQuantize() .domain([minValue, maxValue]) .range(d3.schemeBlues[9]); const counties = svg.append("g").attr("id", "state-map"); counties.selectAll("path") .data(polygons.features) .join("path") .attr("d", path) .style('fill',"salmon") .style('fill', (d) => { const county_name = d.properties.name; const intensity = countySumMap.get(county_name); if (intensity == null) return "pink"; return color(intensity); }) .attr('stroke', 'gray') .append("title") .html((d) => { const inten = countyCounts[d.properties.name]; var intensity = countySumMap.get(d.properties.name); return `${d.properties.name}\nInfraction Count: ${intensity}\n School District Count: ${inten}` }); const legendContainer = document.createElement('div'); legendContainer.className = 'legend-container'; legendContainer.style.marginLeft = '70px'; legendContainer.appendChild( Legend( d3.scaleQuantize([minValue, maxValue], d3.schemeBlues[9]), { title: `Intensity of Infractions`, width: 260, tickFormat: (d) => d3.format(".2s")(d), } ) ); container.appendChild(legendContainer); return container; }35:Taac,function stack_bar(stack_data){ const width = 650; const height = 450; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; var race_basedStack = d3.rollup(stack_data, v => v.length, d => d["Student Grade Level"], d => d['Student Race Ethnicity Derived']); var data_forstack = [...race_basedStack.entries()].map(d => ({...Object.fromEntries([...d[1].entries()]), "Total": d3.sum(d[1].values()), "Grade": d[0]})); data_forstack.sort(compareGrades); var cate = Object.keys(Object.values(data_forstack)[0]).sort(); var categories = cate.filter(category => category !== "Total" && category !== "Grade"); var color = d3.scaleOrdinal(categories,d3.schemeTableau10); const container = html`

`; container.style.width = '100%'; var svg = d3.select(container).append('svg') .attr('width', width) .attr('height', height); var x = d3.scaleBand() .domain(data_forstack.map(d => d.Grade)) .range([marginLeft, width - marginRight]) .padding(0.1); var y = d3.scaleLinear() .domain([0, d3.max(data_forstack, d => d.Total)]) .range([height - marginBottom, marginTop]); var stack = d3.stack() .keys(categories); var stackData = stack(data_forstack); //console.log(stackData) const stackbin = svg.append("g").attr("id", "race-stack"); stackbin.selectAll("g") .data(stackData) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d.data.Grade)) .attr("y", d => y(d[1] || 0)) .attr("height", d => Math.max(0, y(d[0] || 0) - y(d[1] || 0))) .attr("width", x.bandwidth()) .transition() .duration(500) .attrTween("y", function(d) { const interpolateY = d3.interpolate(y(d[0] || 0), y(d[1] || 0)); return function(t) { return interpolateY(t); }; }); stackbin.selectAll("rect") .append("title") .text(function(d) { //console.log("Count:", d[1] - d[0]); return "Total Count: " + (d[1] - d[0]); }); var xAxis = d3.axisBottom(x).tickFormat( function(d,i){ //console.log(d); return d; }); var yAxis = d3.axisLeft(y); svg.append("g") .attr("transform", `translate(0, ${height - marginBottom})`) .call(xAxis) .style("text-anchor", "start"); svg.append("g") .attr("transform", `translate(40, 0)`) .call(yAxis) function compareGrades(a, b) { if (typeof a.Grade === 'number' && typeof b.Grade === 'number') { return a.Grade - b.Grade; } else if (typeof a.Grade === 'number') { return -1; } else if (typeof b.Grade === 'number') { return 1; } else { return a.Grade.localeCompare(b.Grade); } } container.appendChild(Swatches(color)); return container; } 36:Tb4f,function line_chart_main(lineData){ const width = 500; const height = 450; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; //var chart_data = line_chart(lineData); var x = d3.scaleUtc() .domain(d3.extent(lineData, d => d.date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear([0, d3.max(lineData, d => d.count)], [height - marginBottom, marginTop]); console.log("x:", x); const line = d3.line() .curve(d3.curveLinear) .defined(d => !isNaN(d.count)) .x(d => x(d.date)) .y(d => y(d.count)); var svg = d3 .create("svg") .attr("width", width) .attr("height", height); const g = svg.append("g").attr("id", "lines"); const area = d3.area() .curve(d3.curveLinear) .defined(function(d) { return d.date >= 0; }) .x(function(d) { return x(d.date); }) .y0(height - marginBottom) .y1(function(d) { return y(d.count); }); g.append("path") .datum(lineData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line); g.append("path") .datum(lineData) .style("fill", `url(#mygrad-${color})`) .style("stroke", "none") .attr("d", area); const tooltip = svg.append("g"); g.on("touchmove mousemove", function(event) { const { date, value } = bisect({ mx: d3.pointer(event, this)[0], x1: x, line_data: lineData }); //console.log({ date, value }); tooltip .attr("transform", `translate(${x(date)},${y(value)})`) .call(callout, `${formatValue(value)}\n${formatDate(date)}`); }); g.on("touchend mouseleave", () => tooltip.call(callout, null)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Total Count")); svg.append("g").attr("id", "lines") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); const lg = svg .append("defs") .append("linearGradient") .attr("id", `mygrad-${color}`) .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "100%"); lg.append("stop") .attr("offset", "0%") .style("stop-color", color) .style("stop-opacity", 0.75); lg.append("stop") .attr("offset", "100%") .style("stop-color", color) .style("stop-opacity", 0.01); return svg.node(); }37:T644,{ const lineChar = d3.select(lineChart_map).select("g#lines").selectAll("path"); const county = d3.select(map).select("g#state-map").selectAll("path"); county.on("mouseover.highlight", function(d) { d3.select(this) .raise() .style("stroke", "black ") .style("stroke-width", 2); }); county.on("mouseout.highlight", function(d) { d3.select(this).style("stroke", null); //d3.select(status).text("highlight: none"); }); county.on("click", function (e, d) { //d3.select(this).raise() .style("fill", "pink"); d3.select(stack).select("g#race-stack").selectAll("rect").remove(); var county_name = d.properties.name; console.log("Clicked!", county_name); var countyName = county_name.split(',')[0]; var newArray = countylist.filter(item => item.County_Name === countyName).map(item => item["District Name"]); var filteredData = data.filter(item => newArray.includes(item["District Name"])); const stackDiv = document.getElementById("stack"); stackDiv.innerHTML = ''; const newStack = stack_bar(filteredData); stackDiv.appendChild(newStack); var lineData = line_chart(filteredData); console.log("filterdata in map", filteredData); //console.log("Clicked!", d.data[0]); var lineDiv = document.getElementById("lineChart"); lineDiv.innerHTML = ''; var newLine = line_chart_main(lineData); lineDiv.appendChild(newLine); var segDiv = document.getElementById("segment"); segDiv.innerHTML = ''; segDiv.textContent = 'Selected County: ' + county_name; }) } 38:T61f,function createResetButton() { const svg = d3.create("svg") .attr("width", 400) .attr("height", 40); const group = svg.append("g").attr("id","reset"); // Rectangle group.append("rect") .attr("x", 210) .attr("y", 10) .attr("width", 80) // Increase the width .attr("height", 20) .style("stroke", "grey") .style("stroke-width", 6) .style("fill", "grey") .on("mouseover.highlight", function(d) { console.log("rect hover"); d3.select(this) .raise() .style("stroke", "red"); }) .on("mouseout.highlight", function(d) { d3.select(this).style("stroke", "grey"); }) .on("click", function (e, d) { d3.select(lineChart_map).select("g#lines").selectAll("path").remove(); d3.select(stack).select("g#race-stack").selectAll("rect").remove(); //var lineData = line_chart(data); var lineDiv = document.getElementById("lineChart"); lineDiv.innerHTML = ''; var newLine = line_chart_main(line_chart_data); lineDiv.appendChild(newLine); var stackDiv = document.getElementById("stack"); stackDiv.innerHTML = ''; var newStack = stack_bar(data); stackDiv.appendChild(newStack); var segDiv = document.getElementById("segment"); segDiv.innerHTML = ''; segDiv.textContent = segment; }); svg.append("text") .attr("id", "resetchart") .attr("x", 251) .attr("y", 22) .style("fill", "white") .style("font-size", "10px") .attr("text-anchor", "middle") .text("Reset Chart"); return svg.node(); }39:[{"id":"7dd073188cdce8127c2481b4d50ac1189398cd0fef60c70f80660b99472626ccbfdadccdd8b66b29eb6d3816a3d52737d4114dce09ae9651b08e5149e389f202","href":"https://static.observableusercontent.com/files/7dd073188cdce8127c2481b4d50ac1189398cd0fef60c70f80660b99472626ccbfdadccdd8b66b29eb6d3816a3d52737d4114dce09ae9651b08e5149e389f202","name":"Districts_counties.csv","type":"text/csv","lastModified":1701325201428.726,"size":5681},{"id":"555f713c5e8de7ee4b19839dacfb603f92b6c03356b4dc57c67d0c5c8907ae52ca4e08ad6d808ee7de154c9857082d080569678e273802670e69710f8afaacfa","href":"https://static.observableusercontent.com/files/555f713c5e8de7ee4b19839dacfb603f92b6c03356b4dc57c67d0c5c8907ae52ca4e08ad6d808ee7de154c9857082d080569678e273802670e69710f8afaacfa","name":"NM_county 1.json","type":"application/json","lastModified":1701325201428.726,"size":50514},{"id":"7e515e779c272930e83b0d9d735036ab08ecc1433a6a85bcf51f4f2a2a796591af4ec276b6f04fefb99d7918746a48aab9d92fc23b99095809301875a7ba92ff","href":"https://static.observableusercontent.com/files/7e515e779c272930e83b0d9d735036ab08ecc1433a6a85bcf51f4f2a2a796591af4ec276b6f04fefb99d7918746a48aab9d92fc23b99095809301875a7ba92ff","name":"NM student infractions 2014-2022.csv","type":"text/csv","lastModified":1701325201428.726,"size":38240146},{"id":"f4adbb068b2760c3a24d949225013a6a616126016702c582cae6367c76814449b2b20e733bbb29674086d50782fe468793f7e37cc787d0be153153e56bbad465","href":"https://static.observableusercontent.com/files/f4adbb068b2760c3a24d949225013a6a616126016702c582cae6367c76814449b2b20e733bbb29674086d50782fe468793f7e37cc787d0be153153e56bbad465","name":"Screenshot 2023-12-09 at 1.37.10 AM.png","type":"image/png","lastModified":1702108386258.612,"size":205955},{"id":"f4adbb068b2760c3a24d949225013a6a616126016702c582cae6367c76814449b2b20e733bbb29674086d50782fe468793f7e37cc787d0be153153e56bbad465","href":"https://static.observableusercontent.com/files/f4adbb068b2760c3a24d949225013a6a616126016702c582cae6367c76814449b2b20e733bbb29674086d50782fe468793f7e37cc787d0be153153e56bbad465","name":"Screenshot 2023-12-09 at 1@1.37.10 AM.png","type":"image/png","lastModified":1702108435796.069,"size":205955}] 2f:{"id":"b382142ff7559bc2","slug":null,"title":"Final Project","thumbnail":"a364c4122c8a7e934bcc3e93a7b1cb2b45a2a9f6eec27afce673153f5e1e2c44","access_level":"public","create_time":"$D2023-11-30T06:20:01.428Z","update_time":"$D2023-12-09T08:36:06.430Z","view_time":null,"first_public_time":"$D2023-12-05T07:52:35.801Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":1555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ec5bad28cc5bd63","login":"mounika-bavisetti","name":"Mounika Bavisetti","avatar_url":"https://avatars-next.observableusercontent.com/d5fdd108956264c862abf8785bd028da0290f700fb9b573fc3dce552634ddec1","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Final Project","cells":[{"id":0,"value":"# Final Project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1480,"value":"New Mexico School Discipline dataset contains all disciplinary incidents reported by school districts in New Mexico state to the state’s Public Education Department. ![Screenshot 2023-12-09 at 1@1.37.10 AM.png](${await FileAttachment(\"Screenshot 2023-12-09 at 1@1.37.10 AM.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1553,"value":"Districts_counties.csv has the school district names and related county names. This dataset is used to create the choropleth map of New Mexico State map to find the intensity of infractions happened across the counties. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1511,"value":"## Tasks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1515,"value":"1.\tFinding out the spatial trends of infractions if any in New Mexico state map.\n2.\tFinding out the trends in the overall infractions happened over the years for a selected county or overall statewide. \n3.\tFind out the pattern and division of the races or type of infraction which were delivered related to a year, county or showing overall count (statewide and cumulating all years).\n4.\tWhat are the most prominent types of infractions in various domains? identifying the infractions that have led to the most severe injuries in various sectors?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"gridContainer = html`\n\n

${pieChart}

${map}

${reset}

${segment}

${stack}

${lineChart_map}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"## Interactions in the above visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1522,"value":"1.\tMy visualization has a colormap of New Mexico state. A tooltip is given to display the name of the county and we can select a particular county. When a user clicks on a county, the stack bar chart and area chart will be refreshed with new data. \n2.\tA donut chart which is segregated by years from 2014 to 2022. User can click on a year and can examine the new stack bar chart, area chart related to the data and colormap of New Mexico in that particular year. \n3.\tThe stacked bar chart will have filter/ drop down on race and discipline infraction. If we select one, the channel of stacked bar would be the corresponding selection. The x axis of the stacked would be grades and the y axis would be the count of infractions. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1532,"value":"### Task 4\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1450,"value":" Legend(\n d3.scaleQuantize([ Math.min(...yesValuesArray), Math.max(...yesValuesArray)], d3.schemeReds[9]),\n {\n title: `Serious Injuries`,\n width: 260,\n tickFormat: (d) => d3.format(\".2s\")(d),\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"### Marks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1536,"value":"1. Paths in the New Mexico state map\n2. Bars in Stacked bar chart\n3. Line in the line chart\n4. Circles in the bubble chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1538,"value":"### Channels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1540,"value":"1. Colors in the New Mexico state map to show the intensity of infractions\n2. Colors in the stacked bar chart that represent the share of different races for each grade.\n3. Colors to show the intensity of serious injuries that happened in each type of infraction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1547,"value":"### Insights from the above visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1550,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":903,"value":"line_chart_data = line_chart(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return ({ mx, x1, line_data}) => {\n const date = x1.invert(mx);\n const index = bisect(line_data, date, 1);\n const a = line_data[index - 1];\n const b = line_data[index];\n if (a && b && a.date && b.date && a.count !== undefined && b.count !== undefined) {\n const value = (date - a.date > b.date - date) ? b.count : a.count;\n return { date, value };\n }\n return null;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"function formatValue(value) {\n return value.toLocaleString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n //day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"stack = stack_bar(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"pieChart = pie_chart()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"map = mapfunc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"lineChart_map = line_chart_main(line_chart_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"reset = createResetButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"segment = \"New Mexico State Discipline Infractions(2014-2022)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"color = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"function line_chart(chartData) {\n const countByMonthAndYear = {};\n\nchartData.forEach(item => {\n const infractionDate = new Date(item['Discipline Infraction Date']);\n const year = infractionDate.getFullYear();\n const month = infractionDate.getMonth() + 1; \n\n \n const key = `${year}-${month.toString().padStart(2, '0')}`;\n\n if (!countByMonthAndYear[key]) {\n countByMonthAndYear[key] = 1;\n } else {\n countByMonthAndYear[key]++;\n }\n});\nconst resultArray = Object.entries(countByMonthAndYear).map(([date, count]) => ({\n date: new Date(date),\n count\n}));\nresultArray.sort((a, b) => a.date - b.date);\n\nreturn resultArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"countylist = FileAttachment(\"Districts_counties.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"polygons = FileAttachment(\"NM_county 1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"data = data_file.filter(item => new Date(item['Discipline Infraction Date']) >= new Date('2014-01-01'));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data_file = FileAttachment(\"NM student infractions 2014-2022.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"measureWidth = {\n const context = document.createElement(\"canvas\").getContext(\"2d\");\n return text => context.measureText(text).width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"bubbleData = Array.from(bubble).map(([name, value]) => ({ name, value }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"bubble = d3.rollup(data, v => v.length, d => d[\"Discipline Infraction\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"bubbleData1 = d3.rollup(data, v => v.length, d => d[\"Discipline Infraction\"], d => d['Serious Injury']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"yesValuesArray = Array.from(bubbleData1.values()) .map(crime => crime.get(\"Yes\")).filter(d => d != undefined);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"dataArr = {\nconst dataArray = {};\nbubbleData1.forEach((innerMap, key) => {\n const yesValue = innerMap.get(\"Yes\") || 0; \n const NoValue = innerMap.get(\"No\") || 0; \n const result = (yesValue*100)/(yesValue + NoValue)\n dataArray[key] = parseFloat(result.toFixed(1));\n});\nreturn dataArray\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"{var race_basedStack = d3.rollup(data, v => v.length, d => d[\"Student Grade Level\"], d => d['Student Race Ethnicity Derived']);\n var data_forstack = [...race_basedStack.entries()].map(d => ({...Object.fromEntries([...d[1].entries()]), \"Total\": d3.sum(d[1].values()), \"Grade\": d[0]}));\n data_forstack.sort(compareGrades);\n var cate = Object.keys(Object.values(data_forstack)[0]).sort();\n var categories = cate.filter(category => category !== \"Total\" && category !== \"Grade\");\n \nvar color = d3.scaleOrdinal(categories,d3.schemeTableau10);\n return categories\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":" function compareGrades(a, b) {\n if (typeof a.Grade === 'number' && typeof b.Grade === 'number') {\n return a.Grade - b.Grade;\n } else if (typeof a.Grade === 'number') {\n return -1; \n } else if (typeof b.Grade === 'number') {\n return 1; \n } else {\n \n return a.Grade.localeCompare(b.Grade);\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"