Reusable Scatter plot Activity 8

Reusable Scatter plot Activity 8 // SVG setup const margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // Parse the date / time const parseTime = d3.timeParse('%Y-%m-%d'); // Set the ranges const x = d3.scaleTime().range([0, width]); const y = d3.scaleLinear().range([height, 0]); // Define the area const area = d3 .area() .x(function (d) { return x(d.date); }) .y0(height) .y1(function (d) { return y(d.value); }); // Append the svg object to the body of the page const svg = d3 .select('body') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')', ); // Get the data from the external URL const url = 'https://gist.githubusercontent.com/harikirank/7c8cc7e7bc54060ba7512f54d3a78d32/raw/4cf9c4de72f20fcc528e4846720498f6affe1c4b/departments.csv'; d3.csv(url, function (d) { return { date: parseTime(d.Date), value: +d.Value }; }).then(function (data) { // Scale the range of the data x.domain( d3.extent(data, function (d) { return d.date; }), ); y.domain([ 0, d3.max(data, function (d) { return d.value; }), ]); // Add the area path. svg .append('path') .data([data]) .attr('class', 'area') .attr('d', area) .attr('fill', '#69b3a2'); // Add the X Axis svg .append('g') .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x)); // Add the Y Axis svg.append('g').call(d3.axisLeft(y)); }); })(); //# sourceMappingURL=_virtual_index.js.map

Task 9 2

Hari Kiran