31:T7d5,{ let g = d3.select(chart).append("g") g .attr("width", width - (margin.left + margin.right)) .attr("height", height - (margin.top + margin.bottom)) .attr('id', 'vis') .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .append('rect') .attr("width", width - (margin.left + margin.right)) .attr("height", height - (margin.top + margin.bottom)) .attr('fill', 'none') //.attr('fill-opacity', 0.1) // colorLegend let colorLegend = d3legend.legendColor(colorScale) .labelFormat(d3.format(".0f")) .scale(colorScale) .shape("path", d3.symbol().type(d3.symbolCircle).size(150)()) .shapePadding(5) .shapeWidth(50) .shapeHeight(20) .labelOffset(12) .title('Avg Amplitude') .titleWidth(100); d3.select(chart).append("g") .attr('font-family','Roboto') .attr('font-size', 14) .attr("transform", "translate(" + (width - margin.right+12) + "," + (height/4) + ")") .call(colorLegend); // size Legend var sizeLegend = d3legend.legendSize() .scale(rScale) .title('Bandwidth') .shape('circle') .shapePadding(15) //.shapeRadius(15) .labelOffset(20) .labelFormat(d3.format(".3s")) .orient('vertical'); d3.select(chart).append("g") .attr('font-family','Roboto') .attr('font-size', 14) .attr('fill-opacity', 0.6) .attr("transform", "translate(" + (width - margin.right+12) + "," + (height/2 + 24) + ")") .call(sizeLegend); // tooltip d3 .select('body') .append('div') .attr('id', 'tooltip') .attr('style', 'border: none') .style('border-radius', '10px') .style('box-shadow', '4px 4px 5px lightgrey') .style('background', 'white') .style("position", "absolute") .style("z-index", "10") .style('font-size', '14') .style('font-family', 'Roboto') .style('padding', '10px 10px 10px 10px') .style('opacity', 0); setScale(initialSlice) initAxis() return md`Initialization` }32:T914,function update (data){ var t = d3.transition() .duration(500) .ease(d3.easeLinear); // update the circles var us = d3.select('#vis').selectAll("circle") .data(data) var div = d3.select('#tooltip') us.enter() .append("circle") // Uses the enter().append() method .attr("cx", function(d, i) { return xScale(d.Frequency) }) .attr("cy", function(d) { return yScale(d.Date) }) // simple tootip is too small //.append('title') // .text(d => formatTime(d.Date) + "s , " + d3.format(".3s")(d.Frequency) + 'Hz' ) .style('cursor', 'crosshair') .on('mouseover', d => { div .transition() .duration(200) .style('opacity', 0.9); div .html('' + '' + '' + '' + '' + '' + '' + '

time	' + formatTime(d.Date) + '	s
freq	' + d3.format(".3s")(d.Frequency) + '	Hz
max amp	' + d.MaxAmplitude + '	dB
avg amp	' + d.AvgAmplitude + '	dB
min amp	' + d.MinAmplitude + '	dB
max bw	' + d3.format(".3s")(d.MaxBandwidth) + '	Hz
avg bw	' + d3.format(".3s")(d.Bandwidth) + '	Hz
min bw	' + d3.format(".3s")(d.MinBandwidth) + '	Hz

' ) .style('left', d3.event.pageX + 18 + 'px') .style('top', d3.event.pageY - 28 + 'px'); }) .on("mousemove", d => { div .style("left", (d3.event.pageX+18) + "px") .style("top", (d3.event.pageY-28) + "px"); }) .on('mouseout', () => { div .transition() .duration(500) .style('opacity', 0); }) .transition(t) .attr("cy", function(d) { return yScale(d.Date) }) .attr("r", function(d) { return rScale(d.Bandwidth) }) .attr("fill", (d) => colorScale(d.AvgAmplitude)) .attr('fill-opacity', 0.2) us .transition(t) .attr("cy", function(d) { return yScale(d.Date) }) .attr("r", function(d) { return rScale(d.Bandwidth) }) .attr("fill", (d) => colorScale(d.AvgAmplitude)) us.exit() .remove(); updateAxis() }33:[{"id":"678fabb044177b6c0b6002616a5d719257fa3bab9755771271334f061eabba64798280d8de4f3580083fb0fd21e05676759379fc6f253786af765f2306c8abfd","href":"https://static.observableusercontent.com/files/678fabb044177b6c0b6002616a5d719257fa3bab9755771271334f061eabba64798280d8de4f3580083fb0fd21e05676759379fc6f253786af765f2306c8abfd","name":"example_data2.csv","type":"text/csv","lastModified":1587258672730.967,"size":1414971}] 2f:{"title":"RF Energy Scatterplot","cells":[{"id":0,"value":"md`# RF Energy Scatterplot\nTen minutes of radio frequency energy data from an RF sensor on Mt. Everest on 12/31/2012.\n\nDrag the datawidth slider to see more of the data; hover for details.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"chart = d3.select(DOM.svg(width, height))\n .attr('style', 'border: 1px solid #f0f0f0')\n .node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof start = slider({\n min: 0, \n max: 9999-100, \n step: 1, \n value: 100, \n title: \"start\", \n description: \"offsets into data array\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof datawidth = slider({\n min: 2, \n max: 9999-100, \n step: 1, \n value: 2000, \n title: \"datawidth\", \n description: \"number of data array element to show at once\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"md`\n- Axes labels\n- Updating scales\n- An updating time scale with milli-seconds\n- Color and size legends\n- Div-based tooltip\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"csvdata = d3.csvParse(await FileAttachment(\"example_data2.csv\").text())\n\n.map(d => ({\n Frequency: +d['frequency'],\n Bandwidth: +d['bandwidth'],\n Intercepts: +d['intercepts'],\n Occupancy: +d['occupancy'],\n AvgAmplitude: +d.avgamplitude,\n MinAmplitude: +d.minamplitude,\n MaxAmplitude: +d.maxamplitude,\n MinBandwidth: +d.minbandwidth,\n MaxBandwidth: +d.maxbandwidth,\n Latitude: +d.latitude,\n Longitude: +d.longitude,\n Date: parseTime(d['firstintercept'])\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"initialSlice = csvdata.slice(0,100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"subset = csvdata.slice(start, start+datawidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"{\n setScale(subset)\n update(subset)\n \n return md`Update when subset changes`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"colorScale = {\n const max = d3.max(csvdata, d => d.AvgAmplitude);\n const min = d3.min(csvdata, d => d.AvgAmplitude);\n return d3.scaleSequential(d3.interpolateViridis).domain([min,max]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"rScale = d3.scaleSqrt()\n .domain(d3.extent(csvdata, d => d.Bandwidth))\n .range([2, 18])","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"function initAxis() {\n let vis = d3.select(chart)\n vis.append(\"g\")\n .attr(\"id\", \"xaxis\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + (height - margin.bottom) + \")\")\n .call(xAxisCall)\n \n // x axis label\n vis.append(\"text\") \n .attr(\"transform\",\n \"translate(\" + (width/2) + \" ,\" + \n (height - margin.bottom + margin.top + 30) + \")\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Frequency (Hz)\")\n .attr('font-family', 'Roboto');\n\n vis.append(\"g\")\n .attr(\"id\", \"yaxis\")\n .attr(\"transform\", \"translate(\" + [margin.left, margin.top] + \")\")\n .call(yAxisCall)\n \n // y axis label\n vis.append(\"text\") \n //.attr('transform', 'rotate(-90)')\n .attr(\"transform\", \"translate(\" + [margin.left-120, height/2] + \")\")\n //.attr(\"x\", margin.left - 30)\n // .attr(\"y\",(height / 2))\n .text(\"Time\")\n\n .attr('font-family', 'Roboto')\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"formatTime =\n //d3.timeFormat(\"%H:%M:%S.%L\") // use %L for milliseconds\n d3.timeFormat(\"%H:%M:%S\") ","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"parseTime = d3.timeParse(\"%Y-%m-%d %H:%M:%S.%f+00\") // use %f for microsconds","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"function setScale(data){ \n let rgx = d3.extent(data, d => d.Frequency).reduce((a,b) => b-a)*0.1;\n xScale.domain(\n [\n 0, //d3.min(data, d => d.Frequency)-rgx,\n d3.max(data, d => d.Frequency)+rgx\n ]\n ).nice();\n //xScale.range([margin.left, width-(margin.right+margin.left)])\n xAxisCall.scale(xScale)\n\n //yScale.domain(d3.extent(data, d => d.Date))\n \n let rgy = d3.extent(data, d => d.Date).reduce((a,b) => b-a)*0.01;\n yScale.domain(\n [\n d3.min(data, d => d3.timeMillisecond.offset(d.Date, -rgy)),\n d3.max(data, d => d3.timeMillisecond.offset(d.Date, +rgy))\n ]\n ).nice();\n \n yAxisCall.scale(yScale)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"xAxisCall = d3.axisBottom().tickFormat(d3.format(\".3s\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"yAxisCall = d3.axisLeft().tickFormat(formatTime)","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"xScale = d3.scaleLinear()\n //.domain(d3.extent(initialSlice, d => d.Frequency))\n .range([0, width - (margin.right+margin.left)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"yScale = d3.scaleTime()\n //.domain([d3.min(data, d => d.MinBandwidth), d3.max(data, d => d.MaxBandwidth)])\n //.domain([d3.extent(initialSlice, d => d.Date)])\n //.range([margin.top, height - margin.bottom])\n .range([margin.bottom, height - (margin.bottom+margin.top)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"function updateAxis(){\n let t = d3.transition()\n .duration(500)\n\n d3.select(\"#xaxis\")\n .transition(t)\n .call(xAxisCall)\n\n d3.select(\"#yaxis\")\n .transition(t)\n .call(yAxisCall)\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"margin = ({\n top: 10,\n bottom: 65,\n left: 130,\n right: 150\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"d3legend = require('d3-svg-legend@2.25.6/indexRollup.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}