Hernanls

@Hernanls·4 public vizzes

Selecting a Year on a Line Chart

Lines show U.N. population estimates and projections by global region from 1950 to 2100, colored with a categorical scale. Hovering over the chart updates a vertical line marking the selected year, and the visualization redraws accordingly. The code uses d3.csv, d3.nest, d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom to render SVG paths and axes. A legend built with d3.scaleOrdinal and custom colorLegend.js shows region colors.

Mar 1, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, rendering each vehicle as a semi-transparent red circle. The code uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom to draw gridlines and tick labels, and appends SVG circles positioned via the scaled values. It loads data through a fetch-based authentication call to an external API before parsing numeric fields and rendering the chart with margin-based layout and custom axis labels.

Feb 24, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows that rise and fall. The code constructs the face using SVG primitives—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. D3’s `select`, `attr`, and `transition` APIs handle DOM creation and the repeated eyebrow movement. The entire composition is centered within an SVG using a group transform, with eye spacing and offsets defined as constants. The animation runs on page load via chained transitions.

Feb 23, 2020

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile acceleration against horsepower, with tooltips revealing car names. Built using the Vega-Lite API, the visualization dynamically sizes to the browser window and applies custom styling for dark axis labels and green tick marks. Data is loaded from a CSV file via d3.csv, and the plot is rendered through Vega’s SVG renderer with tooltip support from vega-tooltip. The code leverages vl.markPoint, vl.x(), and vl.y() to define the encoding, showcasing a template for rapid declarative visualization development.

Feb 17, 2020