Skip to content

Instantly share code, notes, and snippets.

View josecorella's full-sized avatar
🥐
Working from home

José Corella josecorella

🥐
Working from home
View GitHub Profile
@josecorella
josecorella / index.html
Created May 1, 2021 06:00
A11: Redesigned Vis using White Hat Principles
<!DOCTYPE html>
<html lang="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
.states {
fill: rgb(204, 204, 204);
stroke: #fff;
}
@josecorella
josecorella / index.html
Created May 1, 2021 04:56
A11: White/Black Hat Visualizations
<!DOCTYPE html>
<html lang="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
@josecorella
josecorella / emissions.csv
Created May 1, 2021 03:54
A11: White-Hat Visulization
Country Year Emissions
China 2012 522000
United States 2012 281000
India 2012 251000
Mexico 2012 111000
Russia 2012 64800
France and Monaco 2012 40300
United Kingdom 2012 24100
South Africa 2012 19900
@josecorella
josecorella / black-hat.js
Created May 1, 2021 03:52
A11: Black-Hat Visualization
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var pollution = new Map();
var pollution_values = [];
var pollutant_countries = [];
var promises = [
d3.csv("emissions.csv", function (d) {
@josecorella
josecorella / index.html
Last active April 17, 2021 06:45
A10: Proportional Symbols
<!DOCTYPE html>
<html lang="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
.states {
fill: rgb(204, 204, 204);
stroke: #fff;
}
@josecorella
josecorella / choropleth.js
Last active April 16, 2021 18:21
A10: Choropleth Map
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var migration = new Map();
var county_names = new Map();
var path = d3.geoPath();
var x = d3.scaleLinear().domain([1, 10]).rangeRound([600, 860]);
@josecorella
josecorella / data.tsv
Created April 9, 2021 02:14
A9: Interaction in D3
date New York San Francisco Austin
20111001 63.4 62.7 72.2
20111002 58.0 59.9 67.7
20111003 53.3 59.1 69.4
20111004 55.7 58.8 68.0
20111005 64.2 58.7 72.4
20111006 58.8 57.0 77.0
20111007 57.9 56.7 82.3
20111008 61.8 56.8 78.9
20111009 69.3 56.7 68.8
@josecorella
josecorella / index.html
Created March 30, 2021 01:50
A8: Network Visualizations in D3
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
}
@josecorella
josecorella / index.html
Created March 23, 2021 07:39
A7: Qualitative Color Bar Graph
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
}
@josecorella
josecorella / diverging_color.js
Created March 23, 2021 06:59
A7: Divergent Color Bar Chart
const country = "Country";
const popGrowth = "Data.Health.Population Growth";
var countries = [
"Mexico",
"Argentina",
"United States",
"Denmark",
"Central Europe and the Baltics",
"Hungary",
"Romania",