This is a relatively simple D3 demo using electoral college results culled from the Federal Election Commission. Red states are states in which the Republican candidate won more votes, and blue states are Democratic. (We use this rule because in 2008, Nebraska cast one vote for Obama and four for McCain.)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
use bitflags::bitflags; | |
use nom::{ | |
bytes::streaming as bytes, combinator, error::ErrorKind, multi, number::streaming as number, | |
Err as NomErr, IResult, | |
}; | |
use std::{ | |
fs::File as StdFile, | |
io::{self, Read as _, Seek as _, SeekFrom}, | |
path::Path, | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = function (grunt) { | |
grunt.initConfig({ | |
ts: { | |
'custom-template': { | |
html: ['file.html'], | |
src: ['.'], | |
options: { | |
compile: false, | |
htmlOutputTemplate: 'export default \'<%= content %>\'', | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>FNS map</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> | |
<style> | |
.fns-map__state { |
I hereby claim:
- I am gustavderdrache on github.
- I am gustavderdrache (https://keybase.io/gustavderdrache) on keybase.
- I have a public key whose fingerprint is 05C6 B1ED 7AEC A640 6A11 974A EFA8 2C7C 534D 20A8
To claim this, I am signing this object:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
The first chart demonstrates putting an area chart "behind" the lines and symbols. The area chart has an opacity of 50% in order to help the line graph be visible.
A few notes:
- The symbols'
fill
attribute (white) covers the area. - The line that is supposed to be highlighted has been lost, even at 50% opacity.
This graph is structured as follows:
- There is a single SVG
<path>
element at the root containing the basic line graph. - Above that, the highlighted lines are SVG
<line>
elements representing important segments. - Above that are the symbols (SVG
<path>
elements generated by d3.js'd3.svg.symbol
generator) for the data points.
I have a number of objections to this approach:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>svg clipping is totally ballin'</title> | |
</head> | |
<body> | |
<svg version="1.1" width="500" height="400"> | |
<defs> | |
<clipPath id="cup"> | |
<!-- This is as close as I could get to drawing a cup object --> |
NewerOlder