helderdarocha/.block

## .block
height: 600
license: cc-by-sa-4.0

## README.md

      
    Raw
  

              README.md
            
          
    This pie chart shows the planetary masses of the four gaseous planets, four rocky planets and five dwarf planets (according to the conventions of the International Astronomical Union). Because of the difference in magnitude of the masses of these three groups of planets, each group was placed in a separate bar chart.
There are three stacked pie charts. You can navigate downwards by clicking on the slice which represents the total mass of the remaining planets. If you click the center, the graph will be reloaded.
The data in JSON format was obtained from the NASA JPL databases as CSV and later converted to XML, and then JSON.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pie chart: planetary masses</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>

        text {
            font-family: sans-serif;
            font-size: 9pt;
            text-anchor: middle;
            fill: black;
        }

        .bar text {
            font-size: 10pt;
            text-anchor: start;
        }
        tspan {
            font-size: 7pt;
        }

        h1 {
            font-family: sans-serif;
            color: #555;
            text-align: center;
            font-size: 16pt;
        }

    </style>
</head>
<body>
<h1>Mass of planets</h1>

<script>
    var width = 960, height = 500;
    var radius = Math.min(width, height) * .4;

    var dimensions = {
        height: "100%",
        width: "100%",
    };

    var viewBox = {
        viewBox: "0 0 " + width + " " + height
    };

    var colors = d3.scale.category20c();

    var svg = d3.select("body")
            .append("div").attr(dimensions)
            .append("svg").attr(viewBox);

    var pieChart = function (sliceData, otherData1, otherData2) {

        var otherData = d3.merge([otherData1, otherData2]);
        var other = {
            "name": "Other",
            "massGM": d3.sum(otherData, function (d) {
                return d.massGM;
            })
        };

        var data;
        if (otherData.length == 0) {
            data = sliceData;
            d3.select("h1").html("Mass of dwarf planets");
            colors = d3.scale.category10();
        } else {
            data = d3.merge([sliceData, [other]]);
        }

        var pie = d3.layout.pie()
                .value(function (d) {
                    return d.massGM;
                })
                .padAngle(.005);

        pieData = pie(data);

        console.log(pieData)

        var slice = d3.svg.arc();
        slice.outerRadius(radius);
        if(otherData2.length > 0) {
            slice.innerRadius(0);
        } else {
            slice.innerRadius(radius / 2);
            svg.append("circle")
                    .style("fill", "#999")
                    .attr("r", radius/3)
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
                    .on("mouseover", function(d) {
                        d3.select(this).style("fill", "#fdd");
                    })
                    .on("mouseout", function(d) {
                        d3.select(this).style("fill", "#999");
                    })
                    .on("click", function(d) {
                        // TEMPORARY!!
                        location.reload();
                    });
        }

        var labelArc = d3.svg.arc()
                .outerRadius(radius + 40)
                .innerRadius(radius + 30);

        svg.selectAll(".slice").data([]).exit().remove();

        var entries = svg.selectAll(".slice")
                .data(pieData)
                .enter()
                .append("g")
                .attr("class", "slice")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(270)");

        entries.on("mouseover", function (d) {
                    if (d.data.name == "Other") {
                        d3.select(this).style("cursor", "pointer");
                    }
                })
                .on("mouseout", function (d) {
                    if (d.data.name == "Other") {
                        d3.select(this).style("cursor", "default");
                    }
                })
                .on("click", function (d) {
                    if (d.data.name == "Other") {
                        d3.select("h1").html("Mass of rocky planets");
                        pieChart(otherData1, otherData2, []);
                    }
                })

        entries.append("path")
                .attr("d", slice)
                .style("fill", function (d, i) {
                    return colors(i);
                });

        var formatSci = d3.format(".2e");
        var format    = d3.format("000,000");

        entries.append("text")
                .attr("transform", function(d) {
                    return "translate(" + [labelArc.centroid(d)[0]+5,labelArc.centroid(d)[1]] + ") rotate(90)";
                })
                .attr("dy", ".35em")
                .text(function(d) {
                    return d.data.name;
                })
                .append("tspan")
                .attr("x", 0)
                .attr("dy", 10)
                .text(function(d) {
                    if(d.data.massGM > 10000) {
                        return formatSci(d.data.massGM) + " GM";
                    }
                    return format(Math.round(d.data.massGM)) + " GM";
                })

    }

    d3.json("https://raw.githubusercontent.com/helderdarocha/D3Examples/master/PlanetaryData/data/sol_2016.json", function (data) {

        var planets = data.planets.sort(function (a, b) {
            return d3.ascending(a, b);
        });

        var group1 = .01 * d3.sum(planets, function (d) {
                    return d.massGM;
                });
        var gaseous = planets.filter(function (d) {
            return d.massGM > group1;
        })
        console.log(gaseous);

        var other = planets.filter(function (d) {
            return d.massGM <= group1;
        })
        var group2 = .01 * d3.sum(other, function (d) {
                    return d.massGM;
                });
        var dwarf = other.filter(function (d) {
            return d.massGM <= group2;
        })
        console.log(dwarf);

        var rocky = other.filter(function (d) {
            return d.massGM > group2;
        });
        console.log(rocky);

        pieChart(gaseous, rocky, dwarf);
    });

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Pie chart: planetary masses</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>

	text {
	font-family: sans-serif;
	font-size: 9pt;
	text-anchor: middle;
	fill: black;
	}

	.bar text {
	font-size: 10pt;
	text-anchor: start;
	}
	tspan {
	font-size: 7pt;
	}

	h1 {
	font-family: sans-serif;
	color: #555;
	text-align: center;
	font-size: 16pt;
	}

	</style>
	</head>
	<body>
	<h1>Mass of planets</h1>

	<script>
	var width = 960, height = 500;
	var radius = Math.min(width, height) * .4;

	var dimensions = {
	height: "100%",
	width: "100%",
	};

	var viewBox = {
	viewBox: "0 0 " + width + " " + height
	};

	var colors = d3.scale.category20c();

	var svg = d3.select("body")
	.append("div").attr(dimensions)
	.append("svg").attr(viewBox);

	var pieChart = function (sliceData, otherData1, otherData2) {

	var otherData = d3.merge([otherData1, otherData2]);
	var other = {
	"name": "Other",
	"massGM": d3.sum(otherData, function (d) {
	return d.massGM;
	})
	};

	var data;
	if (otherData.length == 0) {
	data = sliceData;
	d3.select("h1").html("Mass of dwarf planets");
	colors = d3.scale.category10();
	} else {
	data = d3.merge([sliceData, [other]]);
	}

	var pie = d3.layout.pie()
	.value(function (d) {
	return d.massGM;
	})
	.padAngle(.005);

	pieData = pie(data);

	console.log(pieData)

	var slice = d3.svg.arc();
	slice.outerRadius(radius);
	if(otherData2.length > 0) {
	slice.innerRadius(0);
	} else {
	slice.innerRadius(radius / 2);
	svg.append("circle")
	.style("fill", "#999")
	.attr("r", radius/3)
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	.on("mouseover", function(d) {
	d3.select(this).style("fill", "#fdd");
	})
	.on("mouseout", function(d) {
	d3.select(this).style("fill", "#999");
	})
	.on("click", function(d) {
	// TEMPORARY!!
	location.reload();
	});
	}

	var labelArc = d3.svg.arc()
	.outerRadius(radius + 40)
	.innerRadius(radius + 30);

	svg.selectAll(".slice").data([]).exit().remove();

	var entries = svg.selectAll(".slice")
	.data(pieData)
	.enter()
	.append("g")
	.attr("class", "slice")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(270)");

	entries.on("mouseover", function (d) {
	if (d.data.name == "Other") {
	d3.select(this).style("cursor", "pointer");
	}
	})
	.on("mouseout", function (d) {
	if (d.data.name == "Other") {
	d3.select(this).style("cursor", "default");
	}
	})
	.on("click", function (d) {
	if (d.data.name == "Other") {
	d3.select("h1").html("Mass of rocky planets");
	pieChart(otherData1, otherData2, []);
	}
	})

	entries.append("path")
	.attr("d", slice)
	.style("fill", function (d, i) {
	return colors(i);
	});

	var formatSci = d3.format(".2e");
	var format = d3.format("000,000");

	entries.append("text")
	.attr("transform", function(d) {
	return "translate(" + [labelArc.centroid(d)[0]+5,labelArc.centroid(d)[1]] + ") rotate(90)";
	})
	.attr("dy", ".35em")
	.text(function(d) {
	return d.data.name;
	})
	.append("tspan")
	.attr("x", 0)
	.attr("dy", 10)
	.text(function(d) {
	if(d.data.massGM > 10000) {
	return formatSci(d.data.massGM) + " GM";
	}
	return format(Math.round(d.data.massGM)) + " GM";
	})

	}

	d3.json("https://raw.githubusercontent.com/helderdarocha/D3Examples/master/PlanetaryData/data/sol_2016.json", function (data) {

	var planets = data.planets.sort(function (a, b) {
	return d3.ascending(a, b);
	});

	var group1 = .01 * d3.sum(planets, function (d) {
	return d.massGM;
	});
	var gaseous = planets.filter(function (d) {
	return d.massGM > group1;
	})
	console.log(gaseous);

	var other = planets.filter(function (d) {
	return d.massGM <= group1;
	})
	var group2 = .01 * d3.sum(other, function (d) {
	return d.massGM;
	});
	var dwarf = other.filter(function (d) {
	return d.massGM <= group2;
	})
	console.log(dwarf);

	var rocky = other.filter(function (d) {
	return d.massGM > group2;
	});
	console.log(rocky);

	pieChart(gaseous, rocky, dwarf);
	});

	</script>
	</body>
	</html>