Nicolas MacFlanigan

@MacFlanigan·6 public vizzes

Temperature in SF Line Chart

This line chart displays temperatures recorded hourly in San Francisco over a week, highlighting daily fluctuations and a general warming trend. The visualization uses D3 scales to map time and temperature data to SVG coordinates, with a basis curve smoothing the line path. Axis grids and labels are added using D3's `axisBottom` and `axisLeft` functions, while the data is loaded from a CSV file.

Nov 15, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v6 to load CSV data, scales the axes with `scaleLinear`, and renders the plot as SVG circles. Axis ticks are styled with grid lines using `tickSize`, and the chart includes labeled axes and a title. The data is fetched from a remote CSV file and parsed before rendering.

Nov 15, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each country positioned along the y-axis and its population on the x-axis. The code loads data from a CSV file using `d3.csv`, scales the x-axis with `d3.scaleLinear` and the y-axis with `d3.scalePoint`, and renders circles as SVG elements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, including customized tick formatting to abbreviate large numbers with the `d3.format` function.

Nov 15, 2020

Loading thumbnail…

Customizing axes

A horizontal bar chart displays the top ten most populous countries, with China leading and France last. The code uses d3.csv to load population data, d3.scaleLinear for the x-axis, and d3.scaleBand for the y-axis. Custom axes are built with d3.axisBottom and d3.axisLeft, formatting population values in billions via d3.format, while removing default domain lines and adding custom labels in SVG.

Nov 15, 2020

Loading thumbnail…

D3 Barchart

This bar chart displays population figures for ten countries, from China and India down to France, using horizontal bars scaled by population size. The visualization is built with D3 v6, loading data from a CSV file and rendering vector graphics as SVG. It uses `d3.csv`, `scaleLinear`, and `scaleBand` to map population values and country names to bar lengths and positions, with `axisLeft` and `axisBottom` providing the chart’s axes.

Nov 15, 2020

Loading thumbnail…

D3 Face

This example shows a stylized, animated face built as an SVG graphic. A yellow circle forms the head, with black circles for eyes, rectangular eyebrows, a nose, and an arc-based mouth. The right eyebrow repeatedly moves up and down using chained `transition.attr` calls. The visualization is constructed with D3 v6 selection methods and the `arc` generator, drawing all shapes in a coordinate system centered via an SVG group transform.

Nov 15, 2020