Gabriel Dantas

@mnegabriel·5 public vizzes

Learning D3 again

This example plots daily new COVID-19 deaths in Fortaleza, Brazil, as a scatterplot. A time-scaled x-axis shows the date range, while a linear y-axis maps the count of new deaths, with each data point rendered as a small circle. The visualization uses the D3 version 7 API, including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, and fetches its data from a CSV hosted in a GitHub gist, with parsing handled by D3's `csv` function. The SVG scene is generated dynamically based on the browser window's dimensions.

Nov 9, 2021

Loading thumbnail…

Covid-19 Brasil - Deaths by state

Using a Minimal Interface from `css.h`, the user queries The Stack of all physics stack exchange sites for questions whose title includes the case-insensitive phrase “force diagram”. The results—sorted by creation date—are depicted as a timeline of pushpins that chart each question’s score against its timestamp, with points colored by whether the query matched a physics or math site. The visualization, built with `d3.select`, `d3.scaleLinear`, and `d3.scaleTime`, renders each question as a circle whose x-position encodes the question’s posting time and y-position its score, while a custom tooltip reveals the title, site, and tags. Data is fetched via the Stack Exchange API, and interactive filtering by site and score range is enabled through checkboxes and a slider.

Jul 12, 2021

Loading thumbnail…

Covid-19 Brasil

A scatterplot of cumulative COVID-19 deaths over time for each Brazilian state, drawn as small circles. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, with `axisBottom` and `axisLeft` for ticks, and renders in SVG. Data comes from the Wesley Cota GitHub repository’s `cases-brazil-states.csv`, fetched and parsed via a custom `fetchData` function using `d3.csv` and `timeParse`. The visualization highlights the growth trajectory of deaths across states without distinguishing them, showing overall pandemic impact.

Jul 11, 2021

Loading thumbnail…

Scatter Plot with Species

This interactive scatter plot displays the Iris dataset, allowing users to compare measurements of sepal and petal dimensions across flower species. The visualization features dropdown menus for selecting which quantitative attributes to plot on the x and y axes. Built with D3 v6, it uses reusable chart functions and the selection.join pattern to smoothly transition circles between configurations, with axes animating alongside. The scatter plot supports both linear and point scales, adapting to categorical or quantitative data types.

Jul 11, 2021

Loading thumbnail…

Learning svg with javascript

This example renders 100 horizontal rectangles that span the full window width, each stacked at 20-pixel intervals. The rectangles are drawn as SVG elements using D3’s `select`, `join`, and attribute setters, with a `mask` attribute referencing a `circle-mask` defined elsewhere. Data is generated programmatically via `Array.from`, mapping index values to `y` positions and fixed widths and heights. The code demonstrates a minimal React-free workflow, appending an SVG to the body and sizing it to `window.innerWidth` and `window.innerHeight`.

Jul 7, 2021