{"componentChunkName":"component---narative-gatsby-theme-novela-src-templates-article-template-tsx","path":"/NecX-Using-neck-as-an-input-method","result":{"data":{"allSite":{"edges":[{"node":{"siteMetadata":{"name":"Aniket Handa"}}}]}},"pageContext":{"article":{"id":"61bcd4dc-9147-5284-974c-05dd192a9027","slug":"/NecX-Using-neck-as-an-input-method","secret":false,"title":"NecX - Using neck as an input method","author":"Aniket Handa","date":"2014","dateForSEO":"2014-04-28T00:00:00.000Z","timeToRead":4,"excerpt":"What if we hack into neural pass of the body which also provides vocal, movement and heart rate information?","canonical_url":null,"subscription":true,"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"NecX - Using neck as an input method\",\n  \"excerpt\": \"What if we hack into neural pass of the body which also provides vocal, movement and heart rate information?\",\n  \"date\": \"2014-04-28T00:00:00.000Z\",\n  \"category\": \"Physical Computing\",\n  \"tags\": [\"Arduino\", \"Signal Processing\", \"EMG sensor\", \"Gesture detection\", \"Machine Learning\"],\n  \"author\": \"Aniket Handa\",\n  \"hero\": \"./neck.jpg\",\n  \"links\": [{\n    \"label\": \"Website\",\n    \"link\": \"http://horseshoe477.github.io/\"\n  }]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"div\", {\n    style: {\n      \"height\": \"480px\"\n    }\n  }, mdx(\"iframe\", {\n    src: \"//player.vimeo.com/video/98090453?title=0&byline=0&portrait=0\",\n    width: \"100%\",\n    height: \"100%\",\n    frameBorder: \"0\",\n    webkitallowfullscreen: true,\n    mozallowfullscreen: true,\n    allowFullScreen: true\n  })), mdx(\"h2\", {\n    \"id\": \"introduction\"\n  }, \"Introduction\"), mdx(\"p\", null, \"Neck is one of such part of our body that densely packs tons of information. It is the neural pass of the body; it can move, give vocal data and provide heart rate information. We envision a device that can tap on this information and result in a novel input technique while also keeping a track on health data. The interaction can be fast enough enabling hands-free interaction while both hands are not accessible. In addition, it is possible to use this wearable device for health sensing, for example, monitoring the tiredness, heart rate or even muscle stress. It can take many forms, such by being part of the clothing collar or in a form of a pendant. It can also used as a accessibility device for special people who cannot move lower part of their body or people aging with disabilities.\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1280px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.171875%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAwb/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAFyezCyvpjAR//EABwQAAEEAwEAAAAAAAAAAAAAAAMAAQIREhMjMv/aAAgBAQABBQK+e52PkiyoMfVr/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BJ//EABoQAAICAwAAAAAAAAAAAAAAAAAQAhIRIVH/2gAIAQEABj8CK6rlSOr/xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhUXExQf/aAAgBAQABPyG2nKiOVuksfYvBFgvjNbhYHc//2gAMAwEAAgADAAAAEM8P/8QAFhEBAQEAAAAAAAAAAAAAAAAAARBB/9oACAEDAQE/EEwn/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERIf/aAAgBAgEBPxBbrIf/xAAdEAEBAAIBBQAAAAAAAAAAAAABEQAxIUFRYXGB/9oACAEBAAE/ECMabOmHfeUlDgB9uaxxPGMgDrub4yZYHSw82QM95//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/ed1980d20bcd918f2b2d143aec05b176/4b075/Fig1-reduce.webp 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/ed1980d20bcd918f2b2d143aec05b176/496ec/Fig1-reduce.jpg 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/ed1980d20bcd918f2b2d143aec05b176/496ec/Fig1-reduce.jpg\",\n    \"alt\": \"Fig1 reduce\",\n    \"title\": \"Fig1 reduce\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"Our current product is good at recognizing short neck gestures, it is always available with a \\u2018faster in\\u2019 and a \\u2018faster out\\u2019. Currently it detects basic gestures including up tilt, left tilt, and shaking. The device connects via Bluetooth and send sEMG data to the connected client device. The client then processes this data to recognize gestures.\"), mdx(\"h2\", {\n    \"id\": \"envision-necx\"\n  }, \"Envision NecX\"), mdx(\"p\", null, \"We envision NecX to be a wearable device that can take many forms, such by being part of the clothing collar or in a form of a pendant or a pillow. The interactions using neck might not be as socially awkward as by other wearables in the market. We also plan to focus on providing accessibility to special people who cannot move lower part of their body.\"), mdx(\"p\", null, \"For people aging with disabilities or with spinal cord injuries, their mobility is limited and their involvement to the environment is constrained. These limitations result from the environmental barriers that hinder their full participation in society and even their daily life. However, we think that such disability should not be tied to a person. NecX is made to help to overcome these barriers.\"), mdx(\"p\", null, \"Apart for using it as an aid to mobility of the elderly or with people suffering from spinal cord injuries, we also see this technology being used in Gaming, Eyes-free computing, and as a mobile phone peripheral for short interactions. It can used for more immersive gaming experience, monitoring neck muscle tension levels, perform hands-free interactions with mobile devices. We expect this wearable device can be used as a health monitoring tool and a hands-free input device. This device is capable of capturing the user\\u2019s heart rate and detecting muscle stress even when the head and neck is stationary; by simply perform a neck gestures, the user is able to pick up a call or change the volume of the songs while keep the phone in the pocket.\"), mdx(\"h2\", {\n    \"id\": \"our-approach\"\n  }, \"Our Approach\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1280px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.59375%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAADTklEQVQoz12TaUwTWxzFB0U/uEAImkIQWwG1oCjPKERrcMEGC+IG4kINIDyXp6EaYuIKBGOMIhJRcUEFWYJ+MELigoa4fJBEjYD4fLYIannPedhqLZ1S2pnOPd4ZiFFP8k/uPbn5/e+5CyOI4rfOK2XO+2uTuNbcTO7Fo5ucYeVy7uQMNZcb+4fd9OYNqE4yDKNISUmJ3ZWXN2nbjh2qJJ1u+jKtdizzu+hi79vGqyiJiURH9iYcXKNFZsxM7IkIR9rcWSIReJjNvQ106ai377qSIYqd8Ho/Wmy2jdTzVygUoT4+PkF0PIFWICMCfOf1epRp5pAHqxLJ1Ug1+Us5mayeqiQ7k5N4J8fB3Nt7XmreYTZn0gnQ78BLk/EAtUbX1tSMkkTHI+VyCwJv6e5GXVY6qVkYh+I50ciPjkJ8kALlRYWClJf3eCok4KvPfXrUNQjeiot4YTIahhP+GtnlcvGDbg8eFewlZxfPRUGCBjtjoqCNUOHZk8cycIDjZGDHvWY9UvUilq8Fe61+1zDQZ7iG4LQ77/R48D7fQE6HBiE60B9xAX7I0+lgev1aBroHXDLQVHhUb58QLv4Tokb3bI3hR8yfRWgiQfSCzc0ijRFh+DMkGMsCA1CQkYH21lYZ6HW7ZWBPabneMjFcfDA+GB1Tovcw86YFVJ8vT62pvby5quriltLS4xppm3zbqRL8Nz+O1M6MwtEwFXImh+LQhvXIXpogWFlWYg6dYXu7HptyRejS8PnO/e2M/7gxdpvro5ODLJa1VjJtWdn84/AIuDQLyA31NBSFKVGoUuJ0bCzW+AUIWeoZqD5cJAPbvlgzcLfZg1tN+ETE7dQaz34a7LP0DQF7eqzVjK3yDE/KjoArKya3tUuQHazACQpuTluFm1szhSs5Oag07D4nX4rRuAX0jKRi+/vzqDXGZrM8/2LlWI5z2Mzm9yWMs/k2726qx2BLI+lqqsPBjatx5+wxdDVcwt9FB4TnhQW4vG9/tQR82NKygOKK6cNu6/nwYYPkXa9/NTJjc7xvzOx435Cg+BGMI309P7AuHfbUVOJoqIKN+4pB+/9w7M8Hm5gk/KtNxLNFSy+MS0hQzouMVEmQp0ajb0ryikCNRuP3+8/7Dg83CIhmz8NFAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/4f7fb102584d6ada87b0b939c2483a12/4b075/Fig2.webp 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/4f7fb102584d6ada87b0b939c2483a12/9f341/Fig2.png 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4f7fb102584d6ada87b0b939c2483a12/9f341/Fig2.png\",\n    \"alt\": \"Fig2\",\n    \"title\": \"Fig2\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h3\", {\n    \"id\": \"semg\"\n  }, \"sEMG\"), mdx(\"p\", null, \"To enable a novel input device that also provides health monitoring and hands-free interaction, our system uses surface Electromyography (sEMG) to achieve such capabilities.  When muscle is stressed, a current issued from the brain flows through the muscle. By attaching electro pads to the target muscle (in our case, on both side of neck), the current will flow through the pads and will be picked by our sensor board. Our algorithm captures these signal variations when the muscle is in action and uses it for gesture detection and classification. Different from the previous study, we used only 2 channels of sEMG data to enable such functions. We believe reducing the number of channels can provide more flexibility in design a new form factor and also extend the power consumption.\"), mdx(\"h3\", {\n    \"id\": \"hardware\"\n  }, \"Hardware\"), mdx(\"p\", null, \"To measure the sEMG on the neck, we use the OLIMEXINO-328 and two SHIELD-EKG-EMG boards, each of which collects sEMG data from one side of the neck. Electrode pads are attached on the user\\u2019s neck; the red pad (positive) and black pad (negative) are instrumented on the side of neck and white pad (ground) is attached on the back of the neck. \"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1026px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"84.89278752436647%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAAE6klEQVQ4yx1T+0/TVxztH7BHMoVN1Kk4Bw4dD6EVnDAqqExRHuoUHJIpCy6oU5hiBshgMkGBIkiQAW6VPijQ0tJC6bdv+qDl/RaK4CMO3ddl4QeWfOtyz77xh3PPvcnNybmfcy7HubC62ud67pV0mhixWMG0SdoZtUrNWMz9jK5Xy2iUSsZsMDJjYzPMwMAI47ANMA67g3E63IxZTzF93UpG3SFhelVdjKFXw3DGX7x5M/J4BeW3BSgtLsDNnwtQW12B+tpq1NfcQlnxj9AoRBgcsMDY1wUr1QG7sQNmbQcolRRGjRgGVTPU0nqoZU3g3Kmq8NbcvYVrVzJJ/pUMcj03g9zI/5Zc/SGdRRq5nHOS3Ku8TES/FRFRUxFpF5aQ2ju5pDD/O1JZlkfKSy+Sil8ukpKC86SlvoBwhkfdXpfLAomokUiFlVBIBejqbIZM0gyqR4QuWS080xa8frWAqTEzJoZ70W+QwEjJ4RqwQa1sfXvPSLVjcswODgCvl13mHy+QkUED3E4Nlv98gpevljE9NQinrRtWCwWzxYKnzxbwdGkSz5ZGsPxiHvTrlxgZsmJx3oVFzzCeLE6Ds/Kv10v/s4KhETcZsPdgdtICqaQFqSnJ4HEjsHnTx/B59x3E743CMiv4aNKGXpWQdWPBk6U5jA5b8GjazsIJz9wwOKusw9X/gJlHM8Ru14PSq3HpQjb81vmBF/QZrifwUXUqFXkZaSi7UYzszDTweME4eJAPilJjatzBijkwN+vG/NwoOBKl3nv/jzacOJVOIqP2ICQ0FGFhIYgIDkFM4vfI+kmE3AuFKMzNw67QMMTyuODvCsMBbhisBg2mPWPwLI5jnuX5+TFw4g4c8p7LzsHZc2dJZuY3SEpORVBQMLb7+SGGux8nD6YjPeEoju6Lw7HYaCRGRyGWFYuNjoRTp4NbIsOgUoHZCdahZxKc5yvwTi39hYrqWpKUdBQ7P98JXx8f+HywFj5+2xG9KwY7Nm3FRt+1iN4dgX2RXMSFhyFt/z5oy6pAFZRCLxBgxmWDZ2EGnNSTmd6YuMPY7B9IAoJCkJZ6HKeTj2OD70cI3BKMIzw+vggMADcoAOkH+OCHB4MXHopwVrSprgEGnRZDg0a2EQ7MzrChcCO/9EZE7UdwBJ8kxH+F44knEM8/hA0b1mPjug/BC9iKrb4+2PaJP4JDg7AjwB8R27bgVOxuaNsa4DC2YdDaiYlRI6YmneAcPnbGm3mpGDn5VSQr5Riy2HmFh4Rj/fp12BMSiM1r3sena97D3kB/fM0NwuWEPRBkJUPbWAi3sQkuqxhDzi62PnpMjLPFltn/9spsL1HT8JBU/VqMggvnkcIOPiU0EDnxXJRnJKHkzBGUZadCVpMHnfQmrJpqWHpq0E81wtUvwrBLgZFBDVtyiq2NVMS0ChuISFhHpOL7RPzwHhGUXSW3ck6T+qtnSHtjEdF33ibdklKiEJcQuaiE9HSWE2NPLXFaW4mJEhKt5gGxmtoJ65JwVCox0Wrl6NO2g9KKYaJEMOl+R79eCIf5IRyGFnbfzP7fFijbBagsv4Y6QSHuVhehVVgHhfwBagQ30SFrYYNhn6ylepdN/bbXBlMfTenktIGS0Wa9jLYaWZg6aZtZTtstctppU9Iuh4blbtppV9MOm5p2Ofto94COPfe+ZTZt+n9/C5PRhWRT/gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/4a077270d046f5b2a2ea8de84090772a/40ee0/board.webp 1026w\"],\n    \"sizes\": \"(max-width: 1026px) 100vw, 1026px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/4a077270d046f5b2a2ea8de84090772a/61625/board.png 1026w\"],\n    \"sizes\": \"(max-width: 1026px) 100vw, 1026px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4a077270d046f5b2a2ea8de84090772a/61625/board.png\",\n    \"alt\": \"board\",\n    \"title\": \"board\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"540px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"116.1111111111111%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAGQABAQEAAwAAAAAAAAAAAAAAAAQCAQMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAfT53iWpAst6QpB//8QAGRABAQADAQAAAAAAAAAAAAAAAQIAAxES/9oACAEBAAEFAtt1nXwPTiKrYbhqSsj1N5//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAhEAABAwMEAwAAAAAAAAAAAAABABEhAhASEyIxQVFxkf/aAAgBAQAGPwI49crIFxYt8WnA9KoNDxKlbwD4qt//xAAcEAEAAgMAAwAAAAAAAAAAAAABABEhMUEQUWH/2gAIAQEAAT8hFzN0DtumJVJDElqquwdwWmWJnQ3XioL7Gk2S0LDA7fj4/9oADAMBAAIAAwAAABCQzzz/xAAXEQEBAQEAAAAAAAAAAAAAAAABESAh/9oACAEDAQE/ECJA7j//xAAXEQEAAwAAAAAAAAAAAAAAAAARICFB/9oACAECAQE/ELXIf//EAB4QAQACAgIDAQAAAAAAAAAAAAEAESExYXEQQVHB/9oACAEBAAE/EKJSlZt6hUqyHJPeIOlJLmNgaquyb0VnUc2gOobkWI21V+woBMjqX6PqAuQAw4T7yY68f//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/7eec26f0daa56814842790d895b1d571/be7f3/pad.webp 540w\"],\n    \"sizes\": \"(max-width: 540px) 100vw, 540px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/7eec26f0daa56814842790d895b1d571/1c34e/pad.jpg 540w\"],\n    \"sizes\": \"(max-width: 540px) 100vw, 540px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/7eec26f0daa56814842790d895b1d571/1c34e/pad.jpg\",\n    \"alt\": \"pad\",\n    \"title\": \"pad\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"Instrumenting the white pad behind the neck (i.e., at a neutral position) can reduce ambient noise. The Olimex-328 is an Arduino-based motherboard and has a 10-bit ADC on board. We sample the analog data at 256 Hz, which is sufficient for our use case as we expect a neck gesture should be relatively slow. Finally, the data are streamed to a laptop for gesture recognition through Bluetooth. To better understand the capability of Olimex-328, we simulated the circuit in MultiSim and verify that the board has a low pass filter with the cut-off frequency of 3.4 kHz (see Fig). We also designed a 3D-printing case for this prototype.\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1280px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"46.79687500000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECA//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHvNRKK/8QAFhAAAwAAAAAAAAAAAAAAAAAAACAh/9oACAEBAAEFAiL/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABkQAAIDAQAAAAAAAAAAAAAAABBRAAERIf/aAAgBAQABPyG9jdKH/9oADAMBAAIAAwAAABDvz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABwQAAICAgMAAAAAAAAAAAAAAAEREDEAQSFhcf/aAAgBAQABPxAwpLbwAivHs3O/Uf/Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/0788c42059edbe4e54a3aea3f7e71409/4b075/version-2-2.webp 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/0788c42059edbe4e54a3aea3f7e71409/496ec/version-2-2.jpg 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/0788c42059edbe4e54a3aea3f7e71409/496ec/version-2-2.jpg\",\n    \"alt\": \"version 2 2\",\n    \"title\": \"version 2 2\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1280px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"46.79687500000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAJABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdFhAr//xAAWEAADAAAAAAAAAAAAAAAAAAAAESD/2gAIAQEAAQUCHP8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhAAAwAAAAAAAAAAAAAAAAAAACAx/9oACAEBAAY/AiL/AP/EABgQAQADAQAAAAAAAAAAAAAAAAEAESAh/9oACAEBAAE/IZRXkz//2gAMAwEAAgADAAAAEDzP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQIBAT8Qp//EABkQAQADAQEAAAAAAAAAAAAAAAEAETEQUf/aAAgBAQABPxBQ2CTDQ7cp947z/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/9e8dd52eba6dc1e133adc3ce6dc82054/4b075/version-2-3.webp 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/9e8dd52eba6dc1e133adc3ce6dc82054/496ec/version-2-3.jpg 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/9e8dd52eba6dc1e133adc3ce6dc82054/496ec/version-2-3.jpg\",\n    \"alt\": \"version 2 3\",\n    \"title\": \"version 2 3\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"gesture-detection--classification\"\n  }, \"Gesture Detection & Classification\"), mdx(\"p\", null, \"As described earlier, any muscle movements on neck causes a current flowing through the electrode pads, which raises the output voltage from the Olimex-328 board. When muscle relaxes, the voltage drops to the baseline. Our first step is to identify signal variations, and to recognize an event of muscle excitation.\"), mdx(\"p\", null, \"The following figure shows the process of gesture segmentation:\"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1280px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50.31250000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEEAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHtLVk5QH//xAAZEAACAwEAAAAAAAAAAAAAAAABAgAREyD/2gAIAQEAAQUCYWM1gReP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAEGRICH/2gAIAQEABj8C6OjuP//EABwQAAICAgMAAAAAAAAAAAAAAAEhABEQMUFRkf/aAAgBAQABPyEFfbgwk2EW8qoesIWf/9oADAMBAAIAAwAAABATz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAABBB/9oACAECAQE/EKf/xAAcEAEBAAICAwAAAAAAAAAAAAABEQAhEFGBscH/2gAIAQEAAT8QvhhWw9YyOgiBo84qw17PuFWjDj//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/b4f3a24263a07209edeaf8ae420ce82b/4b075/gesture-detection.webp 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/b4f3a24263a07209edeaf8ae420ce82b/496ec/gesture-detection.jpg 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/b4f3a24263a07209edeaf8ae420ce82b/496ec/gesture-detection.jpg\",\n    \"alt\": \"gesture detection\",\n    \"title\": \"gesture detection\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"After an event is detected, features are extracted from the recognized segment. We chose various features for gesture classification: \"), mdx(\"div\", {\n    \"className\": \"Image__Small\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1280px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.59375000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMBAgQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB7StFBhIf/8QAGRABAAMBAQAAAAAAAAAAAAAAAQACMRES/9oACAEBAAEFAk9FqHTI7P/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAIDAAAAAAAAAAAAAAAAAAAgIUGR/9oACAEBAAY/ApL1f//EABsQAQACAgMAAAAAAAAAAAAAAAEAERAhMYHB/9oACAEBAAE/ITLfpqJHpNASqMRxP//aAAwDAQACAAMAAAAQc8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEAAwEBAQEAAAAAAAAAAAABABEhMWFBUf/aAAgBAQABPxAPspXbx8Za3YGFwr9gALoALiMStgz5OE//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/d55b0d30ec982b56ce53bd9f26527127/4b075/gesture-classification.webp 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/d55b0d30ec982b56ce53bd9f26527127/496ec/gesture-classification.jpg 1280w\"],\n    \"sizes\": \"(max-width: 1280px) 100vw, 1280px\",\n    \"type\": \"image/jpeg\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/d55b0d30ec982b56ce53bd9f26527127/496ec/gesture-classification.jpg\",\n    \"alt\": \"gesture classification\",\n    \"title\": \"gesture classification\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"The offline analysis described above shows the feasibility of using NecX to detect and classify neck gestures; we also want to demonstrate the ability for NecX to work in real-time. We implemented a real-time version of our system and designed a few prototype applications. In order for NecX to run in real-time, we modify the classifier to enhance the robustness against any possible noise. In the video figure, we showed the on-the-fly neck gestures recognition and used NecX to play Tetris and to detect heart rate and muscle stress. \"));\n}\n;\nMDXContent.isMDXComponent = true;","tags":["Arduino","Signal Processing","EMG sensor","Gesture detection","Machine Learning"],"links":[{"label":"Website","link":"http://horseshoe477.github.io/"}],"category":"Physical Computing","present":false,"noImage":false,"hero":{"full":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3wFH/8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQABBQJf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAFhABAQEAAAAAAAAAAAAAAAAAEQAg/9oACAEBAAE/IWc//9oADAMBAAIAAwAAABAzD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABgQAQEBAQEAAAAAAAAAAAAAAAERACCB/9oACAEBAAE/EEYCeXDS8f/Z","aspectRatio":1.5,"src":"/static/b51e9dc84800d572927801631b108e0e/6ce4c/neck.jpg","srcSet":"/static/b51e9dc84800d572927801631b108e0e/81a66/neck.jpg 236w,\n/static/b51e9dc84800d572927801631b108e0e/60b3d/neck.jpg 472w,\n/static/b51e9dc84800d572927801631b108e0e/6ce4c/neck.jpg 944w,\n/static/b51e9dc84800d572927801631b108e0e/150ec/neck.jpg 1200w","srcWebp":"/static/b51e9dc84800d572927801631b108e0e/99fbb/neck.webp","srcSetWebp":"/static/b51e9dc84800d572927801631b108e0e/77392/neck.webp 236w,\n/static/b51e9dc84800d572927801631b108e0e/1f177/neck.webp 472w,\n/static/b51e9dc84800d572927801631b108e0e/99fbb/neck.webp 944w,\n/static/b51e9dc84800d572927801631b108e0e/9000d/neck.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3wFH/8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQABBQJf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAFhABAQEAAAAAAAAAAAAAAAAAEQAg/9oACAEBAAE/IWc//9oADAMBAAIAAwAAABAzD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABgQAQEBAQEAAAAAAAAAAAAAAAERACCB/9oACAEBAAE/EEYCeXDS8f/Z","aspectRatio":1.5,"src":"/static/b51e9dc84800d572927801631b108e0e/150ec/neck.jpg","srcSet":"/static/b51e9dc84800d572927801631b108e0e/8cb53/neck.jpg 350w,\n/static/b51e9dc84800d572927801631b108e0e/867d5/neck.jpg 700w,\n/static/b51e9dc84800d572927801631b108e0e/150ec/neck.jpg 1200w","srcWebp":"/static/b51e9dc84800d572927801631b108e0e/9000d/neck.webp","srcSetWebp":"/static/b51e9dc84800d572927801631b108e0e/d0d48/neck.webp 350w,\n/static/b51e9dc84800d572927801631b108e0e/64998/neck.webp 700w,\n/static/b51e9dc84800d572927801631b108e0e/9000d/neck.webp 1200w","sizes":"(max-width: 1200px) 100vw, 1200px"},"narrow":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3wFH/8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQABBQJf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAFhABAQEAAAAAAAAAAAAAAAAAEQAg/9oACAEBAAE/IWc//9oADAMBAAIAAwAAABAzD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABgQAQEBAQEAAAAAAAAAAAAAAAERACCB/9oACAEBAAE/EEYCeXDS8f/Z","aspectRatio":1.5,"src":"/static/b51e9dc84800d572927801631b108e0e/1293c/neck.jpg","srcSet":"/static/b51e9dc84800d572927801631b108e0e/81141/neck.jpg 240w,\n/static/b51e9dc84800d572927801631b108e0e/11d7f/neck.jpg 480w,\n/static/b51e9dc84800d572927801631b108e0e/1293c/neck.jpg 960w,\n/static/b51e9dc84800d572927801631b108e0e/150ec/neck.jpg 1200w","srcWebp":"/static/b51e9dc84800d572927801631b108e0e/fcc10/neck.webp","srcSetWebp":"/static/b51e9dc84800d572927801631b108e0e/2b5a3/neck.webp 240w,\n/static/b51e9dc84800d572927801631b108e0e/35871/neck.webp 480w,\n/static/b51e9dc84800d572927801631b108e0e/fcc10/neck.webp 960w,\n/static/b51e9dc84800d572927801631b108e0e/9000d/neck.webp 1200w","sizes":"(max-width: 960px) 100vw, 960px"},"seo":{"src":"/static/b51e9dc84800d572927801631b108e0e/150ec/neck.jpg"}}},"authors":[{"authorsPage":true,"bio":"I'm Aniket Handa. I craft user experiences that blur the gap between humans and technology.\n","id":"cebebc26-b80b-5c45-b29b-fb56bd6b7b61","name":"Aniket Handa","featured":true,"social":[{"url":"https://github.com/atneik"},{"url":"https://twitter.com/anikethanda"},{"url":"https://instagram.com/_aniket"},{"url":"https://www.linkedin.com/in/anikethanda/"}],"slug":"/authors/Aniket-Handa","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUEAgP/xAAXAQEAAwAAAAAAAAAAAAAAAAACAAED/9oADAMBAAIQAxAAAAHdPoTQ6LhK8MQdNwR//8QAHRAAAgIBBQAAAAAAAAAAAAAAAgMAASIEERMhMf/aAAgBAQABBQJhWIC1tMheDtyx1ZaisVdr/8QAGBEAAgMAAAAAAAAAAAAAAAAAARARITL/2gAIAQMBAT8BikMr/8QAFhEBAQEAAAAAAAAAAAAAAAAAEBFB/9oACAECAQE/Aaaf/8QAHBABAAICAwEAAAAAAAAAAAAAAQACEFERISIx/9oACAEBAAY/AvP2BdLDrOsFeeliwWf/xAAcEAEAAwACAwAAAAAAAAAAAAABABExEEEhYaH/2gAIAQEAAT8hcoOpcZZNekuUVjGslM642Txk+wt1xbRSf//aAAwDAQACAAMAAAAQVP8Avv/EABgRAAMBAQAAAAAAAAAAAAAAAAABERAx/9oACAEDAQE/EEjrOhD/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEx/9oACAECAQE/EKsRyv/EABwQAQADAAIDAAAAAAAAAAAAAAEAESExQVFxkf/aAAgBAQABPxBIVJfwVq2bRIBSnh9ZL+YR1DmmVRtenTAl3L6qAVaBj7BBRcee7j5tlZ//2Q==","aspectRatio":1,"src":"/static/5147a03650c976f3ffbe33cf767ee366/20b9f/aniket.jpg","srcSet":"/static/5147a03650c976f3ffbe33cf767ee366/8de35/aniket.jpg 13w,\n/static/5147a03650c976f3ffbe33cf767ee366/efbf2/aniket.jpg 25w,\n/static/5147a03650c976f3ffbe33cf767ee366/20b9f/aniket.jpg 50w,\n/static/5147a03650c976f3ffbe33cf767ee366/900f1/aniket.jpg 75w,\n/static/5147a03650c976f3ffbe33cf767ee366/b08b0/aniket.jpg 100w,\n/static/5147a03650c976f3ffbe33cf767ee366/c26dd/aniket.jpg 800w","srcWebp":"/static/5147a03650c976f3ffbe33cf767ee366/e7b2c/aniket.webp","srcSetWebp":"/static/5147a03650c976f3ffbe33cf767ee366/58718/aniket.webp 13w,\n/static/5147a03650c976f3ffbe33cf767ee366/74aad/aniket.webp 25w,\n/static/5147a03650c976f3ffbe33cf767ee366/e7b2c/aniket.webp 50w,\n/static/5147a03650c976f3ffbe33cf767ee366/ed320/aniket.webp 75w,\n/static/5147a03650c976f3ffbe33cf767ee366/66016/aniket.webp 100w,\n/static/5147a03650c976f3ffbe33cf767ee366/ccdb5/aniket.webp 800w","sizes":"(max-width: 50px) 100vw, 50px"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUEAgP/xAAXAQEAAwAAAAAAAAAAAAAAAAACAAED/9oADAMBAAIQAxAAAAHdPoTQ6LhK8MQdNwR//8QAHRAAAgIBBQAAAAAAAAAAAAAAAgMAASIEERMhMf/aAAgBAQABBQJhWIC1tMheDtyx1ZaisVdr/8QAGBEAAgMAAAAAAAAAAAAAAAAAARARITL/2gAIAQMBAT8BikMr/8QAFhEBAQEAAAAAAAAAAAAAAAAAEBFB/9oACAECAQE/Aaaf/8QAHBABAAICAwEAAAAAAAAAAAAAAQACEFERISIx/9oACAEBAAY/AvP2BdLDrOsFeeliwWf/xAAcEAEAAwACAwAAAAAAAAAAAAABABExEEEhYaH/2gAIAQEAAT8hcoOpcZZNekuUVjGslM642Txk+wt1xbRSf//aAAwDAQACAAMAAAAQVP8Avv/EABgRAAMBAQAAAAAAAAAAAAAAAAABERAx/9oACAEDAQE/EEjrOhD/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEx/9oACAECAQE/EKsRyv/EABwQAQADAAIDAAAAAAAAAAAAAAEAESExQVFxkf/aAAgBAQABPxBIVJfwVq2bRIBSnh9ZL+YR1DmmVRtenTAl3L6qAVaBj7BBRcee7j5tlZ//2Q==","aspectRatio":1,"src":"/static/5147a03650c976f3ffbe33cf767ee366/b08b0/aniket.jpg","srcSet":"/static/5147a03650c976f3ffbe33cf767ee366/efbf2/aniket.jpg 25w,\n/static/5147a03650c976f3ffbe33cf767ee366/20b9f/aniket.jpg 50w,\n/static/5147a03650c976f3ffbe33cf767ee366/b08b0/aniket.jpg 100w,\n/static/5147a03650c976f3ffbe33cf767ee366/50e4e/aniket.jpg 150w,\n/static/5147a03650c976f3ffbe33cf767ee366/471e9/aniket.jpg 200w,\n/static/5147a03650c976f3ffbe33cf767ee366/c26dd/aniket.jpg 800w","srcWebp":"/static/5147a03650c976f3ffbe33cf767ee366/66016/aniket.webp","srcSetWebp":"/static/5147a03650c976f3ffbe33cf767ee366/74aad/aniket.webp 25w,\n/static/5147a03650c976f3ffbe33cf767ee366/e7b2c/aniket.webp 50w,\n/static/5147a03650c976f3ffbe33cf767ee366/66016/aniket.webp 100w,\n/static/5147a03650c976f3ffbe33cf767ee366/d9b14/aniket.webp 150w,\n/static/5147a03650c976f3ffbe33cf767ee366/6b183/aniket.webp 200w,\n/static/5147a03650c976f3ffbe33cf767ee366/ccdb5/aniket.webp 800w","sizes":"(max-width: 100px) 100vw, 100px"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUEAgP/xAAXAQEAAwAAAAAAAAAAAAAAAAACAAED/9oADAMBAAIQAxAAAAHdPoTQ6LhK8MQdNwR//8QAHRAAAgIBBQAAAAAAAAAAAAAAAgMAASIEERMhMf/aAAgBAQABBQJhWIC1tMheDtyx1ZaisVdr/8QAGBEAAgMAAAAAAAAAAAAAAAAAARARITL/2gAIAQMBAT8BikMr/8QAFhEBAQEAAAAAAAAAAAAAAAAAEBFB/9oACAECAQE/Aaaf/8QAHBABAAICAwEAAAAAAAAAAAAAAQACEFERISIx/9oACAEBAAY/AvP2BdLDrOsFeeliwWf/xAAcEAEAAwACAwAAAAAAAAAAAAABABExEEEhYaH/2gAIAQEAAT8hcoOpcZZNekuUVjGslM642Txk+wt1xbRSf//aAAwDAQACAAMAAAAQVP8Avv/EABgRAAMBAQAAAAAAAAAAAAAAAAABERAx/9oACAEDAQE/EEjrOhD/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEx/9oACAECAQE/EKsRyv/EABwQAQADAAIDAAAAAAAAAAAAAAEAESExQVFxkf/aAAgBAQABPxBIVJfwVq2bRIBSnh9ZL+YR1DmmVRtenTAl3L6qAVaBj7BBRcee7j5tlZ//2Q==","aspectRatio":1,"src":"/static/5147a03650c976f3ffbe33cf767ee366/4b6ce/aniket.jpg","srcSet":"/static/5147a03650c976f3ffbe33cf767ee366/db25d/aniket.jpg 82w,\n/static/5147a03650c976f3ffbe33cf767ee366/ffb8a/aniket.jpg 164w,\n/static/5147a03650c976f3ffbe33cf767ee366/4b6ce/aniket.jpg 328w,\n/static/5147a03650c976f3ffbe33cf767ee366/2a47f/aniket.jpg 492w,\n/static/5147a03650c976f3ffbe33cf767ee366/9a0c0/aniket.jpg 656w,\n/static/5147a03650c976f3ffbe33cf767ee366/c26dd/aniket.jpg 800w","srcWebp":"/static/5147a03650c976f3ffbe33cf767ee366/5a48e/aniket.webp","srcSetWebp":"/static/5147a03650c976f3ffbe33cf767ee366/2d087/aniket.webp 82w,\n/static/5147a03650c976f3ffbe33cf767ee366/29d87/aniket.webp 164w,\n/static/5147a03650c976f3ffbe33cf767ee366/5a48e/aniket.webp 328w,\n/static/5147a03650c976f3ffbe33cf767ee366/42f2e/aniket.webp 492w,\n/static/5147a03650c976f3ffbe33cf767ee366/dec03/aniket.webp 656w,\n/static/5147a03650c976f3ffbe33cf767ee366/ccdb5/aniket.webp 800w","sizes":"(max-width: 328px) 100vw, 328px"}}}],"basePath":"/","permalink":"https://anikethanda.com//NecX-Using-neck-as-an-input-method/","slug":"/NecX-Using-neck-as-an-input-method","id":"61bcd4dc-9147-5284-974c-05dd192a9027","title":"NecX - Using neck as an input method","canonicalUrl":null,"mailchimp":"","next":[{"id":"d899a66f-6976-5d92-8b18-e1ca37929aa2","slug":"/Visualizing-Neurological-Connectivity","secret":false,"title":"Visualizing Neurological Connectivity","author":"Aniket Handa","date":"2014","dateForSEO":"2014-03-22T00:00:00.000Z","timeToRead":12,"excerpt":"A focused visualization tool for neurological functional connectivity data","canonical_url":null,"subscription":true,"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Visualizing Neurological Connectivity\",\n  \"excerpt\": \"A focused visualization tool for neurological functional connectivity data\",\n  \"date\": \"2014-03-22T00:00:00.000Z\",\n  \"category\": \"Front-end Development\",\n  \"tags\": [\"D3.js\", \"JavaScript\"],\n  \"author\": \"Aniket Handa\",\n  \"links\": [{\n    \"label\": \"Live Link\",\n    \"link\": \"http://cse512-14w.github.io/fp-chaoyu-aniket-glnelson-anied/#95-LD\"\n  }],\n  \"hero\": \"./viz.png\",\n  \"noImage\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"abstract\"\n  }, \"Abstract\"), mdx(\"p\", null, \"Understanding dense, time-varying networks lies at the heart of long-standing challenges in scientific domains, especially biology. We construct a focused visualization tool for neurological functional connectivity data. We apply multiple filtering techniques \\u2013 animation and selecting by inclusion/exclusion - to make displays less overwhelming for general and expert audiences. We also allow filtering with a bootstrapped confidence level and support 2-way interactive visual hypothesis testing, to bring the noise and complexity of the data into context. Our animation display also supports casual use and inquiry into the underlying data for a general audience.\"), mdx(\"div\", {\n    \"className\": \"Image__Medium\"\n  }, \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"3038px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"39.56550362080316%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVUlEQVQoz3VSy07DMBDk/38BTv0BxBVVPfIBSEhVladjJ078tlPEATGsXQqqSg+rtXY3k9mZvQshwFOE4OG9R0gRepYY6hrLpGEt1WJEmaO+MeYinHO59/XT/7zLj+BPwyEGWK4gGYdeZmjtICuGoBSs8xBCoOs6tG1b8mG/x0i1mNIlYAGj7KzF3Asc1yPVHDz9wEkJVR0g1QLBOdZ1LbMxrVj6Dmae8wb/A1oCbGjV+80G290zrNFwJAWzjNhxDMOASOuXNWOCGloYOV0DnkGJOuk34+HxCbuXLVLQMFaDTRXGaQInhikzJNBI2UgBq24yzKZkPS2tSpqlDwIjJuwN78FhHCewvocnPRUBmyzF0BOgus2wuE3aCa3w2nJ0TGAe6WNriiGMjNDTCE3vHJaMy7pfu3wOfzqdlVZXdDp1VaFuWjRNU5zNwU+unk7p75x+Ab8BGO1XfQZ+PRYAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/a3bc4/viz.webp 2500w\", \"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/e68b0/viz.webp 3038w\"],\n    \"sizes\": \"(max-width: 3038px) 100vw, 3038px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/082ed/viz.png 2500w\", \"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/0f19d/viz.png 3038w\"],\n    \"sizes\": \"(max-width: 3038px) 100vw, 3038px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/0f19d/viz.png\",\n    \"alt\": \"viz\",\n    \"title\": \"viz\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"introduction\"\n  }, \"Introduction\"), mdx(\"p\", null, \"We sought to create a way to visualize this dynamic network flow as an interactive graph and accompanying diagrams. Existing network flows can be beautiful and useful; traffic flow is often visualized as network flow, as well as many other novelties such as wind, air traffic, and migration.\\nWithin the neuroscience literature, many groups have designed neural visualizations, and the area has received more attention from visualization researchers more recently. One of the largest limiting factors of all of this data though is that it relies on arbitrary computer programs or hand-tailored videos that support - and never challenge - a designer\\u2019s hypothesis.\\nMany of these visualizations fail to express the data and effectively communicate it. Dense networks have too many edge crossings and it is very difficult for users to disambiguate connections. Time-varying data overwhelm static representations, and end-users have trouble without multiple levels of filtering tools.\\nOur mission for this project is twofold. We aim to improve on the techniques done by scientists to visualize network flow, and we also want to give the public a tool to explore network flow and evaluate it.\"), mdx(\"h2\", {\n    \"id\": \"related-work\"\n  }, \"Related Work\"), mdx(\"h4\", {\n    \"id\": \"layout\"\n  }, \"Layout\"), mdx(\"p\", null, \"Most prior work focuses on showing data mapped onto the physical brain layout \", \"[5,6,12]\", \". This takes advantage of expert knowledge in the domain to provide additional context without labeling or overlays. In neuroscience in particular many groups have their own region enumeration and descriptions, owing to the complexity and flexibility available to interpret gathered data. These techniques tend towards the goals of scientific visualization and focus less on interaction techniques. We considered the opposite side of the design spectrum, starting with a simple circle layout and allowing the user to experiment with different arrangements of nodes. Other prior work has used alternative layouts such as matrices \", \"[3,9]\", \" to compare different neurological functional connectivity datasets or show the network in general. Some shows\"), mdx(\"h4\", {\n    \"id\": \"complete-datasets\"\n  }, \"Complete Datasets\"), mdx(\"p\", null, \"Prior work mostly shows complete datasets with few filtering features \", \"[8]\", \". Some show small multiples of the graph at each timestep \", \"[11]\", \". Work on dense, time-varying graphs has applied dotplots and other high-density techniques to attempt to show the full picture of the data \", \"[6]\", \" or used principal component analysis to generate smaller visualizations\", \"[10]\", \". We start from an overview of the data and influence analysis to start small.\"), mdx(\"h4\", {\n    \"id\": \"uncertainty-and-hypothesis-testing\"\n  }, \"Uncertainty and Hypothesis Testing\"), mdx(\"p\", null, \"Visual hypothesis testing presents visualizations generated from real and fake data for comparison; if the user can tell which one is real, the visualization is judged to show a potentially significant relationship\", \"[7]\", \". Some prior work on functional connectivity starts the analysis from raw sensor data but does not incorporate null models or measures of uncertainty \", \"[2]\", \".\\nPrior work does not consider hypothesis testing for dense, time-varying networks. Work on financial time series of stock market prices showed that even causual users can determine real from fake data\", \"[4]\", \". We did not show time series of our underlying data because permuting it created clearly null plots.\\nWe are also unaware of work in visual hypothesis testing for networks in general. We chose to focus on interactive visual analysis testing and consider the tension between showing and filtering data according to significance levels derived from potentially flawed models.\"), mdx(\"h2\", {\n    \"id\": \"domain-neuroscience\"\n  }, \"Domain: Neuroscience\"), mdx(\"p\", null, \"We sought to capture the dynamics of network flow by examining a functional connectivity model of neurological activity. Functional connectivity measures the degree in which regions of the brain communicate or interact as they process certain events. Generally, our approach can be used to flow any time-varying network interactions, but we focused on this dataset to motivate our decisions.\\nThe data comes from brain imaging experiments conducted at Massachusetts General Hospital. Subjects listen to an auditory stimulus to perceive whether they heard an English word or not. Paul A. Luce created lists of these stimuli and grouped them by how many words were just one phoneme (sound-specific letter) different and how often its constituent phonemes were present in the language \", \"[1]\", \". While subjects did this task, their neural activity was recorded by electrical and magnetic sensors (EEG and MEG).\\nNeural activation was mapped on to the grey matter surface and clustered into 40 nodes. Figure 2 shows the neural activity at two nodes. The waves of cortical activity were used to measure functional connectivity by using a Granger causality model using Kalman filters. The data we received from MGH is the measure of connectivity from the first 600 milliseconds after the subject starts to hear a word, conditioned by different word groups.\\nThis is where our analysis comes in. The data demonstrating the interaction between nodes is very noisy, due both to the nature of the sensors as well as the multi- layered processing required to convert the readings into associated estimates for regional brain activity. Determining which apparent interactions represent meaningful relationships remains a significant challenge for the field. We explored transforming the data in a few ways to measure a sense of significant connections.\\nAs illustrated in Figure 3, the functional connectivity model produces results as a time-varying value called the Granger causality index (GCI) for each pair of neural regions A and B. Values greater than zero show signs that region B could be caused by region A, values less than show otherwise but their magnitude is, in isolation, meaningless.\\nBy taking the cortical activity data, randomly shuffling the values, and putting it back into the causality model, we produced a distribution of GCIs of clearly non-causal data, but with the same underlying values. The distribution of experimental GCIs has a mean of -0.018 and a standard deviation of 0.089 while the null dataset had a mean of 0.003 and a standard deviation of 0.050, with 3.8 million data points in both sets. Figure 4 illustrates the distribution of GCI values in the experimental model (light and dark green) and the null model (dark green and blue).\\nThereby, the majority of the dataset\\u2019s values, including many of them above zero, can very well be produced by random noise. As a backwards t-test, we filtered the data by rejecting all signs of causality with a GCI below the 95th (0.0733) or 99th (0.1228) percentile of the null-models GCIs. This creates a binary condition (significant evidence of causality or no) for each region to region connection over each time point. Thereby, at each time point, there is a directed edge from node A to node B if there is statistically verified evidence of functional connectivity.\"), mdx(\"h2\", {\n    \"id\": \"methods\"\n  }, \"Methods\"), mdx(\"p\", null, \"The program that we developed takes the three-dimensional data (nodes x nodes x time) and gives the user an array of techniques to interact with it.\"), mdx(\"h4\", {\n    \"id\": \"packet-visualization\"\n  }, \"Packet Visualization\"), mdx(\"p\", null, \"Visualizing dynamic network data is hard to do with static edges. Previous work attempted to modify the width of edges dynamically1. The overloaded display had poor visual cues of change and, due to the high number of interactions in the neurological dataset, edge crossings obscured important data.\\nIn order to give the user a sense of network flow while minimizing edge crossing, we turned the edges into invisible paths for short edges/arrows to move across. For functional connectivity, these represent packets of information moving across regions of the brain.\\nAlthough the packet approach is aesthetically motivated, there are trade-offs. The rendering used for the packets in our implementation does not give the user much interaction with the lines themselves and although the user can pause the display, the packets themselves do not. Greater control over the timing of packets and tighter integration with the time controls could really enhance the ability for users to interact with the temporal data.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Relationship to Dot Plots\")), mdx(\"p\", null, \"Dot plots show time series data by showing a single point denoting presence or absence at some time. The packet visualization can be seen as a kind of dot plot. If we took the entire time window of the dataset, each edge would show a dot plot for the presence / absence of the edge at each time step.\"), mdx(\"h4\", {\n    \"id\": \"brushing-and-filtering\"\n  }, \"Brushing and Filtering\"), mdx(\"p\", null, \"In order to explore a 3D dataset, slices in space and time assist users in breaking down otherwise overwhelming data presentation. Two brushing techniques are implemented in our program, one for selecting subsets of regions and another for selecting time.\\nNodes have two states, on and off. Nodes that are on will produce packets and display neural activity going between nodes. By clicking the mouse and dragging a rectangle over nodes in the display, the state of each node will be toggled on/off (as an exclusive or) once the mouse is released.\\nTime can be interacted with as well, by allowing the user to interact with a timeline in the bottom of the screen. The user can brush areas in the timeline to specify when the animation starts and how long it should be. This behavior is best done while the simulation is stopped. The timeline also displays the aggregate amount of interaction happening over time.\"), mdx(\"h4\", {\n    \"id\": \"node-layout\"\n  }, \"Node Layout\"), mdx(\"p\", null, \"The placement of nodes is crucial to mitigate edge crossing and highlighting specific effects. Due to the dense nature of the graph, we chose to simplify the layout by drawing nodes in a circle, combining nodes within regions, and allowing the user to edit the placement of nodes.\\nMost displays of neurological activity are shown on the brain itself. That maintains context well and experienced users can easily recognize familiar areas, but these displays offer little context for users. In our approach, we put the images of the brain in tooltips while the user hovers over a node and added information about the approximate roles of each area.\\nThe user can change the placement of nodes by clicking and dragging. This opens up the visualization to highlight specific activity to areas. For example, in Figure 8, the user has moved nodes so that the LOCs (Vision areas) are together) and areas in the lower part of the right hemisphere are in the center so their specific trails can be seen. These areas are associated with objects and socializing and they are communicating a lot with the vision areas. This could affirm a hypothesis that the user is recalling the visual representation of the words while they process them. A lot of activity is being sent to the left hemisphere\\u2019s supramarginal gyrus (SMG) also known as Wernicke\\u2019s areas, which is implicated in linguistic processing as well.\\n####Context and Aggregation\\nWhile we dealt with edge crossing by allowing direct manipulation of node layouts, matrix representations plot the absence or presence of edges in the graph without overlap. We show the matrix representation of the graph and link it to the same time window as the node plot. Source nodes are plotted by row and target nodes appear as columns.\\nInstead of showing only absence and presences of edges, we give an indication of strength via a color encoding. The color encodes the number of edges coming from the source node (shown by rows) divided by the total number of edges coming from all nodes.\\nWe also grouped the brain regions into larger super regions for the node layout. The matrix shows the sub-regions of those larger regions and orders the nodes by those regions.\"), mdx(\"h2\", {\n    \"id\": \"user-study\"\n  }, \"User Study\"), mdx(\"p\", null, \"We did an informal user study on the interface to see how well it did. Although we sought to provide ways for people to break down the dynamic network data, it still overwhelmed the user. The proper usage of some elements was unclear so we added information tips for the final product. Furthermore, some interaction techniques weren\\u2019t linked quite right or the links were no transparent to the user. The matrix representation was hard to understand and may not contribute to understanding data in its current form. In the end, it looks like we put all the data out there, but this display is not ready for the general audience.\"), mdx(\"h2\", {\n    \"id\": \"future-work\"\n  }, \"FUTURE WORK\"), mdx(\"h4\", {\n    \"id\": \"performance-and-large-datasets\"\n  }, \"Performance and Large Datasets\"), mdx(\"p\", null, \"The tool computes aggregate metrics locally for the matrix representation. This constrains it to work with small graphs. If multiple users analyze the same data, otherwise local computation may be hosted in the cloud, especially for larger datasets. Streaming a user interface across the cloud still stutters due to latency, and prior work has shown that increased latency negatively impacts the breadth and variety of hypotheses explored during the analysis process. We can split the middle with techniques similar to those demonstrated by Immens\", \"[4]\", \", which calculates binned aggregations and sends that data for local computation and display. Thus, there opportunities for adapting the metrics we compute and other metrics to show with the matrix for large time-varying graphs.\"), mdx(\"h4\", {\n    \"id\": \"visual-hypothesis-testing\"\n  }, \"Visual Hypothesis Testing\"), mdx(\"p\", null, \"While the current implementation supports setting up a 50/50 visual analysis test, It lacks features to share analysis tests over the network. We imagine distributing analysis keys or a unique URL to remote participants or through services such as Mechanical Turk. We could support branching trees of analysis, multiple null models. Users may also benefit from an environment to interpret the results of the tests, especially as the space of expressible test sets expands.\\nVisual analysis testing may produce richer results by recording the depth and other interaction characteristics that users chose from. In this work we plan to measure standard measures of analysis tasks and attempt to at best model and at least cluster the behavior patterns, to guide the interpretation of visual analysis testing results. For example, how does a person\\u2019s belief in a hypothesis vary with the time spent judging it? How does this vary across individuals? What empirical distributions do the judgments of individuals follow? What if two or more people collaborate in judging a hypothesis? Some hypotheses we hope to test include: 1) time spent analyzing first increases the chance a person will judge the hypothesis true, then decreases, 2) people collaborating in person will be more likely to agree than they would compared to collaborating remotely, even when partially controlling for confounding factors such as sharing or not sharing a workstation or including high definition video conferencing, 3) individual differences in analysis styles, quantified by the amount of branching and time spent in different analysis paths, will predict their responses for certain kinds of data, and 4) casual visual hypothesis test results, aggregated over a large number of people, provide a unique signal potentially useful when combined with other, more traditional analysis methods.\\nWe also want to explore showing null data to users unaware of whether it is real or fake data from the beginning of analysis. If we tell them it is real data, after analyzing it for a while, can they tell it is actually a null model? How does this vary across domain expertise?\"), mdx(\"p\", null, \"We also plan to explore sonification, both in active (quick changes / small samples) and passive listening modes (long durations), as a potential way to derive a unique signal for analysis. This and other non-traditional ways for the public to interact casually with science present unique design and interaction challenges, such as along the active \\u2013 passive experience dimension. Raising awareness and hopefully interest in scientific issues, especially uncertainty and validity of data, can lead to broader impacts. We are also interested in exploring other complex datasets with these techniques, such as the time-varying interactions on social networks.\"), mdx(\"h2\", {\n    \"id\": \"conclusion\"\n  }, \"Conclusion\"), mdx(\"p\", null, \"Interactive techniques are some of the best ways for users to break down three dimensional datasets. Our exploration of the functional connectivity dataset produced visualizations that gave users the ability to explore the data. Processing the data for significance is important, as much of the data is noise. Novel visualization techniques such as packets enable the user to view the data in a new way, but not without tradeoffs. Much like improving the statistics of the underlying data, visual hypothesis testing is important to validate any claims that come from visualizations like these. Although much more work could be done to enhance the visualization, we have provided a new set of interactions to explore functional connectivity.\"), mdx(\"h2\", {\n    \"id\": \"acknowledgements\"\n  }, \"Acknowledgements\"), mdx(\"p\", null, \"We thank David Gow and Bruna Olson at Massachusetts General Hospital for generously sending their functional connectivity dataset for us to manipulate and visualize. We would also like to thank the authors of D3 for giving us such a powerful tool for web-based data manipulation and interaction. Lastly, we\\u2019d like to thank our outstanding professor Jeffrey Heer and teaching assistant Kanit Ham Wongsuphasawat for giving us such an informative and fun course for which we did this project.\"), mdx(\"h2\", {\n    \"id\": \"references\"\n  }, \"References\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Luce, Paul A, Large, Nathan. Phonotactics, density, and entropy in spoken word recognition. Language and Cognitive Processes (2001).\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"E W Anderson, C. Chong, G. a. Preston, and C. T. Silva, \\u201CDiscovering and visualizing patterns in EEG data,\\u201D 2013 IEEE Pacific Vis. Symp., pp.105\\u2013112, Feb. 2013.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"B Alper,B.Bach,N.HenryRiche,T.Isenberg,andJ.- D. Fekete, \\u201CWeighted graph comparison techniques for brain connectivity analysis,\\u201D Proc. SIGCHI Conf. Hum. Factors Comput. Syst. - CHI \\u201913, p. 483, 2013.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"J  Hasanhodzic, A. Lo, and E. Viola, \\u201CDo humans perceive temporal order in asset returns?\\u201D. Preprint 2011, \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"http://jasminah.com/Papers/aroraV4.pdf\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"http://jasminah.com/Papers/aroraV4.pdf\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"F Janoos, O. Irfanoglu, R. Machiraju, and I. Morocz, \\u201CVisualizing Brain Activity from fMRI Data.\\u201D Technical Report\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"C Nowke and M. Schmidt, \\u201CVisNEST\\u2014Interactive analysis of neural activity data,\\u201D Biol. Data, 2013.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"H Wickham, D. Cook, H. Hofmann, and A. Buja, \\u201CGraphical inference for Infovis.,\\u201D IEEE Trans. Vis. Comput. Graph., vol. 16, no. 6, pp. 973\\u20139, 2010.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"M Xia, J. Wang, and Y. He, \\u201CBrainNet Viewer: a network visualization tool for human brain connectomics.,\\u201D PLoS One, vol. 8, no. 7, p. e68910, Jan. 2013.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"E Nordlie and H. E. Plesser, \\u201CVisualizing neuronal network connectivity with connectivity pattern tables.,\\u201D Front. Neuroinform., vol. 3, no. January, p. 39, Jan. 2010.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"S Mikula and E. Niebur, \\u201CA novel method for visualizing functional connectivity using principal component analysis.,\\u201D Int. J. Neurosci., vol. 116, no. 4, pp. 419\\u201329, Apr. 2006.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"L Li, S. Seth, I. Park, J. C. Sanchez, and J. C. Principe, \\u201CEstimation and visualization of neuronal functional connectivity in motor tasks.,\\u201D Conf. Proc. IEEE Eng. Med. Biol. Soc., vol. 2009, pp. 2926\\u20139, Jan. 2009.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"W.-K. Jeong, J. Beyer, M. Hadwiger, A. Vazquez, H. Pfister, and R. T. Whitaker, \\u201CScalable and interactive segmentation and visualization of neural processes in EM datasets.,\\u201D IEEE Trans. Vis. Comput. Graph., vol. 15, no. 6, pp. 1505\\u201314.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tags":["D3.js","JavaScript"],"links":[{"label":"Live Link","link":"http://cse512-14w.github.io/fp-chaoyu-aniket-glnelson-anied/#95-LD"}],"category":"Front-end Development","present":false,"noImage":true,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVUlEQVQoz3VSy07DMBDk/38BTv0BxBVVPfIBSEhVladjJ078tlPEATGsXQqqSg+rtXY3k9mZvQshwFOE4OG9R0gRepYY6hrLpGEt1WJEmaO+MeYinHO59/XT/7zLj+BPwyEGWK4gGYdeZmjtICuGoBSs8xBCoOs6tG1b8mG/x0i1mNIlYAGj7KzF3Asc1yPVHDz9wEkJVR0g1QLBOdZ1LbMxrVj6Dmae8wb/A1oCbGjV+80G290zrNFwJAWzjNhxDMOASOuXNWOCGloYOV0DnkGJOuk34+HxCbuXLVLQMFaDTRXGaQInhikzJNBI2UgBq24yzKZkPS2tSpqlDwIjJuwN78FhHCewvocnPRUBmyzF0BOgus2wuE3aCa3w2nJ0TGAe6WNriiGMjNDTCE3vHJaMy7pfu3wOfzqdlVZXdDp1VaFuWjRNU5zNwU+unk7p75x+Ab8BGO1XfQZ+PRYAAAAASUVORK5CYII=","aspectRatio":2.5274542429284526,"src":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/f4f8c/viz.png","srcSet":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/206f6/viz.png 236w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/84032/viz.png 472w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/f4f8c/viz.png 944w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/513fc/viz.png 1416w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/6eada/viz.png 1888w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/50af4/viz.png 3038w","srcWebp":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/99fbb/viz.webp","srcSetWebp":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/77392/viz.webp 236w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/1f177/viz.webp 472w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/99fbb/viz.webp 944w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/4a492/viz.webp 1416w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/b0b8f/viz.webp 1888w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/8cc6d/viz.webp 3038w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVUlEQVQoz3VSy07DMBDk/38BTv0BxBVVPfIBSEhVladjJ078tlPEATGsXQqqSg+rtXY3k9mZvQshwFOE4OG9R0gRepYY6hrLpGEt1WJEmaO+MeYinHO59/XT/7zLj+BPwyEGWK4gGYdeZmjtICuGoBSs8xBCoOs6tG1b8mG/x0i1mNIlYAGj7KzF3Asc1yPVHDz9wEkJVR0g1QLBOdZ1LbMxrVj6Dmae8wb/A1oCbGjV+80G290zrNFwJAWzjNhxDMOASOuXNWOCGloYOV0DnkGJOuk34+HxCbuXLVLQMFaDTRXGaQInhikzJNBI2UgBq24yzKZkPS2tSpqlDwIjJuwN78FhHCewvocnPRUBmyzF0BOgus2wuE3aCa3w2nJ0TGAe6WNriiGMjNDTCE3vHJaMy7pfu3wOfzqdlVZXdDp1VaFuWjRNU5zNwU+unk7p75x+Ab8BGO1XfQZ+PRYAAAAASUVORK5CYII=","aspectRatio":2.5274542429284526,"src":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/6f725/viz.png","srcSet":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/fa430/viz.png 350w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/694d8/viz.png 700w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/6f725/viz.png 1400w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/ea429/viz.png 2100w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/76a4c/viz.png 2800w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/50af4/viz.png 3038w","srcWebp":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/0326e/viz.webp","srcSetWebp":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/d0d48/viz.webp 350w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/64998/viz.webp 700w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/0326e/viz.webp 1400w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/167eb/viz.webp 2100w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/ded14/viz.webp 2800w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/8cc6d/viz.webp 3038w","sizes":"(max-width: 1400px) 100vw, 1400px"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABVUlEQVQoz3VSy07DMBDk/38BTv0BxBVVPfIBSEhVladjJ078tlPEATGsXQqqSg+rtXY3k9mZvQshwFOE4OG9R0gRepYY6hrLpGEt1WJEmaO+MeYinHO59/XT/7zLj+BPwyEGWK4gGYdeZmjtICuGoBSs8xBCoOs6tG1b8mG/x0i1mNIlYAGj7KzF3Asc1yPVHDz9wEkJVR0g1QLBOdZ1LbMxrVj6Dmae8wb/A1oCbGjV+80G290zrNFwJAWzjNhxDMOASOuXNWOCGloYOV0DnkGJOuk34+HxCbuXLVLQMFaDTRXGaQInhikzJNBI2UgBq24yzKZkPS2tSpqlDwIjJuwN78FhHCewvocnPRUBmyzF0BOgus2wuE3aCa3w2nJ0TGAe6WNriiGMjNDTCE3vHJaMy7pfu3wOfzqdlVZXdDp1VaFuWjRNU5zNwU+unk7p75x+Ab8BGO1XfQZ+PRYAAAAASUVORK5CYII=","aspectRatio":2.5274542429284526,"src":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/cb61f/viz.png","srcSet":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/336c1/viz.png 240w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/51d41/viz.png 480w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/cb61f/viz.png 960w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/350e1/viz.png 1440w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/ba228/viz.png 1920w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/50af4/viz.png 3038w","srcWebp":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/fcc10/viz.webp","srcSetWebp":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/2b5a3/viz.webp 240w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/35871/viz.webp 480w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/fcc10/viz.webp 960w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/4693b/viz.webp 1440w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/30cf3/viz.webp 1920w,\n/static/d7ee91a3adeaf5ffd2170ac31dc2b426/8cc6d/viz.webp 3038w","sizes":"(max-width: 960px) 100vw, 960px"},"seo":{"src":"/static/d7ee91a3adeaf5ffd2170ac31dc2b426/7ef28/viz.png"}}},{"id":"ce0a46a3-6c9b-543e-85c2-cd7bfca8caf5","slug":"/Global-Terrorism-Visualization","secret":false,"title":"Global Terrorism Visualization","author":"Aniket Handa","date":"2014","dateForSEO":"2014-02-10T00:00:00.000Z","timeToRead":3,"excerpt":"78,433 people were killed due to Terrorism during the past decade. 24,144 in Iraq alone!","canonical_url":null,"subscription":true,"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Global Terrorism Visualization\",\n  \"excerpt\": \"78,433 people were killed due to Terrorism during the past decade. 24,144 in Iraq alone!\",\n  \"date\": \"2014-02-10T00:00:00.000Z\",\n  \"category\": \"Front-end Development\",\n  \"tags\": [\"D3.js\", \"JavaScript\"],\n  \"author\": \"Aniket Handa\",\n  \"links\": [{\n    \"label\": \"Live Link\",\n    \"link\": \"http://cse512-14w.github.io/a3-chaoyu-aniket\"\n  }],\n  \"hero\": \"./viz.png\",\n  \"noImage\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"interaction\"\n  }, \"Interaction\"), mdx(\"p\", null, \"The Visualization focuses on discovering important trends and events that shaped the history due to Terrorism. It also tries to make user conscious about the number of unnecessary lives lost due to these unfortunate events. \"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1055px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.6824644549763%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABxElEQVQoz3VRTU/bQBD1r+XCiQNwQUj8AITEOQeEVClSFBQKbZMmslpZ1GmCE2cd12uvvXYSg1JIXMchyueBZy9ULWqfd0c7u/PmzYyl1Wq1Xq8n8WTQ6/8cPkTjCGs8wo5+4RtHo8f0HMdxFEUj4OExSZJVBmmxWCyXy/l83u/1ETTNkEySp+nTbDYTFqnDMJzEMc7TZIrgzWYDojQcDt0MzWaza3Z930ecDTiOaZqEEK3d/lSpvMvnvyiKYdFGq3Wr660OGdzdScy2wXQcBxYUSqnneXAZw4uDm26nQzSNfFNvLi/lXK5+fd0oVzRZpoRIzLJA817hugyLc48LPwjqxeL7/f2PR0elnZ3C1lZxe/vD4eHXXI7IssT5S1gqZFkZ38X2g8BQVaKqlmHUTk+rJydauewyRg3jR7sdhGEPZb8ocu5Q2qpWbdMUI/AHA7VQKO3tKWdnyvn55+Pjq4ODbqOBInkQpAGcS78LBh+3Rr2u1Wrc9yGOdDf5fGl39/vFRe/+Hk1S07TRJmMIx2j/ILsuOJaum5omyKn1PF1RnGyKqcu5m/WFcf5NftUXzyKd0BdSb/Avctaw938IWfxLdPkMMWAruMlYwtkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/85b39184f7f75183b80dfe580d4cfcad/fdb91/terror1.webp 1055w\"],\n    \"sizes\": \"(max-width: 1055px) 100vw, 1055px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/85b39184f7f75183b80dfe580d4cfcad/60b63/terror1.png 1055w\"],\n    \"sizes\": \"(max-width: 1055px) 100vw, 1055px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/85b39184f7f75183b80dfe580d4cfcad/60b63/terror1.png\",\n    \"alt\": \"image\",\n    \"title\": \"image\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"p\", null, \"We try to accomplish this by showing multiple views of the large dataset - \"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The Global Map view - Shows the world map with color encoded countries according to number of killings over the selected period of time. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Country Wise view - Shows circle graphs over the selected period of time. \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Brushing tool - Shows a bar graph of total killings in every month.\")), mdx(\"p\", null, \"The purpose of all these three views is different. The Map view shows the high level effect on countries due to terrorism, whereas the Country wise view concentrates on comparison, ordering, discovering trends of events between two or more countries, and also it facilitates finding the event which caused the mishap. While these two views focus over a period of time, the Brushing tool helps constantly see the visualization over the full period. It also helps in controlling the other two views.\"), mdx(\"p\", null, \"The visualization features basically three interaction techniques:\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"1. Brush:\"), \" \"), mdx(\"p\", null, \"To brush and link multiple views we use a timeline as a background, which starts from first day of Jan, 2000 to Jan, 2011. It supports \"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Expansion of the current selection in either direction, \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dragging of the span over the timeline, and \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Clicking outside the span selects that particular month.  \")), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"2. Select:\")), mdx(\"p\", null, \"To afford comparison and trend discovery between event happenings in two or more countries users can select countries by clicking them on the world map. This adds the country to the country wise view of the visualization.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"3. Hover:\")), mdx(\"p\", null, \"Details on demand - Hovering over a country in the World Map reveals the total number of killings in that country over the period. Also, hovering over a data point in  the country wise view reveals more information about the event w.r.t. to the data point. \"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"878px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"70.95671981776765%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsSAAALEgHS3X78AAACqElEQVQoz01Sy07bUBD1f7BmwYY14g9YsOMLYMkWCSEWCIEUIiFoU0HopooalRKBIkhLIA9sJziqSezYsX3tOH4mtfNo4jiwIG1XnThq1dHo6s6dOWdmji72O7C247rfXW8wHPmj4cT8l+cXP7ChNxx6cPreYACJfq8/6A+mKGw8Hv8cj73+QEay4zht1227bfBOp9OdeLfT7nTbnbbjeD/6L/5o5A2fff8XwF5fsU6vZ7luwzDSd+lisciwDMdzNE1TFAUhTuCZXC5xdXV+eYmXSqKul3meEQROlluui2mqKpCkzLCmaaqKUkfIsi3DMEzD1HVD13VFFEWGYbPZ4vmn291d6uIznUoxt18lmsZUSUrv79PJZO3xkcNxuVqVqlUjsIaimLb9cHr6fnHxw9LSu/n5N7OzhzMzZwsLNxsb3xIJzLQsq9ls9Xq3Oztv5+YuVlelchka2o5TTqXo62s2l7tcX78LhVJbW9nDQ3B4gazVamHQASY3TFPhuPtQCAAWJJpNSN+Hw4m1tS/b2zebm+m9vdjycu74mCdJ23W1RgMaYNMJYTnYGfpzBJE9OhJKJV3TZI6D+8eVFSoeBy5VFGsUBa7w/BT0FwxwTYMVZJYlotFMONwAPbtdniDykYhSqwE1ZEEgYFQR+g8cyPoPD/MABSwCIYwHffSpaZoRUASIST02obRt2N6wLLvV0i1LMwwINVgkqNMCRoBBgWXbenABh3esrqoyw1Tz+Ur+QSCIyn2GI0hE0wLLSPQTYhiBZeVKhcXxKkEIBbKcyYgUxZGkyPGYKIiI59HTk4ZQnedBFThrBFFOJh9jsVI8TsViZDQ68bMz/OQkFw5nDw7wSARqMIQQ4GuFwuRX2TZMaAbbgmANhEAbEAku0xBOCOuSNHms1/8AwAWeGZsFRhMAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/c4f2ad11c9233d7f59dc5e16e99a829f/e432d/terror2.webp 878w\"],\n    \"sizes\": \"(max-width: 878px) 100vw, 878px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/c4f2ad11c9233d7f59dc5e16e99a829f/1b434/terror2.png 878w\"],\n    \"sizes\": \"(max-width: 878px) 100vw, 878px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/c4f2ad11c9233d7f59dc5e16e99a829f/1b434/terror2.png\",\n    \"alt\": \"image\",\n    \"title\": \"image\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"dataset\"\n  }, \"Dataset\"), mdx(\"p\", null, \"The visualization heavily depends upon dataset acquired from \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://www.start.umd.edu/gtd\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Global Terrorism Database\"), \" (GTD, University of Maryland). It is currently the most comprehensive unclassified data base on over 113,000 terrorist events, occurred between 1970 and 2012 in the world.\"), mdx(\"p\", null, \"Each event consists information on the date, location, number of people killed and injured, weapons used, intention, group or individual involved, target, summary, cites, etc.\"), mdx(\"p\", null, \"The dataset was cleaned before being directly used. Many required values were \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" or inconsistent. For example, some of the 3 Letter country codes from the database were not matching to that in the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://datamaps.github.io/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Datamap\"), \" object.\"), mdx(\"h2\", {\n    \"id\": \"running-instructions\"\n  }, \"Running Instructions\"), mdx(\"p\", null, \"Access the visualization \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://cse512-14w.github.io/a3-chaoyu-aniket/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"here\"), \". View it in full screen for better experience.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"or\"), \" \"), mdx(\"p\", null, \"Download this repository and run \"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"python -m SimpleHTTPServer 9000\"), \" \"), mdx(\"p\", null, \"at the root and access the visualization from \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:9000/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"http://localhost:9000/\"), \" using your favorite web browser. \"), mdx(\"h2\", {\n    \"id\": \"story-board\"\n  }, \"Story Board\"), mdx(\"p\", null, \"We started off with data search and found many datasets which called our attention. But before finalizing on one we briefly explored all of them using Tableau.\"), mdx(\"h4\", {\n    \"id\": \"exploration\"\n  }, \"Exploration\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"World Map representing countries with more killings (nkill) by more red.\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://raw.github.com/CSE512-14W/a3-chaoyu-aniket/master/images/tableau/Sheet%207.png\",\n    \"alt\": \"Sheet 7\"\n  })))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"A time stream representing the trend\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://raw.github.com/CSE512-14W/a3-chaoyu-aniket/master/images/tableau/Sheet%205.png\",\n    \"alt\": \"Sheet 5\"\n  })))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Heat Map of all countries w.r.t. to time, colored according to number of killings.\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://raw.github.com/CSE512-14W/a3-chaoyu-aniket/master/images/tableau/Sheet%204.png\",\n    \"alt\": \"Sheet 4\"\n  })))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Bubble Chart\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://raw.github.com/CSE512-14W/a3-chaoyu-aniket/master/images/tableau/Sheet%201.png\",\n    \"alt\": \"Sheet 1\"\n  }))))), mdx(\"p\", null, \"While exploring these charts using Tableau we also simulated them using pages year wise to evaluate various interactions possible.\"), mdx(\"h4\", {\n    \"id\": \"sketching\"\n  }, \"Sketching\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"During Brainstorm\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://raw.github.com/CSE512-14W/a3-chaoyu-aniket/master/images/sketch/s1.jpg\",\n    \"alt\": \"S1\"\n  })))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Final sketch before we started coding\\n\", mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://raw.github.com/CSE512-14W/a3-chaoyu-aniket/master/images/sketch/s2.jpg\",\n    \"alt\": \"S2\"\n  }))))), mdx(\"p\", null, \"The top portion is a timeline wherein one can select the months from 2000 to 2010. It is used to brush below two visualizations. It affords all the interactions mentioned above.   \"), mdx(\"h4\", {\n    \"id\": \"changes-between-storyboard-and-the-final-implementation\"\n  }, \"Changes between Storyboard and the Final Implementation\"), mdx(\"p\", null, \"There are not any significant changes between the final sketch and the final implementation. Though there were some subtle changes in placement of various elements, the colors, the scale used. But, the overall interaction, views and underlining objective remained the same.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Its hard to sketch colors and exactly understand how they will be perceived without an actual running prototype. We didn\\u2019t consider the use of log scale for color encoding, until we saw the running visualization.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"We first envisioned the country wise visualization to be similar to time stream from Tableau (above), but we ended up plotting translucent circles with size dependent upon killings to represent each event.\")), mdx(\"h2\", {\n    \"id\": \"development-process\"\n  }, \"Development Process\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The first task was to mutually decide what basic information is needed from the large dataset to produce the designed visualization. The data format was also decided.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Then, we hopped onto data cleaning and generated CSVs and JSONs of the required data.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"We decided the project into three milestones. First, basic world map representing the data. Second, brushed and linked map. Third, select countries and visualize.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"While, one person was cleaning the data, other was readying the basic front of the world map waiting for the data.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The next step, after integrating the data with the map, was to implement the brushing feature.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"After this, the country selection feature was implemented.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Then we briefly worked upon aesthetics and colors of the visualization.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Finally, we made trend visualization of the selected countries. \")), mdx(\"h4\", {\n    \"id\": \"technologies-used\"\n  }, \"Technologies used\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"D3.js\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"http://datamaps.github.io/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noreferrer\"\n  }), \"Datamap\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"underscore.js\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Twitter Bootstrap\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"jQuery\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ruby\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tableau (for exploration)\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Time Consuming Aspects\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Brainstorming & Designing\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Learning D3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Data exploration and then cleaning\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dirty hack to select countries on the Datamap\")), mdx(\"h4\", {\n    \"id\": \"future-work\"\n  }, \"Future Work\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Details on demand about the event, upon hovering on circles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Show news articles (using NYT API?) based upon events\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Highlight the countries in selection\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Optimize algorithm and queries\")));\n}\n;\nMDXContent.isMDXComponent = true;","tags":["D3.js","JavaScript"],"links":[{"label":"Live Link","link":"http://cse512-14w.github.io/a3-chaoyu-aniket"}],"category":"Front-end Development","present":false,"noImage":true,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABW0lEQVQoz42SS2sCUQyF/dP+DBfu1LVFt90UsZS2Kii+dcZ5v9WZURQUu+5pzkXBIoUuQi73Jl9OclM4nU6gnc9nHI9H7Pd7xHGMLMtwOByQJImyNE0RbTawPQ9OECDebpGs18jznLnfl8uFnK/CPZAg2zShTaewxHuS/FSv47PbhS/nTrOJ12oVL6USOo2GigvCkPm/gYTRE+i6Lnzfh9bvY9nrwZeE1XiMcauFj1oNz8Ui3spl6IMBPIkNo+h/QNdxsJpMVJI5n+O9UsGk3YYmIGu1QiCx7CCUgg8t34CclS/zoapAKtO7TJJZeVKExjmyTZ4ZGwn4QeEN6to29NEIlijSh0Ol0NF1GDIrYzaDtVjA1jQY8m7NF0q5I2ofFV6B/BBCTDFDzFou4RiG8oSxEM+2QPjO2bry/mfLXJV8t1OexlVJpcVMViOVNVH3cpdd77dcG4m/b/kHQy8/hbdTu2wAAAAASUVORK5CYII=","aspectRatio":2.5281757402101244,"src":"/static/9f5e35a008a1ad623da12470ad0f1577/f4f8c/viz.png","srcSet":"/static/9f5e35a008a1ad623da12470ad0f1577/206f6/viz.png 236w,\n/static/9f5e35a008a1ad623da12470ad0f1577/84032/viz.png 472w,\n/static/9f5e35a008a1ad623da12470ad0f1577/f4f8c/viz.png 944w,\n/static/9f5e35a008a1ad623da12470ad0f1577/513fc/viz.png 1416w,\n/static/9f5e35a008a1ad623da12470ad0f1577/6eada/viz.png 1888w,\n/static/9f5e35a008a1ad623da12470ad0f1577/83486/viz.png 2647w","srcWebp":"/static/9f5e35a008a1ad623da12470ad0f1577/99fbb/viz.webp","srcSetWebp":"/static/9f5e35a008a1ad623da12470ad0f1577/77392/viz.webp 236w,\n/static/9f5e35a008a1ad623da12470ad0f1577/1f177/viz.webp 472w,\n/static/9f5e35a008a1ad623da12470ad0f1577/99fbb/viz.webp 944w,\n/static/9f5e35a008a1ad623da12470ad0f1577/4a492/viz.webp 1416w,\n/static/9f5e35a008a1ad623da12470ad0f1577/b0b8f/viz.webp 1888w,\n/static/9f5e35a008a1ad623da12470ad0f1577/21f13/viz.webp 2647w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABW0lEQVQoz42SS2sCUQyF/dP+DBfu1LVFt90UsZS2Kii+dcZ5v9WZURQUu+5pzkXBIoUuQi73Jl9OclM4nU6gnc9nHI9H7Pd7xHGMLMtwOByQJImyNE0RbTawPQ9OECDebpGs18jznLnfl8uFnK/CPZAg2zShTaewxHuS/FSv47PbhS/nTrOJ12oVL6USOo2GigvCkPm/gYTRE+i6Lnzfh9bvY9nrwZeE1XiMcauFj1oNz8Ui3spl6IMBPIkNo+h/QNdxsJpMVJI5n+O9UsGk3YYmIGu1QiCx7CCUgg8t34CclS/zoapAKtO7TJJZeVKExjmyTZ4ZGwn4QeEN6to29NEIlijSh0Ol0NF1GDIrYzaDtVjA1jQY8m7NF0q5I2ofFV6B/BBCTDFDzFou4RiG8oSxEM+2QPjO2bry/mfLXJV8t1OexlVJpcVMViOVNVH3cpdd77dcG4m/b/kHQy8/hbdTu2wAAAAASUVORK5CYII=","aspectRatio":2.5281757402101244,"src":"/static/9f5e35a008a1ad623da12470ad0f1577/6f725/viz.png","srcSet":"/static/9f5e35a008a1ad623da12470ad0f1577/fa430/viz.png 350w,\n/static/9f5e35a008a1ad623da12470ad0f1577/694d8/viz.png 700w,\n/static/9f5e35a008a1ad623da12470ad0f1577/6f725/viz.png 1400w,\n/static/9f5e35a008a1ad623da12470ad0f1577/ea429/viz.png 2100w,\n/static/9f5e35a008a1ad623da12470ad0f1577/83486/viz.png 2647w","srcWebp":"/static/9f5e35a008a1ad623da12470ad0f1577/0326e/viz.webp","srcSetWebp":"/static/9f5e35a008a1ad623da12470ad0f1577/d0d48/viz.webp 350w,\n/static/9f5e35a008a1ad623da12470ad0f1577/64998/viz.webp 700w,\n/static/9f5e35a008a1ad623da12470ad0f1577/0326e/viz.webp 1400w,\n/static/9f5e35a008a1ad623da12470ad0f1577/167eb/viz.webp 2100w,\n/static/9f5e35a008a1ad623da12470ad0f1577/21f13/viz.webp 2647w","sizes":"(max-width: 1400px) 100vw, 1400px"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABW0lEQVQoz42SS2sCUQyF/dP+DBfu1LVFt90UsZS2Kii+dcZ5v9WZURQUu+5pzkXBIoUuQi73Jl9OclM4nU6gnc9nHI9H7Pd7xHGMLMtwOByQJImyNE0RbTawPQ9OECDebpGs18jznLnfl8uFnK/CPZAg2zShTaewxHuS/FSv47PbhS/nTrOJ12oVL6USOo2GigvCkPm/gYTRE+i6Lnzfh9bvY9nrwZeE1XiMcauFj1oNz8Ui3spl6IMBPIkNo+h/QNdxsJpMVJI5n+O9UsGk3YYmIGu1QiCx7CCUgg8t34CclS/zoapAKtO7TJJZeVKExjmyTZ4ZGwn4QeEN6to29NEIlijSh0Ol0NF1GDIrYzaDtVjA1jQY8m7NF0q5I2ofFV6B/BBCTDFDzFou4RiG8oSxEM+2QPjO2bry/mfLXJV8t1OexlVJpcVMViOVNVH3cpdd77dcG4m/b/kHQy8/hbdTu2wAAAAASUVORK5CYII=","aspectRatio":2.5281757402101244,"src":"/static/9f5e35a008a1ad623da12470ad0f1577/cb61f/viz.png","srcSet":"/static/9f5e35a008a1ad623da12470ad0f1577/336c1/viz.png 240w,\n/static/9f5e35a008a1ad623da12470ad0f1577/51d41/viz.png 480w,\n/static/9f5e35a008a1ad623da12470ad0f1577/cb61f/viz.png 960w,\n/static/9f5e35a008a1ad623da12470ad0f1577/350e1/viz.png 1440w,\n/static/9f5e35a008a1ad623da12470ad0f1577/ba228/viz.png 1920w,\n/static/9f5e35a008a1ad623da12470ad0f1577/83486/viz.png 2647w","srcWebp":"/static/9f5e35a008a1ad623da12470ad0f1577/fcc10/viz.webp","srcSetWebp":"/static/9f5e35a008a1ad623da12470ad0f1577/2b5a3/viz.webp 240w,\n/static/9f5e35a008a1ad623da12470ad0f1577/35871/viz.webp 480w,\n/static/9f5e35a008a1ad623da12470ad0f1577/fcc10/viz.webp 960w,\n/static/9f5e35a008a1ad623da12470ad0f1577/4693b/viz.webp 1440w,\n/static/9f5e35a008a1ad623da12470ad0f1577/30cf3/viz.webp 1920w,\n/static/9f5e35a008a1ad623da12470ad0f1577/21f13/viz.webp 2647w","sizes":"(max-width: 960px) 100vw, 960px"},"seo":{"src":"/static/9f5e35a008a1ad623da12470ad0f1577/7ef28/viz.png"}}}],"category":"Physical Computing"}}}