BasharAlFattal

@BasharAlFattal·4 public vizzes

Fork of map of epa data sites

This map plots EPA air quality monitoring sites across the United States, with each site represented by a circle at its geographic coordinates. The visualization uses `d3.geoAlbersUsa` projection with `d3.geoPath` to render state boundaries and interiors as SVG paths, while React manages the component hierarchy. The site data, loaded via `d3.csv`, includes latitude, longitude, and AQI values, though the circle radius is currently fixed at 5 pixels despite a `scaleSqrt` being configured. The map uses a teal color scheme for states with light gray interior borders, and semi-transparent blue circles for the monitoring locations.

Feb 15, 2023

Loading thumbnail…

Fork of Australia Electorate Map

This visualization displays Australia’s federal electoral divisions, each filled with a categorical color based on its electoral division name. It removes the first feature from the TopoJSON data and uses D3 v5’s geoMercator projection and geoPath to render SVG paths. The code also labels each region with its name at the centroid using d3.geoPath.centroid, and styles state boundaries with CSS. Data comes from a local australia.json file containing TopoJSON geometry.

Feb 14, 2023

Loading thumbnail…

Fork of Fork of Hello

This example demonstrates a minimal D3.js setup that renders a personalized greeting message centered on the page. It uses D3’s `select` API from the `d3` module to target the `#message` div and set its text content via the `.text()` method. The message string comes from a local ES6 module (`myMessage.js`), while styling is applied through an external CSS file. The visualization highlights how to combine D3, local imports, and CSS within a simple web page.

Feb 14, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal VizHub integration, displaying the text "Hello VizHub!" centered on the page. It loads D3.js version 5 from a UNPKG CDN and uses the `select` function from `d3` to target the `#message` div, then sets its text content. The implementation also showcases local ES6 module imports, with the message string defined in a separate `myMessage.js` file.

Feb 14, 2023