danjaruss

@danjaruss·7 public vizzes

D3 Stuff:SF Temp

This visualization displays a scatter plot of automobile data, plotting miles per gallon (mpg) against vehicle weight for various car models, with each point representing a single vehicle. The plot uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct the axes, with circles styled via CSS. The data originates from the auto-mpg dataset, loaded via `d3.csv`. Axis ticks are formatted using `format(".3r")`, and the plot includes a text label reading "Countries" despite the automotive data.

Oct 3, 2019

Loading thumbnail…

D3 Stuff:Cars Scatterplot

This scatterplot visualizes country-level data, plotting each nation as a circle based on its coverage value against another measured metric. The D3.js v5 code loads data from a CSV file, uses linear scales to map values to x and y coordinates, and renders the circles within an SVG container. The visualization includes axes, axis labels, and a legend, with styling applied through CSS to control circle opacity and appearance.

Oct 3, 2019

Loading thumbnail…

D3 Stuff:Scatterplot

This scatterplot displays the percentage of population covered by health services across various countries, with each blue circle positioned along a linear coverage scale on the x-axis and a point scale of country names on the y-axis. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to render an SVG, pulling data from a local CSV file. Grid lines extend from the y-axis, and the chart includes a bottom axis with formatted numeric ticks.

Oct 3, 2019

Loading thumbnail…

D3 Stuff:Axes

A bar chart displays the percentage of skilled birth attendance coverage across countries, with the y-axis listing country names and the x-axis plotting coverage values up to the maximum. Using d3.csv, the chart loads data from a CSV file, then applies d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The bars are rendered as SVG rectangles, with d3.axisLeft and d3.axisBottom formatting ticks, while d3.format shortens tick labels. The chart removes axis domain lines for the categorical y-axis.

Oct 3, 2019

Loading thumbnail…

D3 Stuff

This visualization displays the percentage of population with improved drinking water coverage for selected countries, using a horizontal bar chart where bar length represents coverage percentage. The chart employs D3 v5 with scales, specifically `scaleLinear` for the x-axis measuring coverage values and `scaleBand` for the categorical y-axis listing country names. Data is loaded from a CSV file using `csv`, with the coverage field parsed as numbers. SVG rectangles are bound to the dataset, and axes are generated with `axisLeft` and `axisBottom`.

Oct 2, 2019

Loading thumbnail…

D3 Stuff

A stylized face rendered as orange SVG shapes, built entirely with D3 v5’s selection API (`d3.select`). It shows a static circle head with fixed eyes and mouth, plus animated eyebrows that slide down and back up over four seconds via chained `transition().duration(2000)` calls. The mouth uses D3’s `arc` path generator, and all coordinates derive from the SVG’s width and height attributes. Data is absent; the example demonstrates basic layout, animation, and geometric path construction.

Oct 2, 2019

Loading thumbnail…

Untitled

A simple HTML page presents a static list of three used cars with their model years and prices. The data is hardcoded directly into the markup as list items, with no JavaScript or external visualization library. The page links to a separate `styles.css` file that enlarges the font size, and includes a basic heading. No charts, interactive elements, or dynamic data-binding mechanisms are present in the provided code.

Oct 2, 2019