Nathion

@Nathion·3 public vizzes

Mass School District Boundaries

This example displays the school district boundaries of Massachusetts as an SVG map. The visualization uses a `geoIdentity` projection with `reflectY(true)` to correctly orient the geographic data, and `geoPath` to render the district polygons. Built with React and D3 v5, the map loads TopoJSON data from a local file and converts it to GeoJSON using the TopoJSON library's `feature` function. The map uses a gray fill with teal strokes for the district boundaries.

Oct 27, 2020

Loading thumbnail…

World Map

This example shows a world map rendered as a series of filled country paths. It loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON using the `feature` function from topojson, and draws it with D3’s `geoIdentity` projection and `geoPath` in SVG. The visualization is built with React components, displaying each country as a distinct path with stroke styling.

Oct 27, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendered as a smooth, natural curve in a teal stroke. The chart employs React components to structure the visualization, with D3 v5 functions such as `scaleTime`, `scaleLinear`, `line`, and `curveNatural` for coordinate mapping and path generation. Axes are drawn using custom SVG tick components, while Poppins typography and muted gray color styling give the presentation a refined aesthetic.

Oct 27, 2020