jeronimoek

Gráfico de Dispersión

A scatterplot displays population figures for nine African countries, with each country positioned along the y-axis and its population along the x-axis. D3.js renders circular marks onto an SVG canvas, using `scaleLinear` for the quantitative axis and `scalePoint` for the categorical country labels. Grid lines extend from both axes, and formatted tick labels abbreviate large numbers using `format('.2s')`. The data is loaded from a CSV file and multiplied by 1000 before visualization.

May 10, 2021

Bar chart

This bar chart displays the populations of African countries, with each bar’s length proportional to population in thousands. It uses D3 v5’s `csv` loader to parse the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for ticks, rendering all marks as SVG `<rect>` elements.

May 10, 2021

Let's make a face with D3.js!

A stylized face drawn with SVG primitives animates its eyebrows in a looping motion. The example uses D3.js v5 to build concentric circles for the head and eyes, a path for the smile, and rectangles for the eyebrows. The code demonstrates `d3.select`, `d3.arc`, and chained `transition().duration()` calls to create the repetitive vertical eyebrow movement.

May 6, 2021

Choropleth Map Argentina Dptos Corona (Topojson)

This choropleth map of Argentine departments visualizes COVID-19 data using a TopoJSON format. It renders an SVG graphic with D3 v5, using the `d3.json` function to load and parse the TopoJSON file from a GitHub repository. The map’s color scheme and department boundaries are generated through `d3.geoPath`, while the map's styling is defined in a separate CSS file. The interactive visualization displays the spatial distribution of the data across the country.

Aug 18, 2020

Choropleth Map Argentina Dptos Corona

This choropleth map displays confirmed COVID-19 cases across Argentine departments, using a logarithmic color scale from blue to red to represent case counts. The visualization loads GeoJSON data from a GitHub repository and renders department boundaries as SVG paths via `d3.geoPath` with a `geoTransverseMercator` projection. It employs `d3.scaleLog` for color mapping and includes interactive zooming through `d3.zoom`. Hovering over a department highlights it in pink and reveals a tooltip with the department name, province, and case count.

Aug 10, 2020

HTML Starter

This example demonstrates a color gradient mapped onto a series of rectangles using a logarithmic scale. It uses D3.js to create an SVG visualization, with `d3.scaleLog` and `d3.scaleLinear` defining the value-to-position mapping, while a custom log-based color scale assigns a range of three colors across the domain. The visualization also includes a bottom axis with `d3.axisBottom` and tick formatting, all rendered within an HTML page.

Aug 10, 2020

Choropleth Map Argentina Dptos Corona

A choropleth map of Argentine departments displays COVID-19 case counts using a logarithmic color scale transitioning from blue to red. The visualization includes a color legend with a corresponding logarithmic axis. The map is rendered as an SVG using d3.geoPath, while the color scale and legend are constructed with d3.scaleLog and d3.axisBottom, with data projected via d3.geoTransverseMercator.

Aug 10, 2020

Mapa mundial

This example displays a world map using a natural Earth projection, with countries rendered as light green filled polygons and oceans shown in blue. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON features using the `feature` function from TopoJSON. The map is drawn in SVG with D3 v5, using `geoNaturalEarth1` for projection and `geoPath` to generate the country paths, while a separate path element outlines the sphere.

May 16, 2020

Departamentos Argentina - interactivo

This interactive visualization displays a zoomable map of Argentina’s departments, with each region filled in light green and labeled by its department and province in a hover tooltip. Built with D3.js and the d3-geo-projection extension, it uses a transverse Mercator projection centered on the country and renders geographic paths as SVG elements. The map draws from a public GeoJSON dataset of Argentine departments, while a zoom interaction, implemented via D3’s `zoom` event, adjusts the map’s transform. Hovering changes the fill color to pink, and the sphere background is light blue.

May 16, 2020

Gráfico Lineal Temp/Día 2012 (CABA)

This line chart displays hourly temperature readings in Buenos Aires City (CABA) for the year 2012, derived from a CSV file with columns for date, station, temperature, and other meteorological variables. The visualization, rendered as an SVG, uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoothing to create a single continuous path for the temperature data. The chart includes grid lines, axis labels, and a title, with dates parsed using `timeParse` and formatted via `timeFormat`.

May 15, 2020

Temp / Día 2012 (CABA)

A scatterplot displays temperature readings in degrees Celsius over time for Buenos Aires, using hourly data from April 2011. Each circle represents a recorded temperature point, with the x-axis showing dates and the y-axis showing temperature values. The visualization uses D3 v5's `scaleTime` and `scaleLinear` for axes, with points rendered as SVG circles. The chart includes grid lines, axis labels, and a title, with data parsed from a CSV file containing meteorological measurements.

Gráfico Lineal Temp/Día 2011 (CABA)

A line chart displays daily temperature readings in Buenos Aires (CABA) for April 2011, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 with a time scale and linear scale, rendering an SVG path with a basis curve. The data comes from a CSV file parsed with `d3.csv` and `timeParse`, with axes styled using `axisBottom` and `axisLeft`, and grid lines drawn via tick sizes.

Gráfico Lineal Temp/Día 2011 (CABA)

A line chart displays daily temperature readings from two weather stations in Buenos Aires (CABA) throughout 2011, using data from a CSV file. The visualization uses D3 v5 with an SVG renderer, mapping timestamps to a time scale and temperature to a linear scale. A smooth curve via `d3.curveBasis` connects the points, while axes are generated with `axisBottom` and `axisLeft`, including grid lines and rotated axis labels. Data parsing relies on `timeParse` and `csv` from D3.

Temp / Día 2011 (CABA)

This scatter plot shows hourly temperature readings (TEMP_C) in Buenos Aires (CABA) for April 2011, with each circle representing a measurement. The visualization uses a time-scaled x-axis for dates and a linear y-axis for temperature in Celsius. Rendered as an SVG, the chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with data parsed from a CSV file containing multiple meteorological variables.

Let's make a face with D3.js!

RAD / UV (CABA)

This scatterplot visualizes the relationship between UV index and solar radiation measurements across multiple weather stations in Buenos Aires (CABA). Each circle represents an hourly observation, with axis labels marking the UV index on the x-axis and solar radiation in watts on the y-axis. The code uses D3 v5 with a linear scale for both axes, rendering SVG circles with low opacity to show overlapping data density. Data is loaded from a CSV file containing meteorological variables, and the chart includes custom axis formatting and grid lines created through the axisBottom and axisLeft APIs.

May 13, 2020

Temp / Hora (CABA) 04,05,06

This chart displays hourly temperature readings from multiple weather stations in Buenos Aires (CABA) across three days in April 2012. Each circle represents a single station's temperature measurement at a given hour, with the x-axis showing time and the y-axis showing temperature in degrees Celsius. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and grid lines, while `selectAll('circle')` appends the data points. The data is loaded from a local CSV file via `csv()`, and circle styling is defined in the accompanying stylesheet.

Temp / Hora (CABA) - 01,02,03

This scatterplot shows hourly temperature readings in degrees Celsius for Buenos Aires (CABA), with each circle representing a measurement from a specific weather station. The visualization uses D3 v5 scales and axes to plot time on the x-axis against temperature on the y-axis, with a fixed y-domain from 0 to 40°C. SVG circles are rendered with orange fill and low opacity to show overlapping data points. The chart includes axis labels and a title, pulling data from a CSV file containing weather station observations.

Customizando Los Ejes

A horizontal bar chart displays population figures for African countries, with the title “Paises / Población” and a whimsical x-axis label reading “Corcho negro de cuero.” The chart customizes both axes: the y-axis removes its domain line and tick lines, while the x-axis formats tick labels in compact notation (e.g., “100k”) and draws full-length grid lines. Data is loaded from a CSV file using D3’s `csv` function, with population values multiplied by 1000. The visualization uses D3 v5’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG graphic, with custom tick formatting that replaces 'G' with 'B'.

Población / Km2

This scatter plot displays the relationship between population and area for each country, with each purple circle representing a nation. The chart uses a log scale on both axes to effectively visualize the wide range of values, from tiny territories to large nations. Built with D3 v5, the visualization reads from a CSV file and renders as an SVG, using `scaleLinear` for both axes and `axisLeft` and `axisBottom` to generate the gridlines and tick marks. The code applies custom formatting to abbreviate large numbers, such as converting billions to "B", and includes axis labels and a title for clarity.

Let's make a map with D3.js!

This example displays a world map with countries filled in light green, overlaid on a blue sphere, using a natural Earth projection. The visualization is rendered as SVG paths, with the sphere and country boundaries generated through D3’s `geoPath` and `geoNaturalEarth1` projection. Country geometries come from the world-atlas TopoJSON dataset accessed via a URL, and are converted using the `topojson` `feature` function. The map is drawn onto a 960-by-500 pixel SVG canvas, with styling for fill and stroke defined in CSS.

Apr 18, 2020

Shapes with SVG and CSS

SVG shapes of circles and rectangles appear in warm colors, arranged in repeated groups with transformations. CSS class selectors style the connected lines and path with specific stroke colors and widths, while the overall SVG canvas scales down using a transform attribute. This React-based example demonstrates static SVG rendering with CSS-styled line elements, using no external data or interaction.

Apr 17, 2020

HTML Cars Report

This example displays a static list of three used cars with their model years, makes, and prices, presented as a simple HTML report. The page uses a plain HTML unordered list with the 2012 Nissan Leaf highlighted in red via a CSS class. Rendered in a monospace font at a large size, the report is generated entirely with standard HTML and CSS, without any JavaScript or data libraries, and receives its content directly from the markup.

Apr 17, 2020