30:T746,chart = { let svg = d3.select(this) if (!svg.size()) { // Create SVG first time only and reuse it later for animations svg = d3.select(DOM.svg(width, height)) svg.append('g') } const g = svg.select('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) const xAxisG = g.selectAll('.axis-x').data([null]) xAxisG.enter().append('g') .attr('class', 'axis-x') .merge(xAxisG) .attr('transform', `translate(0, ${height - margin.bottom - margin.top})`) .transition().duration(duration) .call(xAxis) .selectAll('text') .attr('color', d => xDimension === 'Category' && isColored ? colorScale(d) : axisColor) const yAxisG = g.selectAll('.axis-y').data([null]) yAxisG.enter().append('g') .attr('class', 'axis-y') .merge(yAxisG) .transition().duration(duration) .call(yAxis) .selectAll('text') .attr('color', axisColor) const dots = g.selectAll('.dot').data(data, keyValue) dots.enter().append('circle') .attr('class', 'dot') .attr('opacity', 0) .attr('cx', d => xScale(xValue(d))) .attr('cy', d => yScale(yValue(d))) .on('click', d => mutable selectedDot = areDotsEqual(mutable selectedDot, d) ? null : d) .merge(dots) // highlight selected dot before animations to make it more responsive .classed('isSelected', d => areDotsEqual(selectedDot, d)) .transition().duration(duration) .attr('r', radius) .attr('opacity', 1) // by specifiyng `color` only once here we can refer to it as `currentColor` // in CSS to style `fill` and `stroke` .attr('color', d => isColored ? colorScale(categoryValue(d)) : defaultColor) .attr('cx', d => xScale(xValue(d))) .attr('cy', d => yScale(yValue(d))) dots.exit() .transition().duration(duration) .attr('opacity', 0) .remove() return svg.node(); }31:Tc34,csvData = `\ Id,Date,Category,Xvalue,Yvalue 10000,Jan 1 2018,aa,92,11 10001,Jan 1 2018,bb,38,90 10002,Jan 1 2018,cc,44,97 10003,Jan 1 2018,dd,75,76 10004,Jan 1 2018,ee,51,21 10005,Jan 1 2018,ff,16,80 10006,Jan 1 2018,gg,62,1 10007,Jan 1 2018,hh,63,53 10008,Jan 1 2018,ii,99,96 10009,Jan 1 2018,jj,10,2 10010,Jan 1 2018,aa,85,86 10011,Jan 1 2018,bb,1,45 10012,Jan 1 2018,cc,42,90 10013,Jan 1 2018,dd,56,74 10014,Jan 1 2018,ee,92,31 10015,Jan 1 2018,ff,92,7 10016,Jan 1 2018,gg,85,60 10017,Jan 1 2018,hh,85,13 10018,Jan 1 2018,ii,39,88 10019,Jan 1 2018,jj,68,21 10020,Jan 1 2018,aa,90,34 10021,Jan 1 2018,bb,52,47 10022,Jan 1 2018,cc,7,40 10023,Jan 1 2018,dd,33,56 10024,Jan 1 2018,ee,33,69 10025,Jan 1 2018,ff,66,68 10026,Jan 1 2018,gg,100,29 10027,Jan 1 2018,hh,82,15 10028,Jan 1 2018,ii,70,4 10029,Jan 1 2018,jj,95,78 10030,Jan 1 2018,aa,33,99 10031,Jan 1 2018,bb,67,7 10032,Jan 1 2018,cc,57,27 10033,Jan 1 2018,dd,55,96 10034,Jan 1 2018,ee,75,57 10035,Jan 1 2018,ff,60,91 10036,Jan 1 2018,gg,43,27 10037,Jan 1 2018,hh,81,17 10038,Jan 1 2018,ii,20,56 10039,Jan 1 2018,jj,10,70 10040,Jan 1 2018,aa,80,94 10041,Jan 1 2018,bb,97,27 10000,Feb 1 2018,aa,19,41 10001,Feb 1 2018,bb,39,14 10002,Feb 1 2018,cc,38,21 10003,Feb 1 2018,dd,42,44 10004,Feb 1 2018,ee,23,28 10005,Feb 1 2018,ff,45,33 10006,Feb 1 2018,gg,35,19 10007,Feb 1 2018,hh,14,48 10008,Feb 1 2018,ii,41,36 10009,Feb 1 2018,jj,12,24 10010,Feb 1 2018,aa,44,50 10011,Feb 1 2018,bb,44,47 10012,Feb 1 2018,cc,19,15 10013,Feb 1 2018,dd,24,33 10014,Feb 1 2018,ee,46,30 10019,Feb 1 2018,jj,31,6 10020,Feb 1 2018,aa,33,24 10021,Feb 1 2018,bb,34,41 10022,Feb 1 2018,cc,18,39 10023,Feb 1 2018,dd,46,37 10024,Feb 1 2018,ee,18,28 10025,Feb 1 2018,ff,15,1 10026,Feb 1 2018,gg,33,28 10027,Feb 1 2018,hh,46,5 10028,Feb 1 2018,ii,42,8 10029,Feb 1 2018,jj,8,49 10030,Feb 1 2018,aa,15,34 10031,Feb 1 2018,bb,5,2 10032,Feb 1 2018,cc,41,24 10033,Feb 1 2018,dd,24,46 10034,Feb 1 2018,ee,11,40 10035,Feb 1 2018,ff,12,42 10036,Feb 1 2018,gg,41,13 10037,Feb 1 2018,hh,8,49 10038,Feb 1 2018,ii,32,29 10000,Mar 1 2018,aa,32,16 10001,Mar 1 2018,bb,21,58 10002,Mar 1 2018,cc,17,28 10003,Mar 1 2018,dd,61,26 10004,Mar 1 2018,ee,67,56 10005,Mar 1 2018,ff,73,56 10006,Mar 1 2018,gg,41,65 10007,Mar 1 2018,hh,67,19 10008,Mar 1 2018,ii,70,50 10009,Mar 1 2018,jj,46,38 10010,Mar 1 2018,aa,72,34 10011,Mar 1 2018,bb,52,19 10012,Mar 1 2018,cc,11,68 10013,Mar 1 2018,dd,75,70 10014,Mar 1 2018,ee,20,36 10015,Mar 1 2018,ff,50,66 10016,Mar 1 2018,gg,70,57 10017,Mar 1 2018,hh,21,80 10018,Mar 1 2018,ii,45,15 10019,Mar 1 2018,jj,75,71 10020,Mar 1 2018,aa,70,71 10021,Mar 1 2018,bb,74,51 10022,Mar 1 2018,cc,18,80 10023,Mar 1 2018,dd,10,75 10024,Mar 1 2018,ee,53,43 10025,Mar 1 2018,ff,43,22 10026,Mar 1 2018,gg,53,12 10027,Mar 1 2018,hh,11,45 10028,Mar 1 2018,ii,48,53 10029,Mar 1 2018,jj,48,44 10030,Mar 1 2018,aa,50,32 10031,Mar 1 2018,bb,25,39 10032,Mar 1 2018,cc,78,79 10033,Mar 1 2018,dd,46,51 10034,Mar 1 2018,ee,28,33 10035,Mar 1 2018,ff,46,12 10036,Mar 1 2018,gg,27,24 10037,Mar 1 2018,hh,70,54 10038,Mar 1 2018,ii,74,78 10039,Mar 1 2018,jj,58,52 10040,Mar 1 2018,aa,59,14 10041,Mar 1 2018,bb,53,34`32:[] 2e:{"title":"D3 Test Project","cells":[{"id":0,"value":"md`# D3 Test Project`","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"viewof date = {\n const format = d3.timeFormat('%B %Y')\n const uniqDates = _.uniqBy(parsedData.map(timeValue), d => d.getTime())\n const options = uniqDates.map(d => ({\n label: format(d),\n value: d\n }))\n return radio({ options, value: options[0].value })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"viewof xDimension = {\n const options = [{\n label: 'X Value',\n value: 'Xvalue'\n }, {\n label: 'Category',\n value: 'Category'\n }]\n return radio({ options, value: options[0].value })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"viewof isColored = checkbox({\n options: [{ value: 'on', label: '🌈 Is Colored Categories' }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"legend = {\n const categoryColor = c => isColored ? colorScale(c) : defaultColor\n const renderCategory = category => html`

\n \n \n ${category}\n \n

`\n \n return html`

\n ${domain.category.map(renderCategory)}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"mutable selectedDot = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"domain = ({\n x: d3.extent(data.map(xValue)),\n y: d3.extent(data.map(yValue)),\n category: _.uniq(data.map(categoryValue))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"xScale = {\n const scales = {\n 'Xvalue': d3.scaleLinear()\n .domain(domain.x)\n .nice(),\n 'Category': d3.scalePoint()\n .domain(domain.category)\n .padding(0.5)\n }\n \n return scales[xDimension]\n .range([0, width - margin.left - margin.right])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"yScale = d3.scaleLinear()\n .domain(domain.y)\n .range([height - margin.top - margin.bottom, 0])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"xAxis = d3.axisBottom(xScale)\n .tickSize(-yScale(0)) // render vertical grid lines\n .tickPadding(radius + 5) // prevent overlapping labels and dots","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(-(width - margin.left - margin.right)) // horizontal grid line\n .tickPadding(radius + 5) // prevent overlapping labels and dots","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"keyValue = d => d['Id']","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"xValue = d => d[xDimension]","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"yValue = d => d['Yvalue']","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"categoryValue = d => d['Category']","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"timeValue = d => d['Date']","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"areDotsEqual = (d1, d2) => (d1 && keyValue(d1)) === (d2 && keyValue(d2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"viewof defaultColor = color(\"#419BF9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"axisColor = d3.color(defaultColor).darker(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"margin = ({top: 20, bottom: 20, left: 25, right: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"radius = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"duration = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"import { input, color, checkbox, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"data = filteredData","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"filteredData = parsedData.filter(d => '' + timeValue(d) === date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"parsedData = d3.csvParse(csvData, d => ({\n ...d,\n 'Date': new Date(d['Date']),\n 'Xvalue': +d['Xvalue'],\n 'Yvalue': +d['Yvalue']\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}