Boris97929500

@Boris97929500·7 public vizzes

Shapes and Colors with SVG and CSS

A single yellow circle sits centered on a blank SVG canvas. The example demonstrates fundamental SVG shape creation and styling using D3 v5, where the circle's radius, x and y coordinates, and fill color are set through chained attribute methods. The code imports the `select` function from D3 and appends the circle element directly to the SVG container. CSS resets the page margin and hides overflow, while the fixed 960×1000 SVG viewport holds the static geometric figure.

Oct 25, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, using circles positioned along a horizontal linear scale and a vertical band scale. Each circle’s radius matches half the band height, visually encoding population magnitude. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, with SVG rendering. Data originates from the 2018 United Nations World Population Prospects estimate, loaded from `data.csv` and formatted with tick labels that abbreviate large numbers.

Oct 23, 2020

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. The visualization emphasizes axis customization, building on a basic bar chart example. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.csv to load the data. Each bar’s width is proportional to population, with a margin applied via an SVG group element, and the chart is rendered as SVG.

Oct 23, 2020

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to render a population bar chart from a CSV file, displaying country names alongside their populations in thousands. The SVG visualization applies scaleLinear to map data values, appending rectangles of fixed width and height for each entry. The code loads the data with d3.csv, converts population values numerically, and binds them to SVG elements. The final rendering produces a simple, static representation of the dataset without interactive features.

Oct 22, 2020

Loading thumbnail…

Lets make a face with D3.js

This example displays a bar chart of the world’s most populous countries, using the population data from `data.csv`. The visualization renders a single large rectangle for each country, with the rectangle’s width and height fixed at 300 pixels. The code loads the CSV with `d3.csv`, converts the population values to numbers, and appends SVG `rect` elements using `select('svg')` and `selectAll('rect').data(data).enter().append`.

Oct 22, 2020

Loading thumbnail…

Lets make a face with D3.js

This D3.js visualization presents a bar chart of global populations for ten countries, with each square bar sized proportionally to its population value from the provided CSV data. The SVG-based example uses D3 v5’s `select` and `csv` methods to load the data and append rectangles measuring 300 by 300 pixels, though the bars are not scaled to the data values. The visualization is static, showing raw population counts processed into thousands, with the SVG canvas set to 960 by 500 pixels.

Oct 22, 2020

Loading thumbnail…

Lets make a face with D3.js

A smiling yellow face composed of SVG shapes is built from a circle head, two eyes, eyebrows, and an arc-based mouth. The right eyebrow repeatedly animates upward and downward using D3's `transition` with a chained `on("end")` callback to loop indefinitely. The example uses D3 v5's `select`, `arc`, and `attr` to position elements relative to a centered group, with the face drawn at a fixed 960×500 viewport size.

Oct 21, 2020