vsalas20

@vsalas20·5 public vizzes

Bowl o' Fruit - General Update Pattern

Five apples appear as circles in an SVG bowl, then one is removed after a second, and a middle apple converts into a lemon after two seconds. The example demonstrates the general update pattern for dynamic data. It uses d3.v5's selection methods, including `enter`, `merge`, `exit`, and `transition`, with ordinal scales for color and radius, and SVG elements for rendering.

Nov 30, 2019

Loading thumbnail…

Let's make a face with D3.js, bitches!

A smiling face built from SVG shapes is drawn with D3.js v5. The yellow head, black eyes, and rectangular eyebrows are positioned using absolute coordinates in a 960×500 viewport. The left eyebrow demonstrates an animated sequence by chaining four `transition().duration(400)` calls that move it up and down vertically. The example uses D3’s selection API (`select`, `append`, `attr`) to create and style the elements, with no data binding or scales involved.

Nov 29, 2019

Loading thumbnail…

Scatter Plot Mothafockas

This scatter plot displays the population of each continent in 2018, with circles plotted along a linear population scale and a point-based categorical axis for continents. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Population values from the CSV are formatted with abbreviations (e.g., “B” for billions), and grid lines extend across the plot. The chart also includes axis labels and a title, styled with custom CSS for fonts and circle transparency.

Nov 29, 2019

Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot displays the relationship between a car’s fuel efficiency (MPG) and its horsepower, using data from a CSV file of auto-mpg measurements. Each circle represents a data point, with position determined by d3.scaleLinear scales for both axes. The visualization includes labeled axes and gridlines, with d3.axisBottom and d3.axisLeft providing ticks. The SVG rendering uses D3 v5 to bind data, append circles, and apply CSS styling for opacity, while the title reflects the dataset’s context.

Nov 29, 2019

Loading thumbnail…

Bar charts time

This example shows the population of each continent in 2018 using horizontal bar charts, drawn as SVG rectangles with a blue fill and pink stroke. The bars are ordered by continent name and scaled linearly by population, with a total population axis label at the bottom. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`, reading data from `data.csv`. The chart includes a large title text and gridlines generated by the axis tick marks.

Nov 29, 2019