Clase 02 - Parte 2 - D3 Fernando Becerra

100%

Clase 02 - Parte 2 - D3 Fernando Becerra

✓ Published2🌍 Public

Last edited Jul 28, 2022

Created on Jul 21, 2022

Forked from Clase 02 - Parte 1 - D3 Fernando Becerra

This example visualizes the temporal distribution of sociological research in Chile, plotting each study as a circular mark along a time axis from its publication year, colored by research group. The visualization uses D3 v7 with a force-directed simulation (`d3.forceSimulation`, `d3.forceX`, `d3.forceY`, and `d3.forceCollide`) to position overlapping points, while a time scale (`d3.scaleTime`) and band scale (`d3.scaleBand`) map the data. Data is loaded from remote JSON and CSV sources via `d3.json` and `d3.csv`, with rendered output as SVG circles that include hover tooltips.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Clase 02 - Parte 2 - D3 Fernando Becerra

This interactive bubble chart visualizes the relationship between GDP per capita, life expectancy, and population across countries, using a logarithmic x-scale and linear y-scale. The D3 v7 code renders SVG circles sized by population and colored by continent, with hover interactions that dim non-target circles and display a tooltip showing country details. The example demonstrates the enter-update-exit data join pattern, along with d3.scaleLog, d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft, loading data from a Rosling dataset via d3.json.

Mmaxthamt

75% match

Loading thumbnail…

Beeswarm -pruebas update-botones

This visualization displays 377 research projects funded by Fondecyt in Chile, grouped by sociology and information sciences, with each circle representing a project positioned along a time axis from 2010 to 2020. Interactive buttons filter projects by Fondecyt Regular, Iniciación, or all types, while hovering over circles reveals details about the year, university, lead researcher, and project title. The chart uses d3.forceSimulation with forceX and forceCollide to arrange overlapping circles, d3.scaleOrdinal for color encoding by university, and d3.scaleTime for the horizontal axis. Data comes from ANID via GitHub-hosted JSON and CSV files, rendered as SVG with a custom tooltip and legend.

Mmaxthamt

74% match

Loading thumbnail…

Clase 02 - Parte 1 - D3 Fernando Becerra

Four circles of varying sizes and colors appear at random positions on an SVG canvas when a button is clicked. The example demonstrates D3’s data join pattern by generating new data, updating existing circles, and removing extraneous ones with 500-millisecond transitions. Using d3.scaleLinear, it maps x, y, and radius values to axes and pixel ranges, while d3.axisBottom and d3.axisLeft render scales that update with each run. The code employs d3.select, selection.enter, and selection.exit to manage SVG circle elements dynamically.

Mmaxthamt

73% match

Loading thumbnail…

Prototipo proyecto 1

This visualization displays sociology thesis records as circles positioned by publication year along a shared x- and y-axis, using a CSV dataset from GitHub. It uses D3 v7 to load and parse the data, apply linear scales for position, and render SVG circles with transitions on enter and update. The circles are uniformly sized and styled in steelblue, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The example demonstrates a basic scatter plot with animated circle placement.

Mmaxthamt

71% match

Loading thumbnail…

Beeswarm v2

This example visualizes 377 Fondecyt-funded sociology and information science projects in Chile between 2010 and 2020 as a beeswarm plot. Each circle represents a project, with its horizontal position indicating the year and color encoding the year via a color scale; hovering reveals the project title and year. The layout is computed using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, while SVG circles and axes are rendered with D3 v7. Data is loaded from a remote CSV and JSON source.

Mmaxthamt

71% match

Loading thumbnail…

Fork of Beeswarm -pruebas update

A beeswarm chart displays 377 Chilean sociology and information science research projects funded by Fondecyt from 2010 to 2020, with circles colored by university. Hovering reveals project title, year, university, and lead researcher. The visualization uses d3.forceSimulation for collision-based layout, d3.scaleTime for the x-axis, and d3.scaleOrdinal for color encoding, rendering as SVG with data loaded from CSV and JSON sources.

Mmaxthamt

70% match

Loading thumbnail…

Exploración1

This example visualizes a dataset of yearly counts as a circular bubble chart, where each circle’s size encodes a numeric value and its color represents a category derived from the data’s ID. The visualization uses D3.js v5 to load a CSV file with `d3.csv`, then applies the `d3.pack` layout to compute circle positions and radii, with `d3.hierarchy` structuring the data. Each leaf node is drawn as an SVG `<circle>` with a fill color from `d3.scaleOrdinal(d3.schemeCategory20c)`, and text labels are added with clipping paths to keep them inside the circles. The chart also includes tooltips via `<title>` elements showing the exact value for each circle.

663anp3ca

67% match

Loading thumbnail…

Asociaciones/año Scatter Plot with Color

This scatter plot displays the creation dates and thematic categories of associations in Málaga, with each circle colored by its temática. The visualization uses React with D3 v5 scales including `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `scaleOrdinal` for color encoding. Data is loaded from a CSV file via D3’s `csv` function and rendered as SVG circles with opacity. The chart includes custom axis components for bottom and left orientations, with tooltips currently showing the association name through SVG `<title>` elements.

Ccimadomo

67% match