rohit181099

@rohit181099·3 public vizzes

HTML Starter

A minimal HTML page serves as a bare-bones starting point for web-based visualization projects. It loads a separate stylesheet and JavaScript file, displaying the text "Hello HTML" centered on the screen with a very large font size via CSS. The example uses no external visualization libraries, relying solely on plain HTML structure and CSS styling. This demonstrates the fundamental file setup needed before adding more complex interactive data visualizations, similar to a React starter but without any framework dependencies. The page’s simple body content and global text alignment highlight basic HTML and CSS integration.

Jan 17, 2020

Loading thumbnail…

Let's make a map with D.js

This example shows a basic world map rendered as light green SVG paths with black borders, using a Mercator projection. It loads world country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with the topojson `feature` method. The map is drawn using d3.geoPath and d3.geoMercator, with each country appended as an SVG path element. A hover effect defined in CSS changes the fill color to red, though no interaction logic is implemented in the JavaScript.

Jan 8, 2020

Loading thumbnail…

World Map

This interactive world map visualizes population data by country for 2018, using color and size to distinguish between regions with and without reported figures. The visualization employs a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with countries rendered as SVG paths. Population values are mapped to circle sizes using `d3.scaleSqrt`, and a size legend with tick marks displays the scale. Users can pan and zoom through `d3.zoom`, and hovering over a country reveals its population via a tooltip. Data comes from a CSV file joined to TopoJSON world atlas geometry.

Jan 7, 2020