31:T83e,md`# 3.5 TP-5: Recorrido por el Sistema Solar Por favor, para resolver los ejercicios del práctico utilizá este mismo notebook. Podés crearte una copia en tu propia cuenta de Observable haciendo click en ${fork_button()} (arriba a la derecha). Tus modificaciones a esa copia no afectarán el notebook original. Una vez terminado, no olviden apretar el botón ${publish_button()} (arriba a la derecha) para que el notebook sea público y podamos acceder para su corrección. Después de cada modificación que realicen al notebook deberán volver apretar el boton Publish si quieren que esa modificación se vuelva visible para cualquier otro usuario. __Consigna__: En este último práctico vamos a apostar a la creatividad y a las habilidades ya adquiridas sobre d3. No habrá un data set predefinido, pero sí una temática: *Sistema Solar*. Deberán crear al menos dos visualizaciones con datos recopilados por ustedes sobre el sistema solar. Pueden pensar en visualizar distintos atributos, por ejemplo, la velocidad de planetas, tamaños relativos, distancias, y cualquier otra cosa que se les ocurra y cuyos datos encuentren en la web. El objetivo es lograr visualizaciones simples pero efectivas. Pueden buscar *inspiración* en las galerías de ejemplos de libre acceso en Observable (por ejemplo, [esta](https://observablehq.com/@hepplerj/planet-orbits) o [estas](https://www.d3-graph-gallery.com/)). La única consigna es que: * Una de las gráficas utilice (como mínimo) alguno de los eventos del mouse vistos en clase. Se consideran tambien como *eventos del mouse* los tooltips, drag-and-drop, zoom y brushing. * Una de las gráficas utilice (como mínimo) una animación simple. Si lo desean, las vistas pueden estar coordinadas. Por ejemplo, una primera visualización que admite *brushing* y una segunda que profundiza detalles sobre los elementos seleccionados. __*Nota*__: Planeen bien la visualización antes de comenzar a programarla. Implementen de manera iterativa, comenzando con la funcionalidad más sencilla y complejizando la visualización sobre el final del proyecto. `32:T1301,{ // Canvas const svg = d3.create("svg") .attr("width", cfg.width) .attr("height", cfg.height) .style("background-color", "black"); // Draw the stars var star_area = svg.append("g"); var stars = star_area.selectAll("circles") .data(star_data) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", "white") // Create the bounding areas var bounding_area = svg.append("g") .attr("transform", "translate(" + cfg.margin_left + "," + cfg.margin_top + ")") .selectAll("g") .data(planet_data) .enter().append("g") .attr("transform", function(d, i) {return bounding_box_translation(d, i)} ) .on("mouseenter", mouseover_handler) .on("mouseleave", mouseout_handler); // Create the planets var planets = bounding_area.append("circle") .attr("class", "planet") .attr("cx", bounding_area_width()/2) .attr("cy", bounding_area_width()/2) .attr("r", d => (planet_diameter(d.diameter) * 0.5) ) .attr("fill", d => d.colours[1]); // Create the bounding boxes var bounding_box = bounding_area.append("rect") .attr("class", "bounding-box") .attr("width", bounding_box_width()) .attr("height", bounding_box_width()) .attr("x", bounding_area_width()/2 - bounding_box_width()/2 ) .attr("y", bounding_area_width()/2 - bounding_box_width()/2 ) .attr("fill", "transparent") .attr("stroke", "grey") .attr("stroke-dasharray", "5,5") // Add title to the bounding boxes var titles = bounding_area.append("text") .attr("class", "title") .attr("x", bounding_area_width()/2 - bounding_box_width()/2 ) .attr("y", "-0.3em") .attr("fill", "white") .attr("font-family", cfg.title_font_family) .attr("font-size", cfg.title_font_size) .text(d => d.name); // Add info text below the bounding boxes var info_translation = "translate(" + (bounding_area_width()/2 - bounding_box_width()/2) + "," + bounding_area_width() + ")"; var planet_info = bounding_area.append("g") .attr("class", "info") .style("font-family", cfg.info_font_family) .style("font-size", cfg.info_font_size) .attr("transform", info_translation) .attr("fill", "white") .attr("opacity", 0); // Append orbit period info planet_info.append("text") .attr("dy", "1.2em") .text(d => "Diameter: " + d.diameter + " km") // Append planet diameter info planet_info.append("text") .attr("dy", "2.5em") .text(d => "Orbit period: " + d.orbital_period + " years" ) // Append number of moons info planet_info.append("text") .attr("dy", "3.8em") .text(d => "Moons: " + d.moons) // Event Handlers ----------------------------------------------------------------- function mouseover_handler(d, i) { var selection = d3.select(this); //selection.select(".planet").transition().attr("fill", "white").end(); selection.select(".bounding-box").transition().attr("stroke", "white").end(); selection.select(".info").transition().duration(1000).attr("opacity", 1).end(); } function mouseout_handler(d, i) { var selection = d3.select(this); //selection.select(".planet").transition().attr("fill", d => d.colours[1]).end(); selection.select(".bounding-box").transition().attr("stroke", "grey").end(); selection.select(".info").transition().duration(1000).attr("opacity", 0).end(); } // -------------------------------------------------------------------------------- // Return the canvas return svg.node(); }33:T583,function fork_button() { return html``}34:[] 2f:{"title":"3.5 TP-5: Recorrido por el Sistema Solar","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`### Visualizacion 1 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"// Configuration data for the visualization\ncfg = {\n \n // Define configuration data\n var configuration = { \n // Canvas width and heigth\n width: 800,\n height: 390,\n \n // Margins\n margin_top: 75,\n margin_bottom: 30,\n margin_left: 45,\n margin_right: 35,\n \n // Other visualization variables\n number_of_stars: 280,\n star_radius: 0.9,\n bounding_box_size: 0.95, // 1 is max possible\n title_font_family: \"monospace\",\n title_font_size: \"13px\",\n info_font_familty: \"monospace\",\n info_font_size: \"11px\"\n };\n return configuration;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`#### Planetas enanos\n\n\nLos planetas enanos son aquellos cuerpos celestes del Sistema Solar que no han limpiado la vecindad de su órbita y tienen la masa suficiente para que su propia gravedad haya superado la fuerza de cuerpo rígido. No son satélites de otros planetas y orbitan alrededor del Sol como cualquier otro planeta.\n\nEs un cuerpo celeste en órbita alrededor del Sol cuya fuerza de gravedad es tal que le permite adquirir una forma casi esférica (de equilibrio hidrostático), pero que no es un planeta porque no ha logrado limpiar los alrededores de su órbita de cuerpos cercanos al mismo. Además, tampoco es un satélite.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"star_data = { \n \n function get_star(){ \n var star = { x: Math.random() * cfg.width, \n y: Math.random() * cfg.height, r: Math.random() * cfg.star_radius};\n return star;\n }\n var star_data = d3.range(cfg.number_of_stars).map(d => get_star()) \n return star_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"true_planet_data = [\n {name: \"Mercury\", tilt: 0.03, radius: 2439.7, period: 58.65, colours: [\"#e7e8ec\", \"#b1adad\"]},\n {name: \"Venus\", tilt: 2.64, radius: 6051.8, period: -243, colours: [\"#f8e2b0\", \"#d3a567\"]},\n {name: \"Earth\", tilt: 23.44, radius: 6371, period: 1, colours: [\"#9fc164\", \"#6b93d6\"]},\n {name: \"Mars\", tilt: 6.68, radius: 3389.5, period: 1.03, colours: [\"#ef1501\", \"#ad0000\"]},\n {name: \"Jupiter\", tilt: 25.19, radius: 69911, period: 0.41, colours: [\"#d8ca9d\", \"\t#a59186\"]},\n {name: \"Saturn\", tilt: 26.73, radius: 58232, period: 0.44, colours: [\"#f4d587\", \"#f4a587\"]},\n {name: \"Uranus\", tilt: 82.23, radius: 25362, period: -0.72, colours: [\"#e1eeee\", \"#adb0c3\"]},\n {name: \"Neptune\", tilt: 28.32, radius: 24622, period: 0.72, colours: [\"#85addb\", \"\t#3f54ba\"]}\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"dwarf_planet_data = [\n {name: \"Eris\", moons: 1, diameter: 2326, orbital_period: 561.4, colours: [\"#e7e8ec\", \"#b1adad\"]},\n {name: \"Pluto\", moons: 5, diameter: 2302, orbital_period: 247.8, colours: [\"#f8e2b0\", \"#d3a567\"]},\n {name: \"Haumea\", moons: 2, diameter: 1436, orbital_period: 281.9, colours: [\"#9fc164\", \"#6b93d6\"]},\n {name: \"Makemake\", moons: 0, diameter: 1420, orbital_period: 305.34, colours: [\"#ef1501\", \"#ad0000\"]},\n {name: \"Ceres\", moons: 0, diameter: 952.4, orbital_period: 4.6, colours: [\"#d8ca9d\", \"\t#a59186\"]}\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"planet_data = dwarf_planet_data","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"// Bounding area of each planet\nbounding_area_width = function(){ \n return (cfg.width - cfg.margin_left - cfg.margin_right) /planet_data.length;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"// Visible bounding rectangle\nbounding_box_width = function(){\n return bounding_area_width() * cfg.bounding_box_size;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"// Returns the x translation of each bounding box in the visualization\nfunction bounding_box_translation(d, i){\n return \"translate(\" + (bounding_area_width() * i) + \",\" + 0 + \")\";\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"// Scale for planet diameter\nplanet_diameter = d3.scaleLinear() \n .domain([0, d3.max(planet_data, d => d.diameter)]) \n .range([0, bounding_box_width() * 0.9 ]) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`### Visualizacion 2 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":806,"value":"md`https://observablehq.com/@alefiga/tp-5-visualizacion-2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function publish_button() { return html``}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-hsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {chart} from \"@hepplerj/planet-orbits\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}