Skip to main content
Log in
D

Diego-Vargas

@Diego-Vargas·7 public vizzes

Loading thumbnail…

Habitantes por Distrito en Barcelona

This bar chart shows the population of each district in Barcelona, ordered from most to least populous. The data is loaded from a CSV file and rendered as SVG rectangles, with populations scaled by a factor of ten. It uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft and d3.axisBottom to display the district names and population values.

Apr 30, 2019
Loading thumbnail…

Saludos Cordiales!

This example displays the phrase “Muchas Gracias” in large, light-gray text centered on a dark background, rendered using the Ubuntu font. The visualization demonstrates a minimal D3.js v5 setup, where an ES6 module exports the message and the `select` API targets the HTML element to set its text content. The page relies on a simple CSS stylesheet for layout and typography, while the code imports the `select` function from D3 to apply the message dynamically.

Apr 30, 2019
Loading thumbnail…

Lab07, Gráfico de Barras.

This example presents a bar chart of population counts by month, using data loaded from a CSV file. The visualization is built with React and Victory Charts, with the data imported via the `d3.csv` API. The chart uses `VictoryBar` and `VictoryChart` components, applying a green fill to the bars and custom font styling for tick labels. The code reads the CSV asynchronously using React hooks, converting the population field to numeric values before rendering.

Apr 21, 2019
Loading thumbnail…

Lab07, Gráfico de Barras.

This example presents a bar chart of population counts by month, using data loaded from a CSV file. The visualization is built with React and Victory Charts, with the data imported via the `d3.csv` API. The chart uses `VictoryBar` and `VictoryChart` components, applying a green fill to the bars and custom font styling for tick labels. The code reads the CSV asynchronously using React hooks, converting the population field to numeric values before rendering.

Apr 21, 2019
Loading thumbnail…

Lab06, Happy Face :)

A smiley face appears as a light blue circle with black outlines, featuring two eyes, rectangular eyebrows, and an arc-shaped mouth. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build the SVG structure. The eyebrows animate by chaining `transition().duration(2000)` calls, moving them down and back up. Rendering uses an SVG canvas with coordinate transformations via `attr('transform')`, and the mouth is drawn using the `arc` shape generator.

Apr 13, 2019
Loading thumbnail…

Lab06, Happy Face :)

A smiley face appears as a light blue circle with black outlines, featuring two eyes, rectangular eyebrows, and an arc-shaped mouth. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build the SVG structure. The eyebrows animate by chaining `transition().duration(2000)` calls, moving them down and back up. Rendering uses an SVG canvas with coordinate transformations via `attr('transform')`, and the mouth is drawn using the `arc` shape generator.

Apr 13, 2019
Loading thumbnail…

Lab 06, Grafico de Barras

This bar chart displays the population of seven Costa Rican provinces, based on 2018 United Nations World Population Prospects data. It uses D3 v5 with `d3.csv` to load data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for categorical y-axis labels. The chart renders as SVG rectangles filled with light green, with axes created via `d3.axisLeft` and `d3.axisBottom`. Population values are multiplied by 1000 in the data preprocessing step.

Apr 13, 2019