marisayumg

@marisayumg·4 public vizzes

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It builds on a prior bar chart example, adding customized axis styling through D3 v5 APIs such as `d3.csv` for data loading and `d3.select` for SVG manipulation. The chart uses SVG rendering with styled tick lines, tick labels, an axis label, and a title, all formatted via CSS classes. The data is loaded from a local CSV file containing country names and population figures.

Jun 3, 2020

Loading thumbnail…

Bar Chart

This bar chart visualizes population data for ten countries, sourced from a CSV file that pairs country names with their population figures. The code uses the d3.csv function to load the data and then prepares to render it with D3 v5. The visualization is built within an SVG container, with the chart’s dimensions read directly from the SVG attributes. While the current code logs the parsed data to the console, the bar chart rendering itself depends on the bundled JavaScript referenced in the HTML.

Jun 3, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering using HTML and CSS. It displays a blue circle positioned at the center of the canvas and a square rectangle offset to the right, both defined directly in the markup. The visualization relies on native SVG elements—`circle` and `rect`—within an `<svg>` container, with styling handled by an external stylesheet. The CSS file applies global reset rules and hides overflow, while the SVG attributes control each shape’s geometry, position, and fill color. No JavaScript libraries or data sources are involved; the rendering is purely static SVG.

Jun 3, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, demonstrating the minimal structure required to render content in a web browser. The code consists of a basic HTML document with inline CSS that sets the body’s text alignment and font size. It relies solely on standard HTML elements and CSS styling, without any external libraries or JavaScript. The page serves as a starting point for building more complex visualizations in a plain HTML environment.

Jun 2, 2020