Fernando Godoy

@g1234odoy·4 public vizzes

Let's make a face with D3.js!

A D3.js selection demonstrates dynamic data binding by rendering fruit as SVG circles that appear, disappear, and change color. The data array starts with five apples, then removes one circle per second for three seconds, and finally replaces the first fruit with a lemon. The `data()`, `enter()`, and `exit()` methods manage the join, while `scaleOrdinal` maps fruit types to fill colors. The example uses `select`, `range`, and `attr` to manipulate the SVG canvas.

Aug 19, 2019

Loading thumbnail…

Cars

This visualization displays the temperature in San Francisco over time, with a line path and circular points representing the data. The chart uses D3 v5 to load CSV data from a remote source and render an SVG with time-scaled x-axis and linear y-axis. It employs `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for tick marks, and the `line` generator to draw the trend line. The circular markers use `steelblue` fill, and the line is `maroon`.

Aug 16, 2019

Loading thumbnail…

Cars

This example shows the relationship between horsepower and weight for a dataset of cars, with each car represented as a red, semi-transparent circle. The scatterplot uses D3 v5’s `scaleLinear` to map the data to SVG coordinates, with axes generated by `axisBottom` and `axisLeft`. It loads CSV data from a remote URL, parses numeric fields, and renders circles positioned via `xScale` and `yScale`. The chart includes custom axis labels, a title, and tick formatting using D3’s `format` with a custom unit replacement.

Aug 15, 2019

Loading thumbnail…

Let's make a face with D3.js!

This bar chart visualizes the populations of the ten most populous countries, with each bar paired with a steelblue circle at its end. The example uses D3.js v5 to load CSV data and render an SVG, employing `scaleLinear` for the x-axis, `scalePoint` for the categorical y-axis, and `axisLeft` and `axisBottom` for gridlines and tick labels. The axis tick format converts numbers to billions using D3's `format`.

Aug 14, 2019