31:Tad4,chart = { const svg = d3.select(DOM.svg(width,height)) .attr("viewBox",[0,0,width,height]) .style("background-color","#eeecda") svg.append("text") .attr("x",width/2) .attr("y",50) .style("text-anchor","middle") .text("Earthquakes: "+year) .style("font-size","2em") .style("font-weight","bold") const map = svg.append("g").attr("class","map") map.append("path") .datum(land) .attr("d",path) .attr("fill","#7770a0") .attr("stroke","indigo") .style("opacity",0.75) const quakes = map.selectAll("quake") .data(filter) .join("circle") .attr("class","quake") .attr("cx",d=>projection([d.Longitude,d.Latitude])[0]) .attr("cy",d=>projection([d.Longitude,d.Latitude])[1]) .attr("r",d=>radius(d.Magnitude)) .attr("fill","indigo") .attr("stroke","orange") .style("opacity",0.75) .transition() .duration(500) .attr("stroke-width",0) .attr("stroke-opacity",0) .transition() .duration(800) .attr("stroke-width",0) .attr("stroke-opacity",0.5) .transition() .duration(1000) .attr("stroke-width",10) .attr("stroke-opacity",0.8) .transition() .duration(1200) .attr("stroke-width",3) .attr("stroke-opacity",1) .ease(d3.easeSin) //.on("end",repeat) svg.append("g") .call(xAxis) svg.append("g") .call(yAxis) svg.append("text") .attr("x",-height+190) .attr("y",22) .text("Magnitude") .style("text-anchor","end") .attr("transform","rotate(-90)") .style("font-size","1.1em") //.style("fill","black") const g = svg.append("g") const bubbles = g.selectAll("circle") .data(filter) .join("circle") .attr("class","bubble") .attr("cx",d=>x(parseTime(d.Date))) .attr("cy",height-margin.bottom) .attr("r",0) .attr("stroke","orange") .attr("stroke-width",3) .style("fill","indigo") .style("opacity",0.75) .transition() .duration(1200) .ease(d3.easeLinear) .attr("cx",d=>x(parseTime(d.Date))) .attr("cy",d=>y(d.Magnitude)) .attr("r",d=>radius(d.Magnitude)) g.selectAll("line") .data(filter) .join("line") .attr("x1",d=>x(parseTime(d.Date))) .attr("y1",d=>height-margin.bottom) .attr("x2",d=>x(parseTime(d.Date))) .attr("y2",height-margin.bottom) .attr("fill","none") .style("stroke","black") .transition() .duration(1200) .ease(d3.easeLinear) .attr("y1",d=>y(d.Magnitude)) return svg.node() }32:[{"id":"b2896732353d3c4292a82cff2335cc93f29bdf765080ad00892ecaad960da2c715460151db9a17e86812df136f01a868db4bbecac2b36036be448d4c67e4538e","href":"https://static.observableusercontent.com/files/b2896732353d3c4292a82cff2335cc93f29bdf765080ad00892ecaad960da2c715460151db9a17e86812df136f01a868db4bbecac2b36036be448d4c67e4538e","name":"50m.json","type":"application/json","lastModified":1619127806877.143,"size":747178},{"id":"c2e7cfd04cfc338fc7834750ee1045808d188e3b8c9d4f28e244ab692f85d761b92510f9f7dfa374f06d707ba08872169aca420c9e05a8cda9dcb48feb465868","href":"https://static.observableusercontent.com/files/c2e7cfd04cfc338fc7834750ee1045808d188e3b8c9d4f28e244ab692f85d761b92510f9f7dfa374f06d707ba08872169aca420c9e05a8cda9dcb48feb465868","name":"quakes.csv","type":"text/csv","lastModified":1619176189048.982,"size":1280269}] 2f:{"title":"Earthquakes (1900-2014)","cells":[{"id":0,"value":"html`

Earthquakes (1900-2014)

Week 4:Timeseries. Day 22:Animation.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof year = select({\n title: \"Year\",\n description: \"Choose Year\",\n options: d3.range(1900,2015)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"html`

Data Credit:\nTableau\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"function repeat() {\n (function pulse() {\n d3.selectAll(\".quake\").transition()\n .duration(100)\n .attr(\"stroke-width\",0)\n .attr(\"stroke-opacity\",0)\n .transition()\n .duration(500)\n .attr(\"stroke-width\",0)\n .attr(\"stroke-opacity\",0.5)\n .transition()\n .duration(600)\n .attr(\"stroke-width\",10)\n .attr(\"stroke-opacity\",0.8)\n .transition()\n .duration(800)\n .attr(\"stroke-width\",3)\n .attr(\"stroke-opacity\",1)\n .ease(d3.easeSin)\n .on(\"end\",pulse)\n })()\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"radius = d3.scaleSqrt()\n .domain(d3.extent(filter,d=>d.Magnitude))\n .range([5,15])","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"yAxis = g => g.attr(\"transform\",`translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.selectAll(\".tick line\")\n .clone()\n .style(\"stroke\",\"gray\")\n .attr(\"stroke-opacity\",0.4)\n .attr(\"x2\",width-margin.right-50))\n .call(g=>g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"y = d3.scaleLinear()\n .domain(d3.extent(filter,d=>d.Magnitude))\n .range([height-margin.bottom,margin.bubbleTop])","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"xAxis = g => g.attr(\"transform\",`translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"filter = data.filter(d=>d.Year==year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"x = d3.scaleTime()\n .domain(d3.extent(filter,d=>parseTime(d.Date)))\n .range([margin.left,width-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"parseTime = d3.timeParse(\"%d-%m-%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"path = d3.geoPath()\n .projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"projection = d3.geoNaturalEarth1()\n .fitExtent([[0,margin.mapTop],[width,700]],{type:\"Sphere\"})\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 1500","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({left:60,right:50,top:50,bottom:50,mapTop:80, bubbleTop:730})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"land = topojson.feature(world,world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"world = FileAttachment('50m.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment('quakes.csv').csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@6','d3-geo-projection')","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}