Published
Edited
Dec 9, 2020
1 fork
md`# freeCodeCamp D3.js Course`
{
const svg = DOM.svg(960,500);
const height = 500;
const width = 960;
const emoji = d3.select(svg);
const g = emoji.append('g').attr('transform',`translate(${width/2},${height/2})`);
const circle = g.append('circle');
circle.attr('r',height/2)
.attr('fill','yellow')
.attr('stroke','black');
const eyeSpacing = 100;
const eyeOffset = -80;
const eyeRadius = 30;
const eyebrowWidth = 70;
const eyebrowHeight = 25;
const eyebrowOffset = -70;
const eyes = g.append('g').attr('transform',`translate(0,${eyeOffset})`);
const leftEye = eyes.append('circle');
leftEye.attr('r',eyeRadius).attr('cx',-eyeSpacing);
const rightEye = eyes.append('circle');
rightEye.attr('r',eyeRadius).attr('cx',eyeSpacing);
const eyebrows = eyes.append('g')
.attr('transform',`translate(0,${eyebrowOffset})`);
eyebrows
.transition().duration(2000)
.attr('transform',`translate(0, ${eyebrowOffset-50})`)
.transition().duration(2000)
.attr('transform',`translate(0,${eyebrowOffset})`);
const leftEyebrow = eyebrows.append('rect')
.attr('x',-eyeSpacing - eyebrowWidth/2)
.attr('width',eyebrowWidth)
.attr('height',eyebrowHeight);
const rightEyebrow = eyebrows.append('rect')
.attr('x',eyeSpacing - eyebrowWidth/2)
.attr('width',eyebrowWidth)
.attr('height',eyebrowHeight);
const arcGenerator = d3.arc();
const pathData = arcGenerator({
innerRadius: 150,
outerRadius: 170,
startAngle: Math.PI / 2,
endAngle: Math.PI/2 * 3
});
const nosePathData = arcGenerator({
innerRadius:70,
outerRadius:50,
startAngle: 0,
endAngle: Math.PI
});
const mouth = g.append('path').attr('d',pathData);
const nose = g.append('path').attr('d',nosePathData).attr('transform','translate(-20,0)');
return svg
}
d3 = require('d3')
{
const svg = DOM.svg(960,500);
const example = d3.select(svg);
example.style('background-color','red');
return svg
}
md`D3 Part 2 - Making an Emoji`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
