evsjg

@evsjg·5 public vizzes

scatterplot

This scatterplot displays the population of four countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization loads data from a CSV file using `d3.csv`, then applies `scaleLinear` and `scaleBand` to map values to screen coordinates. Axis ticks are generated with `axisLeft` and `axisBottom`, with tick labels formatted using `d3.format` to abbreviate large numbers. The chart is rendered as an SVG, with bars styled via `rect` elements and a title added as SVG text.

Oct 11, 2020

Loading thumbnail…

bar graph v2

A bar graph displays population estimates for four countries, sourced from a local CSV and rendered as SVG. The visualization maps population to horizontal bar length and country names to vertical positions, using a linear scale and a band scale. It is built with D3 v6, employing functions like `select`, `csv`, `scaleLinear`, `scaleBand`, and the `axisLeft` and `axisBottom` helpers. The chart includes styled tick marks, a title, and an axis label, with the population axis formatted in billions.

Oct 11, 2020

Loading thumbnail…

bar graph

A horizontal bar graph displays population counts for four countries using D3 v6. The visualization renders as SVG, with steelblue bars representing each nation's population, sorted alphabetically by country name. The chart reads population data from a CSV file, multiplies the values by 1000, and uses D3's `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Axes are generated with `axisLeft` and `axisBottom`, while the bar rectangles are appended dynamically to the SVG group.

Oct 8, 2020

Loading thumbnail…

streamgraph test

A streamgraph displays three data series (AR, DJ, TP) as stacked, colored layers over time, using a silhouette offset to center the bands. Built with React and D3 v2, it loads CSV data and renders as SVG paths with animated transitions. The visualization includes axis labels, hover tooltips showing exact values, and mouse-following vertical guide lines. It uses d3.layout.stack, d3.svg.area, d3.time.scale, and d3.svg.axis with cardinal interpolation.

Oct 8, 2020

Loading thumbnail…

D3.js intro!!

This example creates a cheerful smiley face entirely with SVG shapes inside a React application. The visualization uses D3 version 6 to append a large yellow circle for the face, two smaller black circles for asymmetrical eyes, and a curved path for the mouth. The mouth is generated using D3’s `arc()` function, which constructs an annular sector path. The code explicitly sets SVG attributes like `fill`, `stroke`, and `transform` to position and style each geometric element on a 960 by 500 canvas.

Oct 5, 2020