31:Tfbb,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const keys = data.columns.slice(1); const color = d3.scaleOrdinal() .domain(keys) .range(d3.schemeCategory10); const series = d3.stack().order(d3.stackOrderAscending.text).keys(keys)(data); //scales const x = d3.scaleLinear() .domain(d3.extent(data, d => d.Date)) .range([margin.left, width - margin.right]); const xAxis = g => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x) .tickFormat(d3.format("d")) .tickSizeOuter(0)); const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice() .range([height - margin.bottom,margin.top]); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const area = d3.area() .x(d => x(d.data.Date)) .y0(d => y(d[0])) .y1(d => y(d[1])); //brushing, clips, and legends const clip = svg.append("defs") .append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("width", width ) .attr("height", height ) .attr("x", 0) .attr("y", 0); const brush = d3.brush() .extent([[0,0], [width,height]]) .on("end", updateChart); const areaChart = svg.append('g') .attr("clip-path", "url(#clip)") areaChart .selectAll("mylayers") .data(series) .enter() .append("path") .attr("class", function(d) { return "myArea " + d.key; }) .style("fill", ({key}) => color(key)) .attr("d", area) //add brushing areaChart .append("g") .attr("class", "brush") .call(brush); function updateChart() { const extent = d3.event.selection; const idleTimeout = 350; // If no selection, back to initial coordinate. Otherwise, update X axis domain if(!extent){ if (!idleTimeout) return idleTimeout = setTimeout(350); // This allows to wait a little bit x.domain(d3.extent(data, function(d) { return d.data.Date; })); } else{ x.domain([ x.invert(extent[0]), x.invert(extent[1]) ]); areaChart.select(".brush").call(brush.move, null); // This remove the grey brush area as soon as the selection has been done } // Update axis and area position xAxis.transition().duration(1000).call(d3.axisBottom(x).ticks(5)); areaChart .selectAll("path") .transition().duration(1000) .attr("d", area); } //highlight // What to do when one group is hovered const highlight = function(d){ console.log(d) // reduce opacity of all groups d3.selectAll(".myArea").style("opacity", .1) // expect the one that is hovered d3.select("."+d).style("opacity", 1) } // And when it is not hovered anymore const noHighlight = function(d){ d3.selectAll(".myArea").style("opacity", 1) } // legend const size = 20; svg.selectAll("myrect") .data(keys) .enter() .append("rect") .attr("x", 150) .attr("y", function(d,i){ return 20 + i*(size+5)}) // 100 is where the first dot appears. 25 is the distance between dots .attr("width", size) .attr("height", size) .style("fill", function(d){ return color(d)}) .on("mouseover", highlight) .on("mouseleave", noHighlight); // Add one dot in the legend for each name. svg.selectAll("mylabels") .data(keys) .enter() .append("text") .attr("x", 170 + size*1) .attr("y", function(d,i){ return 25 + i*(size+5) + (size/2);}) // 100 is where the first dot appears. 25 is the distance between dots .style("fill", function(d){ return color(d);}) .text(function(d){ return d;}) .attr("text-anchor", "left") .style("alignment-baseline", "bottom") .on("mouseover", highlight) .on("mouseleave", noHighlight); return svg.node(); } 32:[{"id":"dd61795d38c3d4eea9b3dc8ada0ecff129e080ed04d33f4c7d1f79d2b62608983a1a86c8319885fd0c26e180823c1c004c363bf519ed32137bf2b8447a1671b7","href":"https://static.observableusercontent.com/files/dd61795d38c3d4eea9b3dc8ada0ecff129e080ed04d33f4c7d1f79d2b62608983a1a86c8319885fd0c26e180823c1c004c363bf519ed32137bf2b8447a1671b7","name":"filmlangs_1931_2019.csv","type":"text/csv","lastModified":1590714797288.306,"size":3281}] 2f:{"title":"Indian Cinemas' Babel","cells":[{"id":0,"value":"md`# Indian Cinemas' Babel\n## 1931-2019\n

The first 'sound' films were released in India in 1931. Between April 2018 and March 2019, India produced 2,446 films in 55 languages and dialects.

The x-axis represents years; the last reported year is 2019. The y-axis represents number of films produced each year. Data: Film Federation of India and various publications of Ministry of Information and Broadcasting, Government of India.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n","pinned":false,"hidden":false,"mode":"html"},{"id":6,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"filmlangs_1931_2019.csv\").text(), d3.autoType), {y: \"films\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}