Published
Edited
Apr 19, 2020
md`# Toy Dataset`
md`Import CSV FILE in an array`
data = d3.csvParse(await FileAttachment("toy_dataset.csv").text())
data.map(d=>d.Income)
md`Male Female Ratio Chart`
html`<div id="my_dataviz"></div>`
{
// set the dimensions and margins of the graph
var width = 650
var height = 450
var margin = 40
// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
var radius = Math.min(width, height) / 2 - margin
// append the svg object to the div called 'my_dataviz'
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width /1.8 + "," + height / 2 + ")");
// Create dummy data
var data = {Male: Male(), Female: Female()}
// set the color scale
var color = d3.scaleOrdinal()
.domain(["a", "b"])
.range(d3.schemeDark2);
// Compute the position of each group on the pie:
var pie = d3.pie()
.sort(null) // Do not sort group by size
.value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))
// The arc generator
var arc = d3.arc()
.innerRadius(radius * 0.5) // This is the size of the donut hole
.outerRadius(radius * 0.8)
// Another arc that won't be drawn. Just for labels positioning
var outerArc = d3.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9)
// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg
.selectAll('allSlices')
.data(data_ready)
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d){ return(color(d.data.key)) })
.attr("stroke", "white")
.style("stroke-width", "2px")
.style("opacity", 0.7)
// Add the polylines between chart and labels:
svg
.selectAll('allPolylines')
.data(data_ready)
.enter()
.append('polyline')
.attr("stroke", "black")
.style("fill", "none")
.attr("stroke-width", 1)
.attr('points', function(d) {
var posA = arc.centroid(d) // line insertion in the slice
var posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that
var posC = outerArc.centroid(d); // Label position = almost the same as posB
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left
posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left
return [posA, posB, posC]
})
// Add the polylines between chart and labels:
svg
.selectAll('allLabels')
.data(data_ready)
.enter()
.append('text')
// .text( function(d) { console.log(d.data.key) ; return d.data.key } )
.text(
function(d) {
if(d.data.key=="Male"){
let percentage = (Male()*100)/totalData;
return d.data.key + "(" + percentage.toFixed(2)+" %)";
}
if(d.data.key=="Female"){
let percentage = (Female()*100)/totalData;
return d.data.key + "(" + percentage.toFixed(2)+" %)";
}
}
)
.attr('transform', function(d) {
var pos = outerArc.centroid(d);
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1);
return 'translate(' + pos + ')';
})
//Print Percentage
.style('text-anchor', function(d) {
var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
return (midangle < Math.PI ? 'start' : 'end')
})
}
md`MAKE CHART `
{
function percentage(id){
return "Hello";
}
}
totalData = data.map(d=>d.Female).length;
md`Count Male`
function Male(){
var male_count = 0;
data.forEach(function(d) {
// count1 wasn't declared so you got an error -- I think you meant count
if(d.Gender=="Male"){
male_count++;
}
});
console.log(male_count); // check the browser console!
return male_count;
}
Male()
md`Count Female `
function Female(){
var female_count = 0;
data.forEach(function(d) {
// count1 wasn't declared so you got an error -- I think you meant count
if(d.Gender=="Female"){
female_count++;
}
});
console.log(female_count); // check the browser console!
return female_count;
}
Female()
d3= require('d3@5')
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.
