My first D3 map showing my travel across the US. This visualization was built by modifying choropleth example code by Scott Murray, tooltip example code by Malcolm Maclean, and legend code example by Mike Bostock.
| package com.dummy.dummydata.filter; | |
| import com.dummy.dummydata.pojo.*; | |
| import com.google.gson.Gson; | |
| import com.netflix.servo.jsr166e.ThreadLocalRandom; | |
| import com.netflix.zuul.ZuulFilter; | |
| import com.netflix.zuul.context.RequestContext; | |
| import org.springframework.stereotype.Component; | |
| import org.springframework.util.StreamUtils; |
| import org.springframework.beans.factory.annotation.Autowired; | |
| import org.springframework.boot.autoconfigure.web.servlet.error.AbstractErrorController; | |
| import org.springframework.boot.autoconfigure.web.servlet.error.ErrorViewResolver; | |
| import org.springframework.boot.web.servlet.error.ErrorAttributes; | |
| import org.springframework.boot.web.servlet.error.ErrorController; | |
| import org.springframework.http.HttpStatus; | |
| import org.springframework.http.ResponseEntity; | |
| import org.springframework.web.bind.annotation.RequestMapping; | |
| import org.springframework.web.bind.annotation.RestController; |
| Aardvark | |
| Aardwolf | |
| African Buffalo | |
| African Elephant | |
| African Leopard | |
| Albatross | |
| Alligator | |
| Alpaca | |
| Alpaca | |
| American Buffalo (bison) |
| <!DOCTYPE html> | |
| <head> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| flex-direction: column; | |
| } |
CATF44LT7C-eyJsaWNlbnNlSWQiOiJDQVRGNDRMVDdDIiwibGljZW5zZWVOYW1lIjoiVmxhZGlzbGF2IEtvdmFsZW5rbyIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiJGb3IgZWR1Y2F0aW9uYWwgdXNlIG9ubHkiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IklJIiwicGFpZFVwVG8iOiIyMDIwLTAxLTA4In0seyJjb2RlIjoiQUMiLCJwYWlkVXBUbyI6IjIwMjAtMDEtMDgifSx7ImNvZGUiOiJEUE4iLCJwYWlkVXBUbyI6IjIwMjAtMDEtMDgifSx7ImNvZGUiOiJQUyIsInBhaWRVcFRvIjoiMjAyMC0wMS0wOCJ9LHsiY29kZSI6IkdPIiwicGFpZFVwVG8iOiIyMDIwLTAxLTA4In0seyJjb2RlIjoiRE0iLCJwYWlkVXBUbyI6IjIwMjAtMDEtMDgifSx7ImNvZGUiOiJDTCIsInBhaWRVcFRvIjoiMjAyMC0wMS0wOCJ9LHsiY29kZSI6IlJTMCIsInBhaWRVcFRvIjoiMjAyMC0wMS0wOCJ9LHsiY29kZSI6IlJDIiwicGFpZFVwVG8iOiIyMDIwLTAxLTA4In0seyJjb2RlIjoiUkQiLCJwYWlkVXBUbyI6IjIwMjAtMDEtMDgifSx7ImNvZGUiOiJQQyIsInBhaWRVcFRvIjoiMjAyMC0wMS0wOCJ9LHsiY29kZSI6IlJNIiwicGFpZFVwVG8iOiIyMDIwLTAxLTA4In0seyJjb2RlIjoiV1MiLCJwYWlkVXBUbyI6IjIwMjAtMDEtMDgifSx7ImNvZGUiOiJEQiIsI
| license: mit |
| <!DOCTYPE html> | |
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; |
| const fetchMachine = Machine({ | |
| id: 'fetch', | |
| initial: 'incomplete', | |
| context: { | |
| retries: 0 | |
| }, | |
| states: { | |
| incomplete: { | |
| on: { | |
| COMPLETE_ORDER: 'pendingPayment' |