enzo-dante

@enzo-dante·5 public vizzes

Scatter Plot

A scatter plot uses circular marks to display the population of the ten most populous countries, with values sourced from the World Population Prospect 2017. Built with D3 v5, the visualization encodes population on a linear x-axis and country names on a categorical y-axis. The code demonstrates D3's `scaleLinear`, `scalePoint`, `axisBottom`, `axisLeft`, `csv`, and `select` APIs, rendering an SVG with a styled title, axis labels, and tick marks.

Jul 11, 2019

Loading thumbnail…

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, with data from the World Population Prospect 2017. It uses d3.scaleLinear and d3.scaleBand to map population values and country names, while d3.axisLeft and d3.axisBottom render the axes with custom tick formatting that abbreviates large numbers. The SVG rendering includes gridlines via tickSize, removes axis domains and lines, and adds labels for the population axis and chart title, with all styling defined in external CSS.

Jul 11, 2019

Loading thumbnail…

Lets make a bar chart

This example displays a horizontal bar chart ranking the ten most populous countries, using a bar length to encode each country’s population. The visualization loads data from a CSV file and renders it as SVG rectangles. The code uses d3.csv, d3.scaleLinear, and d3.scaleBand from D3 v5 to map population values to pixel widths and country names to vertical positions. The population figures are multiplied by 1,000 during data preprocessing before the bars are drawn.

Jul 9, 2019

Loading thumbnail…

Making a bar chart

This example shows a bar chart of the populations of the ten most populous countries, sorted by size. It uses D3 v5 to select the SVG element and read its width and height attributes. The chart is rendered as an SVG, with data loaded from a CSV file containing country names and population figures. The visualization directly maps the population values to the length of each bar.

Jul 9, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how CSS can be used to style basic SVG shapes, showing circles, rectangles, lines, and a path within an SVG element. The HTML contains commented-out SVG markup, while the linked stylesheet applies global rules like removing body margins and hiding overflow, plus class-based styling for highlighted text and line elements with stroke colors and widths. The `.lines path` selector specifically colors the polyline a teal shade, and the `.highlighted` class sets text to red, though the main SVG content remains inactive due to being commented out.

Jul 9, 2019