Add VT2-examples: all 6 chapters of 'Visualize This' (110 files) — data scraping, ETL, trends, categorical, multivariate, spatial, distribution analysis
This commit is contained in:
neo committed
1 parent
088771a9cf
commit
b42b866a8c
110 files changed
+400895
No files matched your search
@@ -0,0 +1,16 @@
|
||||
"code" "pctnokidsf" "pctkidsf" "pctnokidsm" "pctkidsm" "desc" "durmedkidsf" "durmednokidsf" "durmedkidsm" "durmednokidsm"
|
||||
30201 0.2 20.7 0.2 10.3 "Homework" 45 0 45 0
|
||||
30101 0.9 71.2 0.6 46.8 "Physical care" 50 0 31 0
|
||||
30103 0.8 21.6 0.3 21.4 "Playing, not sports" 70 0 60 0
|
||||
30112 0.9 48 0.3 27.2 "Picking up/dropping off" 10 0 10 0
|
||||
30102 0.2 14.5 0 9.1 "Reading to/with" 20 0 20 0
|
||||
30302 0.1 3 0 0.6 "Obtaining medical care" 60 0 50 0
|
||||
30301 0.1 3 0 0.8 "Providing medical care" 15 0 30 0
|
||||
30111 0.2 11.7 0.2 4.9 "Waiting for/with" 15 0 15 0
|
||||
30202 0 1.7 0 0.5 "Meetings and school conferences" 25 0 30 0
|
||||
30106 0.3 13.8 0.2 5.7 "Talking with/listening" 25 0 25 0
|
||||
30110 0.1 4.8 0 2.6 "Attending events" 71 0 85 0
|
||||
30109 0.3 12.1 0.1 5.1 "Looking after (as a pri. activity)" 40 0 45 0
|
||||
30105 0 1.3 0 1 "Playing sports" 43 0 60 0
|
||||
30108 0 6.4 0 1.6 "Organization and planning" 10 0 15 0
|
||||
30303 0.1 1.4 0 0.3 "Waiting for children's health" 20 0 30 0
|
||||
|
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Who Takes Care of the Kids</title>
|
||||
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
|
||||
<div id="main-wrapper">
|
||||
<h1>Time with the Kids</h1>
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
|
||||
<script src="js/d3.v7.min.js"></script>
|
||||
<script src="js/barbell.js"></script>
|
||||
@@ -0,0 +1,114 @@
|
||||
// Dimensions of chart.
|
||||
let margin = { top: 20, right: 20, bottom: 50, left: 290 },
|
||||
// width = parseInt(d3.select('#chart').style('width'), 10) - margin.left - margin.right,
|
||||
width = 650 - margin.left - margin.right,
|
||||
height = 550 - margin.top - margin.bottom;
|
||||
|
||||
// Start SVG
|
||||
let svg = d3.select("#chart").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
// Scales: x and y
|
||||
let x = d3.scaleLinear()
|
||||
.domain([0, 80])
|
||||
.range([0, width]);
|
||||
let y = d3.scaleBand()
|
||||
// .domain([3, 6])
|
||||
.range([height, 0]);
|
||||
|
||||
|
||||
let activities;
|
||||
let xAxis, yAxis, xAxisEl, yAxisEl;
|
||||
let barbell;
|
||||
|
||||
|
||||
// Load data
|
||||
const activitiesData = Promise.all([
|
||||
d3.tsv("data/hh-activities-withkids.tsv", d3.autoType)
|
||||
]);
|
||||
activitiesData.then(function(data) {
|
||||
activities = data[0].sort((a, b) => a.pctkidsf - b.pctkidsf);
|
||||
// console.log(activities);
|
||||
|
||||
// Initialize chart now that data is loaded.
|
||||
initChart();
|
||||
});
|
||||
|
||||
|
||||
function initChart() {
|
||||
|
||||
// x-axis
|
||||
xAxis = d3.axisBottom(x)
|
||||
.tickFormat(d => d + "%")
|
||||
.ticks(5)
|
||||
.tickSize(-height-8)
|
||||
.tickPadding(5);
|
||||
xAxisEl = svg.append("g")
|
||||
.attr("class", "x axis bottom")
|
||||
.attr("transform", "translate(0,"+(height+8)+")");
|
||||
xAxisEl.append("text")
|
||||
.attr("class", "axistitle")
|
||||
.attr("text-anchor", "start")
|
||||
.attr("x", 0).attr("y", 0)
|
||||
.attr("dx", "-.75em").attr("dy", "2.5em")
|
||||
.text("Engaged in Activity");
|
||||
xAxisEl.call(xAxis);
|
||||
|
||||
|
||||
// y-axis
|
||||
y.domain(activities.map(d => d.desc));
|
||||
yAxis = d3.axisLeft(y)
|
||||
.tickSize(0);
|
||||
yAxisEl = svg.append("g")
|
||||
.attr("class", "y axis left")
|
||||
.attr("transform", "translate("+(-8)+",0)");
|
||||
yAxisEl.call(yAxis);
|
||||
|
||||
|
||||
// barbells
|
||||
barbell = svg.selectAll(".barbell")
|
||||
.data(activities)
|
||||
.join("g")
|
||||
.attr("class", "barbell")
|
||||
.attr("transform", d =>
|
||||
"translate(0,"+(y(d.desc)+(y.bandwidth()/2))+")")
|
||||
.attr("id", d => "act"+d.code);
|
||||
|
||||
// connecting lines
|
||||
barbell.append("line")
|
||||
.attr("x1", d => x(d.pctkidsm))
|
||||
.attr("x2", d => x(d.pctkidsf))
|
||||
.attr("y1", 0).attr("y2", 0)
|
||||
.attr("stroke", "#000000");
|
||||
|
||||
// circles
|
||||
barbell.append("circle")
|
||||
.attr("class", "men")
|
||||
.attr("cx", d => x(d.pctkidsm))
|
||||
.attr("cy", 0)
|
||||
.attr("r", 6);
|
||||
barbell.append("circle")
|
||||
.attr("class", "women")
|
||||
.attr("cx", d => x(d.pctkidsf))
|
||||
.attr("cy", 0)
|
||||
.attr("r", 6);
|
||||
|
||||
// labels
|
||||
svg.append("text")
|
||||
.attr("x", x(activities[14].pctkidsm))
|
||||
.attr("y", y(activities[14].desc))
|
||||
.attr("text-anchor", "middle")
|
||||
.text("MEN");
|
||||
svg.append("text")
|
||||
.attr("x", x(activities[14].pctkidsf))
|
||||
.attr("y", y(activities[14].desc))
|
||||
.attr("text-anchor", "middle")
|
||||
.text("WOMEN");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
// https://d3js.org v7.4.0 Copyright 2010-2022 Mike Bostock
|
||||
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function n(t,n){return null==t||null==n?NaN:t<n?-1:t>n?1:t>=n?0:NaN}function e(t){let e=t,r=t,i=t;function o(t,n,e=0,o=t.length){if(e<o){if(0!==r(n,n))return o;do{const r=e+o>>>1;i(t[r],n)<0?e=r+1:o=r}while(e<o)}return e}return 2!==t.length&&(e=(n,e)=>t(n)-e,r=n,i=(e,r)=>n(t(e),r)),{left:o,center:function(t,n,r=0,i=t.length){const a=o(t,n,r,i-1);return a>r&&e(t[a-1],n)>-e(t[a],n)?a-1:a},right:function(t,n,e=0,o=t.length){if(e<o){if(0!==r(n,n))return o;do{const r=e+o>>>1;i(t[r],n)<=0?e=r+1:o=r}while(e<o)}return e}}}function r(t){return null===t?NaN:+t}const i=e(n),o=i.right,a=i.left,u=e(r).center;var c=o;function f(t,n){let e=0;if(void 0===n)for(let n of t)null!=n&&(n=+n)>=n&&++e;else{let r=-1;for(let i of t)null!=(i=n(i,++r,t))&&(i=+i)>=i&&++e}return e}function s(t){return 0|t.length}function l(t){return!(t>0)}function h(t){return"object"!=typeof t||"length"in t?t:Array.from(t)}function d(t,n){let e,r=0,i=0,o=0;if(void 0===n)for(let n of t)null!=n&&(n=+n)>=n&&(e=n-i,i+=e/++r,o+=e*(n-i));else{let a=-1;for(let u of t)null!=(u=n(u,++a,t))&&(u=+u)>=u&&(e=u-i,i+=e/++r,o+=e*(u-i))}if(r>1)return o/(r-1)}function p(t,n){const e=d(t,n);return e?Math.sqrt(e):e}function g(t,n){let e,r;if(void 0===n)for(const n of t)null!=n&&(void 0===e?n>=n&&(e=r=n):(e>n&&(e=n),r<n&&(r=n)));else{let i=-1;for(let o of t)null!=(o=n(o,++i,t))&&(void 0===e?o>=o&&(e=r=o):(e>o&&(e=o),r<o&&(r=o)))}return[e,r]}class y{constructor(){this._partials=new Float64Array(32),this._n=0}add(t){const n=this._partials;let e=0;for(let r=0;r<this._n&&r<32;r++){const i=n[r],o=t+i,a=Math.abs(t)<Math.abs(i)?t-(o-i):i-(o-t);a&&(n[e++]=a),t=o}return n[e]=t,this._n=e+1,this}valueOf(){const t=this._partials;let n,e,r,i=this._n,o=0;if(i>0){for(o=t[--i];i>0&&(n=o,e=t[--i],o=n+e,r=e-(o-n),!r););i>0&&(r<0&&t[i-1]<0||r>0&&t[i-1]>0)&&(e=2*r,n=o+e,e==n-o&&(o=n))}return o}}class InternMap extends Map{constructor(t,n=m){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:n}}),null!=t)for(const[n,e]of t)this.set(n,e)}get(t){return super.get(v(this,t))}has(t){return super.has(v(this,t))}set(t,n){return super.set(_(this,t),n)}delete(t){return super.delete(b(this,t))}}class InternSet extends Set{constructor(t,n=m){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:n}}),null!=t)for(const n of t)this.add(n)}has(t){return super.has(v(this,t))}add(t){return super.add(_(this,t))}delete(t){return super.delete(b(this,t))}}function v({_intern:t,_key:n},e){const r=n(e);return t.has(r)?t.get(r):e}function _({_intern:t,_key:n},e){const r=n(e);return t.has(r)?t.get(r):(t.set(r,e),e)}function b({_intern:t,_key:n},e){const r=n(e);return t.has(r)&&(e=t.get(r),t.delete(r)),e}function m(t){return null!==t&&"object"==typeof t?t.valueOf():t}function x(t){return t}function w(t,...n){return k(t,x,x,n)}function M(t,...n){return k(t,Array.from,x,n)}function A(t,n){for(let e=1,r=n.length;e<r;++e)t=t.flatMap((t=>t.pop().map((([n,e])=>[...t,n,e]))));return t}function T(t,n,...e){return k(t,x,n,e)}function S(t,n,...e){return k(t,Array.from,n,e)}function E(t){if(1!==t.length)throw new Error("duplicate key");return t[0]}function k(t,n,e,r){return function t(i,o){if(o>=r.length)return e(i);const a=new InternMap,u=r[o++];let c=-1;for(const t of i){const n=u(t,++c,i),e=a.get(n);e?e.push(t):a.set(n,[t])}for(const[n,e]of a)a.set(n,t(e,o));return n(a)}(t,0)}function N(t,n){return Array.from(n,(n=>t[n]))}function C(t,...n){if("function"!=typeof t[Symbol.iterator])throw new TypeError("values is not iterable");t=Array.from(t);let[e]=n;if(e&&2!==e.length||n.length>1){const r=Uint32Array.from(t,((t,n)=>n));return n.length>1?(n=n.map((n=>t.map(n))),r.sort(((t,e)=>{for(const r of n){const n=z(r[t],r[e]);if(n)return n}}))):(e=t.map(e),r.sort(((t,n)=>z(e[t],e[n])))),N(t,r)}return t.sort(P(e))}function P(t=n){if(t===n)return z;if("function"!=typeof t)throw new TypeError("compare is not a function");return(n,e)=>{const r=t(n,e);return r||0===r?r:(0===t(e,e))-(0===t(n,n))}}function z(t,n){return(null==t||!(t>=t))-(null==n||!(n>=n))||(t<n?-1:t>n?1:0)}var D=Array.prototype.slice;function R(t){return()=>t}var F=Math.sqrt(50),q=Math.sqrt(10),O=Math.sqrt(2);function U(t,n,e){var r,i,o,a,u=-1;if(e=+e,(t=+t)===(n=+n)&&e>0)return[t];if((r=n<t)&&(i=t,t=n,n=i),0===(a=I(t,n,e))||!isFinite(a))return[];if(a>0){let e=Math.round(t/a),r=Math.round(n/a);for(e*a<t&&++e,r*a>n&&--r,o=new Array(i=r-e+1);++u<i;)o[u]=(e+u)*a}else{a=-a;let e=Math.round(t*a),r=Math.round(n*a);for(e/a<t&&++e,r/a>n&&--r,o=new Array(i=r-e+1);++u<i;)o[u]=(e+u)/a}return r&&o.reverse(),o}function I(t,n,e){var r=(n-t)/Math.max(0,e),i=Math.floor(Math.log(r)/Math.LN10),o=r/Math.pow(10,i);return i>=0?(o>=F?10:o>=q?5:o>=O?2:1)*Math.pow(10,i):-Math.pow(10,-i)/(o>=F?10:o>=q?5:o>=O?2:1)}funLine truncated
|
||||
@@ -0,0 +1,91 @@
|
||||
/* #Reset & Basics (Inspired by E. Meyers)
|
||||
================================================== */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
body {
|
||||
line-height: 1; }
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
blockquote, q {
|
||||
quotes: none; }
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none; }
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
|
||||
/* Main layout
|
||||
============================ */
|
||||
|
||||
#main-wrapper {
|
||||
width: 600px;
|
||||
margin: 40px auto;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
h1 {
|
||||
font-family: Georgia, serif;
|
||||
font-size: 1.45em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Chart
|
||||
============================ */
|
||||
|
||||
#chart {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
text {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.axis .axistitle {
|
||||
text-transform: uppercase;
|
||||
fill: #333;
|
||||
font-size: .8rem;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #e0e0e0;
|
||||
stroke-width: .5px;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.x.axis path, .y.axis path {
|
||||
display: none;
|
||||
}
|
||||
.barbell line {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.barbell circle {
|
||||
stroke: #000;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.barbell circle.men {
|
||||
fill: #317e7f;
|
||||
}
|
||||
.barbell circle.women {
|
||||
fill: #f98e1a;
|
||||
}
|
||||
|
||||
|
||||
/* Interaction
|
||||
============================ */
|
||||
|
||||
circle.current {
|
||||
stroke: #000;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user