Skip to main content
Log in
N

nicfavfar

@nicfavfar·8 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository Auto MPG dataset, with dropdown menus letting users select which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the axes, while the scatterPlot module animates circles with a transition that delays each point's arrival by 10 milliseconds. SVG rendering with semi-transparent red circles reveals data density, and the dropdownMenu component dynamically rebuilds options on each selection.

May 21, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for tick marks. A color legend using `scaleOrdinal` illustrates car origins. The chart includes axis labels, gridlines, and a title, with circles positioned via `xScale` and `yScale` based on the mapped data values.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This visualization displays a scatter plot of cars, showing horsepower on the x-axis and weight on the y-axis, with each circle representing an individual vehicle. The plot uses d3.scaleLinear and d3.axisBottom/axisLeft to construct the chart. The SVG rendering includes a title, axis labels, and colored circles with opacity. Data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via d3.csv. The code imports d3.scaleOrdinal and d3.interpolateRainbow for potential color encoding, though circles appear red in the current styling.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This visualization displays a scatter plot of cars, showing horsepower on the x-axis and weight on the y-axis, with each circle representing an individual vehicle. The plot uses d3.scaleLinear and d3.axisBottom/axisLeft to construct the chart. The SVG rendering includes a title, axis labels, and colored circles with opacity. Data comes from the UCI Machine Learning Repository's Auto MPG dataset, loaded via d3.csv. The code imports d3.scaleOrdinal and d3.interpolateRainbow for potential color encoding, though circles appear red in the current styling.

May 14, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower on the x-axis and weight on the y-axis for individual car models. Each red, semi-transparent circle represents a car, with a legend on the right positioning origins. The visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load and render the data, with an SVG output. The chart includes labeled axes and a title, though the y-axis label incorrectly reads “Name” instead of “Weight.”

May 14, 2019
Loading thumbnail…

Customizing Axes

This visualization displays the most-watched Super Bowls, ranking teams by viewer counts from the provided CSV data. It uses D3 v5’s `scaleLinear` for the horizontal axis and `scaleBand` for vertical categories, with custom formatting via `format('.3s')` to abbreviate numbers. The chart builds on a prior bar chart example, highlighting axis customization through `axisBottom` and `axisLeft`, removing default domain lines, and styling tick marks, labels, and the title with CSS.

May 7, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It emphasizes axis customization, including formatted tick labels (e.g., “1.42B”), horizontal grid lines, and a custom axis label, all rendered as SVG. The code uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and loads data from a CSV file via `csv()`. Population values are multiplied by 1,000 to reflect actual figures.

May 7, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

May 7, 2019