Skip to content

Instantly share code, notes, and snippets.

View mmazanec22's full-sized avatar
🚲

Melanie Mazanec mmazanec22

🚲
12 followers · 19 following
View GitHub Profile
@mmazanec22
mmazanec22 / index.html
Last active September 20, 2017 21:47
Tooltip That Doesn't Collide With Edges
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src='./tooltip.js'></script>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
@mmazanec22
mmazanec22 / index.html
Last active September 22, 2017 23:24
Updating Bar Graph
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src='./updateHistogram.js'></script>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
@mmazanec22
mmazanec22 / hackedBin.js
Last active September 22, 2017 23:39
Hexbins Relative In Size To Entire Dataset of Objects
document.addEventListener('DOMContentLoaded', () => {
const parentDiv = d3.select('.parent-div');
const width = 960;
const height = 500;
const svg = parentDiv.append('svg')
.attr('width', width)
.attr('height', height);
const options = {
@mmazanec22
mmazanec22 / README.md
Last active January 26, 2018 16:05
Accessible Bar Chart

Accessible Bar Chart Prototype

This is a quick and imperfect prototype to illustrate two ideas that might allow a blind or visually impaired user to experience a bar chart. One concept is using pitch to indicate the relative height of the different bars (building upon this gist: http://bl.ocks.org/aholachek/6e18a82c0f0ada144b854f788c07d7a4). To try this, any user may use the mouse or the arrow keys to navigate the bars.

The other idea is to apply aria labels and roles to make the different svg elements available to screen readers. To try this, turn on the screen reader (on a Mac, cmd + F5), tab your way into the chart, then use the arrow keys to navigate the bars. The screen reader will announce x and y values (the pitch will still sound as well-- in a real implementation, this should probably be turned off by default so as not to conflict with the screen reader).

Feedback and improvements are welcome!

@mmazanec22
mmazanec22 / .block
Created February 16, 2018 20:25 — forked from tomshanley/.block
Sankey with Minard labels on the links
license: mit
@mmazanec22
mmazanec22 / FlowGraph.js
Last active March 28, 2018 21:28
FlowGraph Prototype - debugging node resize
class FlowGraph{
constructor(parentElement, inputData = levelOne) {
this.parentElement = d3.select(parentElement);
this.width = this.parentElement.style('width').replace('px', '');
this.height = this.parentElement.style('height').replace('px', '');
this.verticalMargins = this.height * 0.015;
this.horizontalMargins = this.width * 0.015;
this.data = inputData;
@mmazanec22
mmazanec22 / script.js
Last active May 1, 2018 20:30
ACA mobile jQuery experiment
// Add in Default.master file-- also see changes in Google Sheet
<script type="text/javascript">
$(function () {
$('font').attr('size', '')
$('span').css('line-height', 'unset')
.css('font-size', 'unset')
$('theForm')
.css('height', '100vh')
.css('letter-spacing', '0.12em')
@mmazanec22
mmazanec22 / index.html
Last active June 5, 2018 12:55
Semiotic Diverging Bar With Line
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/semiotic@1.11.4/dist/semiotic.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style>
body {
@mmazanec22
mmazanec22 / index.html
Last active June 10, 2018 02:02
Permit Types
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="./permits.js"></script>
<style type="text/css">
html, body {
height: 100vh;
width: 100vw;
@mmazanec22
mmazanec22 / data.js
Created June 21, 2018 22:01
TRC Timeline
const trcData = {
2018: [
{
"Project Name": "Crayton Park",
"Record Number": "17-09935PZ",
"Street Address": "86 Crayton Road",
"Project Type": "Major Sub",
"Project Modifier": "",
"Planner": "Jessica Bernstein",
"Description": "A request for the review of a 16 lot subdivision on the property known as 86 Crayton Road and PIN 9657-46-3875. The project contact is Marty Kocot and the property owner is AMARX Construction, LLC.",