import { select, scaleLinear, scaleBand, axisLeft, axisBottom, } from 'd3'; export const main = (container) => { const width = container.clientWidth; const height = container.clientHeight; const margin = { top: 100, left: 50, right: 20, bottom: 20, }; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svg = select(container) .selectAll('svg') .data([null]) .join('svg') .attr('width', width) .attr('height', height) .style('background', 'lightgreen'); // CHANGE NUMBERS HERE FOR DIFFERENT HEIGHTS. var countries = [ { country: 'USA', score: 66 }, { country: 'UK', score: 33 }, { country: 'India', score: 100 }, ]; const xValue = (d) => d.country; const yValue = (d) => d.score; // SCALES const xScale = scaleBand() .domain(countries.map(xValue)) .range([margin.left, width - margin.right]) .padding(0.97); const yScale = scaleLinear() .domain([0, 100]) .range([innerHeight, 0]); const g = svg .append('g') .attr( 'transform', `translate(

\{margin\.left\},

{margin.top})`, ); // AXES g.append('g') .call(axisBottom(xScale)) .attr('transform', `translate(

\{0\},

{innerHeight})`) .select('.domain') .remove(); g.append('g').call(axisLeft(yScale)); // VASE g.append('path') .attr('d', `M

\{margin\.left\},

{innerHeight} L

\{margin\.left\},

{innerHeight - 50} C

\{margin\.left \+ 20\},

{innerHeight - 70}

\{margin\.left \+ innerWidth \- 20\},

{innerHeight - 70}

\{margin\.left \+ innerWidth\},

{innerHeight - 50} L

\{margin\.left \+ innerWidth\},

{innerHeight} Z`) .attr('fill', 'brown'); // STEMS g.selectAll('rect.stem') .data(countries) .enter() .append('rect') .attr('class', 'stem') // Coefft determines space between stems. Constant determines distance from edge of Vis. .attr('x', (d) => xScale(xValue(d))) .attr('y', (d) => yScale(yValue(d))) .attr('width', xScale.bandwidth()) .attr('height', (d) => innerHeight - yScale(yValue(d))) .attr('fill', 'green'); // FLOWER const petalColors = ['black', 'purple', 'blue']; countries.forEach((country, index) => { var color = petalColors[index]; const petalSize = 50; // Coefft determines space between stems. Constant determines distance from edge of Vis. const flowerX = xScale(country.country) + 4; // For some reason not centered with stem? const flowerY = yScale(country.score); // PETALS for (let j = 0; j < 5; j++) { // -180 makes petals start in the center. / 5 spaces them equally. const angle = ((Math.PI * 2) / 5) * j - 180; // Coefficient here determines distance from center. // 0 means no distance, 1 means edges touching. const petalX = flowerX + Math.cos(angle) * petalSize * 0.8; const petalY = flowerY + Math.sin(angle) * petalSize * 0.8; g.append('circle');

Fork of Flowers with D3

Nanditha Reddy