https://github.com/empobla/marching-squares-isocontour
A data visualization demonstration on isocontour generation using the marching squares algorithm on hurricane Isabel's temperature and pressure data.
https://github.com/empobla/marching-squares-isocontour
d3 isocontours marching-squares
Last synced: 3 months ago
JSON representation
A data visualization demonstration on isocontour generation using the marching squares algorithm on hurricane Isabel's temperature and pressure data.
- Host: GitHub
- URL: https://github.com/empobla/marching-squares-isocontour
- Owner: empobla
- Created: 2023-01-28T04:20:02.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-28T04:35:38.000Z (over 2 years ago)
- Last Synced: 2025-01-14T10:35:39.535Z (4 months ago)
- Topics: d3, isocontours, marching-squares
- Language: JavaScript
- Homepage: https://emilioppv.com/projects#isocontour-generation-hurricane-isabel
- Size: 285 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Portfolio][moreinfo-shield]][moreinfo-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Isocontour Generation for Hurricane Isabel
A data visualization demonstration on isocontour generation using the marching squares algorithm on hurricane Isabel's temperature and pressure data.
Table of Contents
## About The Project
![Screen Shot][product-screenshot]
This is a Data Visualization demonstration using D3 for creating an isocontouring visualization. Isocontouring is a technique for visualizing 3D data on a 2D plane by drawing lines that connect points of equal value. The main objective of this demonstration is the correct application of the marching squares algorithm to create an isocontour visualization of the given data.
The demo takes in data that represents a grid of cells, each cell containing four values (NW, NE, SW, SE) that represent the values of the corners of the cell. It first uses the D3 library to create an SVG element and scales the data to fit within the SVG element. It also creates a group element for each data point and positions two defined scaling functions.
Then, the demo defines two main functions for isocontouring: `polarity` and `includesOutlineContour`. The `polarity` function takes in a cell and an isovalue and returns a 4-bit polarity signature as an integer between 0 and 15. Any bit that is 1 indicates that the associated cell corner is on or above the contour. The `includesOutlineContour` function takes in a cell and returns a boolean indicating whether the cell includes the current contour. Using these functions, in conjunction with hurricane Isabel's data and D3, the demo outputs the filled and layered isocontour maps onto SVGs on a website.
### Built With
[![JavaScript][Javascript]][Javascript-url]
[![D3][D3]][D3-url]
## Included Files
* `README.md` -- This file
* `index.html` -- Source HTML file
* `a11.js` -- Source JS file
* `d3.js` -- D3.js Library for creating visualizations
* `data.js` -- Source data JS file for Hurricane Isabel, provided by [Joshua A. Levine](mailto:[email protected])
## Getting Started
To get a local copy up and running follow these simple example steps.
**Note:** This project should be open only on desktop, as it is not optimized for mobile screens.
### Installation
1. Clone the repo
```sh
git clone https://github.com/empobla/Marching-Squares-Isocontour.git
```
2. Open `index.html` with a modern web browser (Chrome, Firefox, Safari, etc.)
## License
This project is property of Emilio Popovits Blake. All rights are reserved. Modification or redistribution of this code must have _explicit_ consent from the owner.
The source data for Hurricane Isabel was provided by Joshua A. Levine.
## Contact
Emilio Popovits Blake - [Contact](https://emilioppv.com/contact)
Joshua A. Levine - [Email](mailto:[email protected])
Project Link: [https://github.com/empobla/Marching-Squares-Isocontour](https://github.com/empobla/Marching-Squares-Isocontour)
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/emilio-popovits
[product-screenshot]: README/images/thumbnail.png
[JavaScript]: https://img.shields.io/badge/javascript-f7df1e?style=for-the-badge&logo=javascript&logoColor=000000
[JavaScript-url]: https://www.javascript.com/
[D3]: https://img.shields.io/badge/d3.js-ffffff?style=for-the-badge&logo=d3dotjs&logoColor=f9a03c
[D3-url]: https://www.javascript.com/
[moreinfo-url]: https://emilioppv.com/projects#isocontour-generation-hurricane-isabel
[moreinfo-shield]: https://img.shields.io/badge/more%20info-1b1f24?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAApVBMVEUbHyQbHyQbHyRnam2sra+vsbKys7Wsrq+goqQwNDgaHyQaIilbXWGChIZMT1OYmpwYQFoaICYXRF8WUHQZLjwvMzdwcnaztLZ1d3pcX2IaICUXTG0WUHMXS2sXSGcWT3MaKjcpLTFVWFyFh4lTVllvcnWpqqwYOEwZM0QXTW4XTnAaJS8lKS3IycoYPlYaIyt4e36rra60tba5urutr7BQU1cAAAB8HBV3AAAAAnRSTlOR/KrCyFQAAAABYktHRDZHv4jRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wEZCiUZVutNzgAAAGpJREFUCNdjYGBkggNGBmQeiM+EAjC5zCwsrGzsHJwQLhc3ExMPLxMfP5OAIBODkLCIqBi/uASHpJS0jCyDnLyCopIyh4qqmrqGphYDk5Q2WLGOrh63PsgoA0NDI2NDE1PsFqFw0RyJ6gUAuK4HVipJCoQAAAAuelRYdGRhdGU6Y3JlYXRlAAAImTMyMDLWNTDUNTINMTSwMja3MjLVNjCwMjAAAEFRBQlQZi6pAAAALnpUWHRkYXRlOm1vZGlmeQAACJkzMjAy1jUw1DUyDTE0sDI2tzIy1TYwsDIwAABBUQUJeVmGIQAAAABJRU5ErkJggg==