Dan Henri

@biskwikman·6 public vizzes

Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars, with each semi-transparent pink circle representing a vehicle. The SVG chart uses D3 v5’s `csv` to load auto-mpg data, converted to numbers before rendering. Axes are built with `scaleLinear`, `axisBottom`, and `axisLeft`, while grid lines are created via tick sizes. Labels and a title are added as SVG text elements, with styling controlled by CSS classes.

Oct 16, 2018

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the ten most populous countries, with values reformatted from raw numbers into readable abbreviations (e.g., "1.42B"). Custom axis styling removes default domain lines and tick marks, adds a centered "Population" label, and applies a large, muted color palette to text and gridlines. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names, `axisBottom` and `axisLeft` for axes, and `csv` to load the data, which is multiplied by 1000 during preprocessing. The chart is rendered as SVG with rectangles filled in steel blue.

Oct 2, 2018

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, using a bar’s length to encode each country’s population value and a band scale for country names along the y-axis. The chart is rendered as SVG with D3 v5, loading data from a CSV file via `d3.csv` and scaling the population values by 1000. Axes are created with `d3.axisLeft` and `d3.axisBottom`, while linear and band scales (`d3.scaleLinear`, `d3.scaleBand`) position the bars. The bars use a fixed steelblue fill, with margins applied to the plotting area.

Oct 2, 2018

Loading thumbnail…

Making a Bar Chart (delete)

This example shows a horizontal bar chart ranking the population of ten countries, from China to Mexico, based on data loaded from a CSV file. The visualization uses D3 v5 modules such as `csv`, `scaleLinear`, `scaleBand`, and `axisLeft` to map population values to bar widths and country names to vertical positions. The bars are rendered as SVG rectangles inside a group element, with margins applied to the chart area. The data is parsed and converted to numeric values by multiplying the population figures by 1000.

Oct 1, 2018

Loading thumbnail…

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

Sep 30, 2018

Loading thumbnail…

Shapes With SVG and CSS

This example shows how to combine SVG shape elements with CSS styling to create a small composition of circles, rectangles, a line, and a path. The code directly embeds the shapes in an `index.html` file, using an inline `<svg>` element with a `scale` transform. Separate rules in `styles.css` apply the black stroke and width to all elements within a `.lines` group, and a darker stroke with rounded joins specifically to the group’s path. The SVG `fill`, `stroke`, and `stroke-width` attributes are also set directly on the elements to control color and outline.

Sep 28, 2018