Last active
November 3, 2018 13:38
Revisions
-
TCotton revised this gist
Nov 3, 2018 . 1 changed file with 78 additions and 45 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -20,50 +20,83 @@ const xAxisGroup = graph.append('g') const yAxisGroup = graph.append('g'); // scales const y = d3.scaleLinear() .range([graphHeight, 0]); const x = d3.scaleBand() .range([0, graphWidth]) .paddingInner(0.2) .paddingOuter(0.2); // create & call axesit const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y) .ticks(3) .tickFormat(d => d + ' orders'); xAxisGroup.selectAll('text') .attr('fill', 'orange') .attr('transform', 'rotate(-40)') .attr('text-anchor', 'end') // update function const update = (data) => { // update scales y.domain([0, d3.max(data, d => d.orders)]); x.domain(data.map(item => item.name)); // join the data to rects const rects = graph.selectAll('rect').data(data); // remove exit selection rects.exit().remove(); // update current shapes in dom rects.attr('width', x.bandwidth) .attr("height", d => graphHeight - y(d.orders)) .attr('fill', 'orange') .attr('x', d => x(d.name)) .attr('y', d => y(d.orders)); rects.enter() .append('rect') .attr('width', x.bandwidth) .attr("height", d => graphHeight - y(d.orders)) .attr('fill', 'orange') .attr('x', (d) => x(d.name)) .attr('y', d => y(d.orders)); xAxisGroup.call(xAxis); yAxisGroup.call(yAxis); } const data = []; db.collection('dishes').onSnapshot(res => { res.docChanges().forEach(change => { const doc = {...change.doc.data(), id: change.doc.id}; switch (change.type) { case 'added': data.push(doc); break; case 'modified': const index = data.findIndex(item => item.id === doc.id); data[index] = doc; break; case 'removed': data = data.filter(item => item.id !== doc.id); break; default: break; } update(data); }); }); -
TCotton created this gist
Nov 3, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,69 @@ // select the svg container first const svg = d3.select('.canvas') .append('svg') .attr('width', 600) .attr('height', 600); // create margins & dimensions const margin = {top: 20, right: 20, bottom: 100, left: 100}; const graphWidth = 600 - margin.left - margin.right; const graphHeight = 600 - margin.top - margin.bottom; const graph = svg.append('g') .attr('width', graphWidth) .attr('height', graphHeight) .attr('transform', `translate(${margin.left}, ${margin.top})`); // create axes groups const xAxisGroup = graph.append('g') .attr('transform', `translate(0, ${graphHeight})`) const yAxisGroup = graph.append('g'); d3.json('menu.json').then(data => { const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.orders)]) .range([graphHeight, 0]); const x = d3.scaleBand() .domain(data.map(item => item.name)) .range([0, graphWidth]) .paddingInner(0.2) .paddingOuter(0.2); // join the data to circs const rects = graph.selectAll('rect') .data(data); // add attrs to circs already in the DOM rects.attr('width', x.bandwidth) .attr("height", d => graphHeight - y(d.orders)) .attr('fill', 'orange') .attr('x', d => x(d.name)) .attr('y', d => y(d.orders)); // append the enter selection to the DOM rects.enter() .append('rect') .attr('width', x.bandwidth) .attr("height", d => graphHeight - y(d.orders)) .attr('fill', 'orange') .attr('x', (d) => x(d.name)) .attr('y', d => y(d.orders)); // create & call axesit const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y) .ticks(3) .tickFormat(d => d + ' orders'); xAxisGroup.call(xAxis); yAxisGroup.call(yAxis); xAxisGroup.selectAll('text') .attr('fill', 'orange') .attr('transform', 'rotate(-40)') .attr('text-anchor', 'end') });