2d:null 2e:["$","title",null,{"children":"Introducción a la visualización de datos con Observable y d3.js | Adrián Blanco | Observable"}] 33:T499,sistemaSolarD3 = { const distance = d3 .scaleLinear() .domain([0, 4500]) .range([15, width]); const radius = d3 .scaleSqrt() .domain([0, 7200]) .range([0, 4]); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const g = svg.append("g"); //Universo g.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#363F84"); //Sol g.append("circle") .attr("cx", -980) .attr("cy", 200) .attr("r", 985) .attr("fill", "#FBC654"); g.append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("id", d => d.planet) .attr("cx", d => distance(d.distancia)) .attr("cy", height / 2) .attr("r", d => radius(d.radio)) .attr("fill", d => d.color); g.append("text") .attr("dx", distance(130)) .attr("dy", 215) .attr("font-size", 14) .attr("font-family", 'Arial') .attr("fill", "#FFF") .text("↑"); g.append("text") .attr("dx", distance(130)) .attr("dy", 235) .attr("font-size", 14) .attr("font-family", 'Arial') .attr("fill", "#FFF") .text("Tierra"); return svg.node(); }34:T6f8,barchart = { const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const xScale = d3 .scaleTime() .domain([new Date(2020, 2, 1), new Date()]) .range([0 + margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(hospitalizados.map(d => d.hospitalizados_planta))]) .range([height - margin.top, 0 + margin.bottom]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); const yAxis = g => g .call( d3 .axisLeft(yScale) .ticks(5) .tickSize(-width + margin.left + margin.right) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line").style("stroke", "lightgray")); const bars = svg .append('g') .attr('class', 'bars') .selectAll('rect') .data(hospitalizados.sort((a, b) => d3.ascending(a.fecha, b.fecha))) .enter() .append('rect') .attr('id', d => d.fecha + " " + d.pcr_positivos) .attr('x', d => xScale(d.fecha)) .attr('y', d => yScale(d.hospitalizados_planta)) .attr('width', 3) .attr('height', d => yScale(0) - yScale(d.hospitalizados_planta)) .style("fill", "#FBC654"); svg .append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .selectAll("text") .style("text-anchor", "middle") .style("font", "10px sans-serif"); svg .append("g") .attr("class", "axis y") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .selectAll("text") .style("font", "10px sans-serif"); return svg.node(); }35:T4d0,hospitalizados = { const url = "https://analisis.datosabiertos.jcyl.es/api/records/1.0/search/?dataset=situacion-de-hospitalizados-por-coronavirus-en-castilla-y-leon&q=&rows=1000&refine.hospital=Complejo+Asistencial+Universitario+de+Salamanca" let data = await d3.json(url); const processedData = data.records.map(d => { return { fecha: parseDate(d.fields.fecha), hospital: d.fields.hospital, nuevos_hospitalizados_planta: d.fields.nuevos_hospitalizados_planta, hospitalizados_planta: d.fields.hospitalizados_planta, hospitalizados_planta_incluidos_sospecha: d.fields.hospitalizados_planta_incluidos_sospecha, nuevos_hospitalizados_uci: d.fields.nuevos_hospitalizados_uci, hospitalizados_uci: d.fields.hospitalizados_uci, hospitalizados_uci_incluidos_sospecha: d.fields.hospitalizados_uci_incluidos_sospecha, nuevas_altas: d.fields.nuevas_altas, nuevos_fallecimientos:d.fields.nuevos_fallecimientos, fallecimientos: d.fields.fallecimientos, porcentaje_ocupacion_uci: d.fields.porcentaje_ocupacion_uci } }) return processedData.sort((a, b) => d3.descending(a.fecha, b.fecha)) } 36:[] 31:{"id":"0c947f0d7dc39c06","slug":"introduccion-visualizacion-datos-d3js","title":"Introducción a la visualización de datos con Observable y d3.js","thumbnail":"b88777c52edaff524d73af4d6fdb3fd472803374ab840c4c4d39cd4fe995c0d8","access_level":"public","create_time":"$D2021-03-03T01:54:43.959Z","update_time":"$D2021-11-09T14:05:31.219Z","view_time":null,"first_public_time":"$D2021-03-04T03:01:05.856Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"245ac42cd892b4cc","login":"adrianblanco","name":"Adrián Blanco","avatar_url":"https://avatars-next.observableusercontent.com/eea5773e3bbeefe76d056115d0b28764b5a0c038faf17da5669a075c69ffeaf2","tier":"starter_2024"},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"da362c08c97e9b17","login":"adrianblanco","name":"Adrián Blanco","avatar_url":"https://avatars-next.observableusercontent.com/eea5773e3bbeefe76d056115d0b28764b5a0c038faf17da5669a075c69ffeaf2","tier":null}],"members":[{"type":"individual","id":"da362c08c97e9b17","login":"adrianblanco","name":"Adrián Blanco","avatar_url":"https://avatars-next.observableusercontent.com/eea5773e3bbeefe76d056115d0b28764b5a0c038faf17da5669a075c69ffeaf2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Introducción a la visualización de datos con Observable y d3.js","cells":[{"id":0,"value":"md`# Introducción a la visualización de datos con Observable y d3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`Taller de Observable y d3.js con motivo del [Día de los datos abiertos](https://opendataday.org/), #OpenDataDay, de Open Knowledge Foundation. Este taller es parte de la jornada en línea \"Día de los Datos Abiertos: Periodismo y Visualización de Datos Abiertos\" celebrada el jueves 4 de marzo de 2021 y organizada por el claustro del Máster de Periodismo y Visualización de Datos de la Universidad de Alcalá.\n\nVamos a ello. En este notebook puedes dar tus primeros pasos en la visualización de datos aprendiendo los conceptos básicos de d3.js. d3.js es una librería de Javascript, creada por Mike Bostock, para producir visualizaciones de datos dinámicas e interactivas en la web. Se base en el uso de Scalable Vector Graphics (svg), HTML5, and CSS.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`### Conceptos básicos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`\n\n* Para aprender d3.js, comienza siempre por las base.\n* Programar en d3.js no es tan intuitivo como crear gráficos en otras plataformas. \n* Por ello, no intentes construir gráfico complejos desde el minuto 0.\n* Observable es una plataforma que mediante sus notebooks facilita crear visualizaciones, aprender y trabajar en equipo.\n* [Observable no es Javascript](https://observablehq.com/@observablehq/observables-not-javascript).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`Antes de nada, vamos a ver cómo dibujar en svg para conocer las principales etiquetas y atributos como son svg, g, circle, rect y path. Para ello, vamos a visualizar el sistema solar en svg:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`Como podéis ver es un trabajo laborioso. Aquí es donde d3.js nos facilita el trabajo a la hora de crear gráficos más complejos, que necesitamos actualizar periódicamente y escalables.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`Pero, por dónde empiezo? Veamos cuál es la configuración básica para crear un gráfico:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"chart = {\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const g = svg.append(\"g\");\n \n // Data, Enter, Append\n // g.append(\"g\")\n // .selectAll(\"circle\")\n // .data(data)\n // .enter()\n // .append(\"circle\")\n \n \n return svg.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`Para poder visualizar el sistema solar con d3.js necesitamos incorporar una base de datos, en este caso en formato json:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"data = [\n {\n planet: \"mercurio\",\n radio: 2439.7, // radio en kms\n distancia: 46, // Distancia en millones de kms. Perihelio: distancia de un planeta al sol medida en su punto orbital más cercano.\n color: \"#BB641D\"\n },\n {\n planet: \"venus\",\n radio: 6051.8,\n distancia: 107,\n color: \"#BB641D\"\n },\n {\n planet: \"tierra\",\n radio: 6378.14,\n distancia: 147,\n color: \"#85A0C9\"\n },\n {\n planet: \"marte\",\n radio: 3397.2,\n distancia: 205,\n color: \"#BB641D\"\n },\n {\n planet: \"jupiter\",\n radio: 71492,\n distancia: 741,\n color: \"#BB641D\"\n },\n {\n planet: \"saturno\",\n radio: 60268,\n distancia: 1354,\n color: \"#BB641D\"\n },\n {\n planet: \"urano\",\n radio: 25559,\n distancia: 2748,\n color: \"#BB641D\"\n },\n {\n planet: \"neptuno\",\n radio: 24746,\n distancia: 4453,\n color: \"#BB641D\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`A continuación, la visualización y el código detrás de ésta:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`### Apliquemos lo aprendido:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`Una vez tenemos cierta nocioón de la lógica de d3.js, podemos intentar visualizar gráficos más ambiciosos. Vamos a aplicar lo aprendido sobre d3.js, svg y en especial el uso de rect en el siguiente gráfico que muestra la evolución de los hospitalizados por coronavirus en Salamanca. Los datos provienen de la API que datos abiertos de la Junta de Castilla y León ha habilitado.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`Hospitalizaods por covid-19 en el Complejo Asistencial Universitario de Salamanca`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## Funciones`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Dependencias`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"