Dataviz

.gitignore

@@ -1,3 +1 @@
-.venv
-.DS_Store
-.ipynb_checkpoints/
+boston_311_2023_raw.csv

answers/index.html

@@ -13,6 +13,12 @@
         <h1>311 Calls in Boston in 2023</h1>
         <p>Broken down by the top 10 types</p>
         <div id="chart_311" class="chart"></div>
+        <div id="checkboxes">
+            <label><input type="checkbox" value="Reason1" checked> Reason 1</label>
+            <label><input type="checkbox" value="Reason2" checked> Reason 2</label>
+            <label><input type="checkbox" value="Reason3" checked> Reason 3</label>
+            <!-- Add more checkboxes as needed -->
+        </div>
     </header>
     <!-- Your chart will be appended here -->
     <script src="https://d3js.org/d3.v7.min.js"></script>

answers/script.js

@@ -67,4 +67,64 @@ d3.csv('311_boston_data.csv').then(data => {
         .attr('text-anchor', 'left')
         .style('font-size', '12px')
         .text('Chart created by Aarushi Sahejpal. Data source: Boston.gov');
+
+    // Add button to show extended chart
+    d3.select('body')
+        .append('button')
+        .text('Show Extended Chart')
+        .on('click', () => {
+            // Remove existing chart
+            d3.select('#chart_311').selectAll('*').remove();
+
+            // Set up SVG container for extended chart
+            const extendedSvg = d3.select('#chart_311')
+                .append('svg')
+                .attr('width', svgWidth)
+                .attr('height', svgHeight)
+                .append('g')
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            // Create scales for extended chart
+            const extendedYScale = d3.scaleBand()
+                .domain(data.map(d => d.reason))
+                .range([0, height])
+                .padding(0.2);
+
+            const extendedXScale = d3.scaleLinear()
+                .domain([0, d3.max(data, d => d.Count)])
+                .range([0, width]);
+
+            // Create bars for extended chart
+            extendedSvg.selectAll('rect')
+                .data(data)
+                .enter()
+                .append('rect')
+                .attr('x', 0)
+                .attr('y', d => extendedYScale(d.reason))
+                .attr('width', d => extendedXScale(d.Count))
+                .attr('height', extendedYScale.bandwidth())
+                .attr('fill', 'blue')
+                .on('mouseover', function (event, d) {
+                    d3.select(this).attr('fill', 'orange'); // Change color on hover
+                })
+                .on('mouseout', function () {
+                    d3.select(this).attr('fill', 'blue'); // Revert color on mouseout
+                });
+
+            // Add axes for extended chart
+            extendedSvg.append('g')
+                .call(d3.axisLeft(extendedYScale));
+
+            extendedSvg.append('g')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(extendedXScale));
+
+            // Add attribution line at the bottom for extended chart
+            extendedSvg.append('text')
+                .attr('x', width / 2)
+                .attr('y', height + margin.top + 20) // Adjust the y-coordinate for proper placement
+                .attr('text-anchor', 'left')
+                .style('font-size', '12px')
+                .text('Chart created by Aarushi Sahejpal. Data source: Boston.gov');
+        });
 });

boston_311_2023_by_reason.csv

@@ -0,0 +1,45 @@
+"reason","Count"
+"Abandoned Bicycle",1318
+"Administrative & General Requests",2025
+"Air Pollution Control",35
+"Alert Boston",3
+"Animal Issues",4155
+"Billing",6
+"Boston Bikes",64
+"Bridge Maintenance",8
+"Building",5209
+"Catchbasin",621
+"Cemetery",29
+"Code Enforcement",31812
+"Employee & General Comments",2166
+"Enforcement & Abandoned Vehicles",61541
+"Environmental Services",4416
+"Fire Hydrant",205
+"General Request",196
+"Generic Noise Disturbance",109
+"Graffiti",1839
+"Health",1349
+"Highway Maintenance",25096
+"Housing",7590
+"MBTA",1
+"Massport",8
+"Needle Program",7413
+"Neighborhood Services Issues",28
+"Noise Disturbance",832
+"Notification",607
+"Office of The Parking Clerk",18
+"Operations",283
+"Park Maintenance & Safety",7932
+"Parking Complaints",19
+"Pothole",85
+"Programs",6
+"Recycling",9955
+"Sanitation",59389
+"Sidewalk Cover / Manhole",291
+"Signs & Signals",11209
+"Street Cleaning",45659
+"Street Lights",8499
+"Traffic Management & Engineering",751
+"Trees",10390
+"Valet",7
+"Weights and Measures",52