Daniel Prevoznik

@dprevoznik·6 public vizzes

Making a Vertical Bar Chart

This gallery example shows a vertical bar chart of population data for ten countries, with the bars rendered in steel blue against axes labeled with country names and population counts. The chart is built using D3 v5, employing `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and axis generators `axisBottom`, `axisLeft`, and `axisRight`. Data is loaded from a CSV file and scaled by a factor of 1000 before rendering as SVG rectangles within a 960x500 viewport.

May 5, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3.js v5 to load CSV data, create linear scales, and render SVG circles with red, semi-transparent fill. Axis labels and a title are included through D3's axis components and SVG text elements. The chart employs square-root-free linear scaling with nice tick values, and the data is cleaned by converting string values to numeric types before rendering.

May 5, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each country positioned along the y-axis and its population represented by the x-axis position. The chart is rendered as an SVG using D3 v5, employing `scaleLinear` for the population axis and `scalePoint` for the categorical country axis. Data is loaded from a CSV file via `csv`, with tick formatting applied through `format`. Grid lines are drawn using `tickSize` on both axes.

May 5, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top ten most populous countries, using horizontal bars ordered by country name. The code uses D3 v5’s `scaleBand` and `scaleLinear` to map data, while `axisBottom` and `axisLeft` generate the axes with custom tick formatting via `d3.format` to abbreviate large numbers. The y-axis grid lines are removed, and the chart is rendered as SVG with styling from CSS.

May 4, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the populations of the ten most populous countries, with country names on the y-axis and population values on the x-axis. It uses D3 v5’s `scaleLinear` and `scaleBand` to map data to pixel positions, `axisLeft` and `axisBottom` for ticks, and SVG `rect` elements filled with steelblue. The data is loaded from a local CSV file via `csv`, with population values multiplied by 1000 to reflect actual counts.

May 1, 2020

Loading thumbnail…

Let's make a face with D3.js!

A playful D3.js example builds a cartoon face from basic SVG shapes, including a red circle for the head, eyes, eyebrows, a mouth, and a beard. The code uses d3.arc to generate the mouth and beard paths, and d3.transition with a repeating loop to animate the eyebrows up and down while rotating them slightly. All elements are positioned relative to the SVG center using transform attributes, and the animation runs continuously via a recursive repeat function.

Apr 30, 2020