├── combo ├── bar_line4_stats_rf │ ├── timeseries.js │ ├── barline_table.css │ └── index.html ├── bar_line2 │ └── barline.css ├── bar_line │ ├── bar_line.css │ └── data.csv ├── bar_line4_stats │ ├── barline_table.css │ └── index.html ├── bar_line3 │ └── barline_table.css ├── bar_gmap │ └── barmap.css ├── bar_mapbox │ └── barmap.css ├── bar_line2_table │ └── barline_table.css └── donut_table │ ├── donut_table.css │ └── index.html ├── squarechart ├── README.md └── demographics │ ├── Summary of Functions.pdf │ ├── css │ └── style.css │ ├── data │ └── demographics.csv │ └── index.html ├── README.md ├── bar ├── race │ ├── README.md │ ├── index.html │ ├── preprocessing │ │ └── preprocessing.py │ ├── urls.js │ └── bar.css ├── stacked diverging │ ├── bar.css │ └── age.csv ├── basic │ ├── votes.csv │ ├── bar.css │ └── index.html ├── stacked grouped transition │ └── bar.css ├── stacked grouped normalized │ ├── bar.css │ └── age_index.html ├── transition │ ├── votes.csv │ └── bar.css ├── stacked diverging subway │ ├── bar.css │ └── fakedata_wide.csv ├── join_enter_update_exit │ └── bar.css └── sortable │ └── bar.css ├── img ├── barchart.png ├── baseball.png ├── mlb2018.png └── scatterplot.png ├── .gitignore ├── maps ├── michigan_tipsy │ ├── michigan.css │ └── index.html ├── michigan_tooltipster │ ├── michigan.css │ └── index.html ├── michigan_bootstrap │ ├── cities.csv │ ├── css │ │ ├── michigan.css │ │ └── style.css │ └── michigan.css ├── michigan_cities_bootstrap │ └── css │ │ ├── michigan.css │ │ └── style.css ├── michigan │ └── michigan.css ├── statecounty │ ├── statecounty.css │ ├── choropleth_state.csv │ ├── state_fips_abbr.csv │ └── choropleth_county.csv ├── state │ ├── choropleth.csv │ └── choropleth.css ├── hexmap │ ├── michigan.css │ └── index.html ├── county │ └── choropleth_county.csv └── cities.geojson ├── .gitattributes ├── donut ├── basic │ ├── age.csv │ ├── data.csv │ ├── donut.css │ ├── index.html │ └── donut_chart.js ├── transition │ ├── dummy.csv │ ├── donut.css │ ├── index.html │ └── donut_chart_v2.js ├── groupdata │ ├── donut.css │ └── index.html └── reusable │ ├── species.tsv │ ├── donut.css │ ├── index.html │ └── crashes.tsv ├── line ├── single │ ├── line.css │ ├── line.csv │ └── index.html ├── multiline_hover │ └── line.css ├── multiline tippy │ └── line.css └── multiline │ ├── line.css │ └── index.html ├── exercises ├── donut │ ├── dummy.csv │ ├── donut.css │ ├── index.html │ └── donut_chart.js ├── homepage │ ├── output.png │ └── homepage.css ├── barline │ ├── index.html │ ├── daily.csv │ └── report.css ├── michigan │ ├── michigan.css │ └── index.html └── instructions.txt ├── viewBox ├── bird │ ├── bird.css │ └── index.html └── bar │ ├── votes.csv │ └── bar.css ├── selection ├── age.csv ├── d3nest.html ├── d3csv_googlesheet.html ├── 3circles.html ├── d3group_rollup.html └── map_object_ops.html ├── mapbox ├── mapbox-GL │ ├── features.csv │ ├── features.geojson │ ├── legend.html │ ├── geojson.html │ ├── points csv.html │ ├── points geojson path.html │ ├── points geojson.html │ └── points csv path.html ├── hexmap │ └── michigan.css └── mapbox-js │ ├── choropleth.csv │ ├── mapbox.css │ └── index.html ├── sliders └── index.css ├── tables ├── sortable │ ├── Addresses.csv │ ├── tables.css │ └── index.html ├── jquery DataTable │ ├── index.html │ ├── basic.html │ └── make_table.js └── linkable cells │ ├── summary.txt │ └── index.html ├── text └── text.css ├── heatmap ├── example2 │ └── heatmap.css └── example1 │ ├── heatmap.css │ └── data.csv ├── forcedirect ├── forcedirect.css └── index.html ├── path ├── s_curve │ ├── maynumber_forreal.csv │ ├── index.css │ └── index.html └── expanding_circular_swirl │ ├── index.css │ └── index.html ├── scatterplot ├── legend │ ├── scatter.css │ ├── workshop.csv │ └── index.html └── transition │ ├── scatter.css │ └── workshop.csv ├── utilities ├── css │ ├── nondatastyle.css │ ├── stylesheet.css │ └── timetable.css ├── main.js └── index.html ├── text-overlay-svg └── text-overlay-svg.css ├── sankey ├── sankey.css ├── sankey-names.json └── sankey.csv ├── linkedplots ├── tsmaps3sv │ ├── s3read.js │ ├── index.html │ └── tsmaps3sv.css ├── threelinecharts │ └── line.css ├── scatterplotmatrix │ └── matrix.css ├── ts │ └── ts.css ├── matrix │ └── matrix.css └── tsmap │ └── tsmap.css ├── treemap ├── static │ ├── treemap.css │ ├── index.html │ └── treemap.json └── zoomable │ └── ztreemap.css ├── circlepack ├── circlepack.css └── index.html ├── brush └── timeseries.css ├── timeseries ├── line │ └── timeseries.css └── hbar │ ├── timeseries.css │ └── reliability.csv ├── animation ├── movement │ └── index.html ├── chart_example_from_d3-graph-gallery.html └── cross-fade opacity │ └── index.html ├── calendar ├── index.html └── static │ └── css │ └── style.css ├── star-fill ├── index.css └── index.html ├── css └── img_modal.css ├── scrollama └── style.css ├── symbols └── index.html ├── crossfilter └── example.html └── legends └── continuous_discrete └── index.html /combo/bar_line4_stats_rf/timeseries.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /squarechart/README.md: -------------------------------------------------------------------------------- 1 | # demographic_vis -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # d3js-examples 2 | My sandbox for playing around with D3 examples 3 | -------------------------------------------------------------------------------- /bar/race/README.md: -------------------------------------------------------------------------------- 1 | # d3-bar-chart-race 2 | D3 bar chart race example for CSCAR workshop 3 | -------------------------------------------------------------------------------- /img/barchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/d3js-examples/master/img/barchart.png -------------------------------------------------------------------------------- /img/baseball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/d3js-examples/master/img/baseball.png -------------------------------------------------------------------------------- /img/mlb2018.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/d3js-examples/master/img/mlb2018.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | students/ 2 | linkedplots/**/trip*.csv 3 | linkedplots/**/s3read.js 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /bar/stacked diverging/bar.css: -------------------------------------------------------------------------------- 1 | .label { 2 | text-anchor: middle; 3 | font-size: 0.9em; 4 | } -------------------------------------------------------------------------------- /img/scatterplot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/d3js-examples/master/img/scatterplot.png -------------------------------------------------------------------------------- /maps/michigan_tipsy/michigan.css: -------------------------------------------------------------------------------- 1 | path.county { 2 | fill: #00274c; 3 | stroke: #fff; 4 | } 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto -------------------------------------------------------------------------------- /donut/basic/age.csv: -------------------------------------------------------------------------------- 1 | index,value,week 2 | <25,0,1 3 | 25-34,4,6 4 | 35-44,3,1 5 | 45-54,3,0 6 | 55+,2,1 -------------------------------------------------------------------------------- /line/single/line.css: -------------------------------------------------------------------------------- 1 | .line { 2 | fill: none; 3 | stroke: steelblue; 4 | stroke-width: 2px; 5 | } 6 | -------------------------------------------------------------------------------- /exercises/donut/dummy.csv: -------------------------------------------------------------------------------- 1 | index,value,week 2 | Alpha,0,1 3 | Beta,4,6 4 | Delta,3,1 5 | Epsilon,3,0 6 | Frank,2,1 -------------------------------------------------------------------------------- /donut/transition/dummy.csv: -------------------------------------------------------------------------------- 1 | index,value,week 2 | Alpha,0,1 3 | Beta,4,6 4 | Delta,3,1 5 | Epsilon,3,0 6 | Frank,2,1 7 | -------------------------------------------------------------------------------- /exercises/homepage/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/d3js-examples/master/exercises/homepage/output.png -------------------------------------------------------------------------------- /viewBox/bird/bird.css: -------------------------------------------------------------------------------- 1 | .bird-cage { 2 | height: 400px; 3 | width: 200px; 4 | border: 2px solid green; 5 | } -------------------------------------------------------------------------------- /selection/age.csv: -------------------------------------------------------------------------------- 1 | group,index,value,week 2 | value,<25,0,1 3 | value,25-34,4,6 4 | value,35-44,3,1 5 | value,45-54,3,0 6 | value,55+,2,1 -------------------------------------------------------------------------------- /bar/basic/votes.csv: -------------------------------------------------------------------------------- 1 | name,value 2 | 10,93 3 | 9,412 4 | 8,672 5 | 7,486 6 | 6,508 7 | 5,303 8 | 4,202 9 | 3,224 10 | 2,132 11 | 1,47 12 | -------------------------------------------------------------------------------- /bar/stacked grouped transition/bar.css: -------------------------------------------------------------------------------- 1 | .label { 2 | text-anchor: middle; 3 | } 4 | 5 | #stacked-grouped-bar-chart { 6 | border: 2px solid black 7 | } -------------------------------------------------------------------------------- /squarechart/demographics/Summary of Functions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caocscar/d3js-examples/master/squarechart/demographics/Summary of Functions.pdf -------------------------------------------------------------------------------- /maps/michigan_tooltipster/michigan.css: -------------------------------------------------------------------------------- 1 | path.county { 2 | fill: #00274c; 3 | stroke: #fff; 4 | } 5 | 6 | .tooltip_templates { 7 | display: none; 8 | } -------------------------------------------------------------------------------- /mapbox/mapbox-GL/features.csv: -------------------------------------------------------------------------------- 1 | lng,lat 2 | -113.51,53.54 3 | -113.52,53.55 4 | -113.53,53.56 5 | -113.45,53.44 6 | -113.49,53.57 7 | -113.48,53.48 8 | -113.47,53.50 9 | -------------------------------------------------------------------------------- /sliders/index.css: -------------------------------------------------------------------------------- 1 | .bottom { 2 | position: relative; 3 | } 4 | 5 | .top { 6 | position: absolute; 7 | fill: #2719C7; 8 | /* stroke: null; */ 9 | } 10 | -------------------------------------------------------------------------------- /bar/stacked grouped normalized/bar.css: -------------------------------------------------------------------------------- 1 | .legend-headway-title, .legend-headway-text { 2 | font-size: 0.8em; 3 | } 4 | 5 | .legend-headway-text { 6 | text-anchor: middle; 7 | } -------------------------------------------------------------------------------- /bar/transition/votes.csv: -------------------------------------------------------------------------------- 1 | name,value,value2 2 | 10,93,253 3 | 9,412,186 4 | 8,672,385 5 | 7,486,235 6 | 6,508,235 7 | 5,303,199 8 | 4,202,264 9 | 3,224,562 10 | 2,132,362 11 | 1,47,419 12 | -------------------------------------------------------------------------------- /viewBox/bar/votes.csv: -------------------------------------------------------------------------------- 1 | name,value,value2 2 | 10,93,253 3 | 9,412,186 4 | 8,672,385 5 | 7,486,235 6 | 6,508,235 7 | 5,303,199 8 | 4,202,264 9 | 3,224,562 10 | 2,132,362 11 | 1,47,419 12 | -------------------------------------------------------------------------------- /bar/stacked diverging/age.csv: -------------------------------------------------------------------------------- 1 | age,M,F 2 | 0-19,2299,9922 3 | 20-29,7853,3587 4 | 30-39,8823,3288 5 | 40-49,9919,9199 6 | 50-59,10866,6801 7 | 60-69,9559,9559 8 | 70-79,6439,9346 9 | 80+,6527,7256 10 | -------------------------------------------------------------------------------- /donut/basic/data.csv: -------------------------------------------------------------------------------- 1 | group,index,value 2 | apple,N,532 3 | apple,E,279 4 | apple,S,197 5 | apple,W,237 6 | apple,NW,445 7 | orange,N,200 8 | orange,E,200 9 | orange,S,200 10 | orange,W,200 11 | orange,NW,200 -------------------------------------------------------------------------------- /line/multiline_hover/line.css: -------------------------------------------------------------------------------- 1 | .grid line { 2 | stroke: #e4e4e4; 3 | shape-rendering: crispEdges; 4 | } 5 | 6 | .grid path { 7 | stroke-width: 0; 8 | } 9 | 10 | .rectangle { 11 | fill: #e5e4ff; 12 | } 13 | -------------------------------------------------------------------------------- /tables/sortable/Addresses.csv: -------------------------------------------------------------------------------- 1 | ID,Address,City,State,Zip 2 | 1,4600 Silver Hill Rd,Suitland,MD,20746 3 | 2,436 15th St SE,Washington,DC,20003 4 | 3,1203 White St,Ann Arbor,MI,48103 5 | 4,3228 Heyward St,Columbia,SC,29205 6 | -------------------------------------------------------------------------------- /text/text.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Poppins', sans-serif; 3 | } 4 | 5 | .divider { 6 | fill: none; 7 | stroke: #00274c; 8 | stroke-width: 6px; 9 | } 10 | 11 | .eqn { 12 | font-size: 22px; 13 | } -------------------------------------------------------------------------------- /heatmap/example2/heatmap.css: -------------------------------------------------------------------------------- 1 | .tod-label { 2 | font-size: 18px; 3 | } 4 | 5 | .tile { 6 | shape-rendering: crispEdges; 7 | stroke: white; 8 | stroke-width: 1px; 9 | } 10 | 11 | .axis .tick text { 12 | font-size: 1.5em; 13 | } 14 | -------------------------------------------------------------------------------- /forcedirect/forcedirect.css: -------------------------------------------------------------------------------- 1 | .links line { 2 | stroke: #999; 3 | stroke-opacity: 0.6; 4 | } 5 | 6 | .nodes circle { 7 | stroke: #fff; 8 | stroke-width: 1.5px; 9 | } 10 | 11 | text { 12 | font-family: sans-serif; 13 | font-size: 14px; 14 | } 15 | -------------------------------------------------------------------------------- /maps/michigan_bootstrap/cities.csv: -------------------------------------------------------------------------------- 1 | name,lat,lng 2 | Bay City,43.59,-83.89 3 | Detroit,42.33,-83.14 4 | Flint,43.01,-83.69 5 | Grand Rapids,42.96,-85.66 6 | Kalamazoo,42.29,-85.58 7 | Muskegon,43.23,-86.25 8 | Pontiac,42.64,-83.29 9 | Saginaw,43.42,-83.95 10 | -------------------------------------------------------------------------------- /path/s_curve/maynumber_forreal.csv: -------------------------------------------------------------------------------- 1 | Number,FirstName,LastName,Location,HireDate,AcceptedDate 2 | 1,Homer,Simpson,Ann Arbor - HQ,2017-05-01, 3 | 2,Amanda,Huggins,Ann Arbor - HQ,2019-12-01, 4 | 3,Seymour,Hatts,Ann Arbor - HQ,2020-10-19, 5 | 4,Katniss,Arrow,Ann Arbor - HQ,2021-12-01, 6 | -------------------------------------------------------------------------------- /scatterplot/legend/scatter.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px sans-serif; 3 | } 4 | 5 | .axis path, .axis line { 6 | fill: none; 7 | stroke: #000; 8 | shape-rendering: crispEdges; 9 | } 10 | 11 | .label { 12 | text-anchor: middle; 13 | } 14 | 15 | g.hidden { 16 | opacity: 0.2; 17 | } -------------------------------------------------------------------------------- /combo/bar_line2/barline.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: #ffcb05; /* #499bdd */; 3 | clip-path: url(#clip); /* clip bar with rectangle */ 4 | } 5 | 6 | .avgLine { 7 | fill: none; 8 | stroke: #00274c; 9 | stroke-width: 2px; 10 | clip-path: url(#clip); /* clip line with rectangle */ 11 | } 12 | -------------------------------------------------------------------------------- /scatterplot/transition/scatter.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px sans-serif; 3 | } 4 | 5 | .axis path, .axis line { 6 | fill: none; 7 | stroke: #000; 8 | shape-rendering: crispEdges; 9 | } 10 | 11 | .label { 12 | text-anchor: middle; 13 | } 14 | 15 | g.hidden { 16 | opacity: 0.2; 17 | } 18 | -------------------------------------------------------------------------------- /utilities/css/nondatastyle.css: -------------------------------------------------------------------------------- 1 | .row.content { 2 | height:auto; 3 | padding-top: 40px; 4 | } 5 | 6 | @media screen and (min-width:700px){ 7 | .row.content{ 8 | height:750px; 9 | padding-top: 0px; 10 | } 11 | 12 | @media screen and (min-width:1000px){ 13 | .row.content{ 14 | height:800px; 15 | } 16 | -------------------------------------------------------------------------------- /combo/bar_line/bar_line.css: -------------------------------------------------------------------------------- 1 | .bar { fill:rgb(112, 143, 233); } 2 | 3 | .line { 4 | fill: none; 5 | stroke: red; 6 | stroke-width: 4px; 7 | } 8 | 9 | .grid line { 10 | stroke: lightgrey; 11 | stroke-opacity: 0.7; 12 | shape-rendering: crispEdges; 13 | } 14 | 15 | .grid path { 16 | stroke-width: 0; 17 | } -------------------------------------------------------------------------------- /donut/basic/donut.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | margin: auto; 4 | position: relative; 5 | width: 960px; 6 | } 7 | 8 | tspan { 9 | font: 12px sans-serif; 10 | } 11 | 12 | .slices { 13 | opacity: 0.85; 14 | } 15 | 16 | .slices:hover { 17 | opacity: 1; 18 | } -------------------------------------------------------------------------------- /mapbox/hexmap/michigan.css: -------------------------------------------------------------------------------- 1 | #map, svg { 2 | position: relative; 3 | width: 750px; 4 | height: 900px; 5 | } 6 | 7 | .hex { 8 | fill: steelblue; 9 | } 10 | 11 | .top-buffer{ 12 | margin-top: 20px; 13 | } 14 | 15 | path.hex { 16 | /* stroke: white; 17 | stroke-width: 1px; */ 18 | fill-opacity: 0.5; 19 | } 20 | -------------------------------------------------------------------------------- /line/multiline tippy/line.css: -------------------------------------------------------------------------------- 1 | .tipsy { 2 | fill: none; 3 | stroke-width: 3px; 4 | stroke: orange; 5 | } 6 | 7 | .grid line { 8 | stroke: #e4e4e4; 9 | shape-rendering: crispEdges; 10 | } 11 | 12 | .grid path { 13 | stroke-width: 0; 14 | } 15 | 16 | .rectangle { 17 | fill-opacity: 0.1; 18 | fill: blue; 19 | } 20 | 21 | -------------------------------------------------------------------------------- /text-overlay-svg/text-overlay-svg.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Poppins', sans-serif; 3 | } 4 | 5 | .text-overlay { 6 | text-anchor: start; 7 | } 8 | 9 | .background-shadow-effect { 10 | fill: none; 11 | stroke: #fff; 12 | stroke-width: 20; 13 | } 14 | 15 | .stroke-width-42 { 16 | stroke-width: 42; 17 | } 18 | -------------------------------------------------------------------------------- /combo/bar_line4_stats/barline_table.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: #499bdd; 3 | clip-path: url(#clip); /* clip bar with rectangle */ 4 | } 5 | 6 | .avgLine { 7 | fill: none; 8 | stroke: #73000A; 9 | stroke-width: 2px; 10 | clip-path: url(#clip); /* clip line with rectangle */ 11 | } 12 | 13 | .summary { 14 | color: lightgreen; 15 | } 16 | -------------------------------------------------------------------------------- /combo/bar_line3/barline_table.css: -------------------------------------------------------------------------------- 1 | .bar, .obar { 2 | fill: #499bdd; 3 | clip-path: url(#clip); /* clip bar with rectangle */ 4 | } 5 | 6 | .avgLine, .oavgLine { 7 | fill: none; 8 | stroke: #73000A; 9 | stroke-width: 2px; 10 | clip-path: url(#clip); /* clip line with rectangle */ 11 | } 12 | 13 | .obar, .oavgLine { 14 | opacity: 0.2; 15 | } -------------------------------------------------------------------------------- /combo/bar_line4_stats_rf/barline_table.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: #499bdd; 3 | clip-path: url(#clip); /* clip bar with rectangle */ 4 | } 5 | 6 | .avgLine { 7 | fill: none; 8 | stroke: #73000A; 9 | stroke-width: 2px; 10 | clip-path: url(#clip); /* clip line with rectangle */ 11 | } 12 | 13 | .summary { 14 | color: rgb(214, 106, 57); 15 | } 16 | -------------------------------------------------------------------------------- /sankey/sankey.css: -------------------------------------------------------------------------------- 1 | .node rect { 2 | cursor: move; 3 | fill-opacity: .9; 4 | shape-rendering: crispEdges; 5 | } 6 | 7 | .node text { 8 | pointer-events: none; 9 | text-shadow: 0 1px 0 #fff; 10 | } 11 | 12 | .link { 13 | fill: none; 14 | stroke: #000; 15 | stroke-opacity: .3; 16 | } 17 | 18 | .link:hover { 19 | stroke-opacity: .6; 20 | } 21 | -------------------------------------------------------------------------------- /combo/bar_line/data.csv: -------------------------------------------------------------------------------- 1 | year,bar,line 2 | 2010-01-15,1,1.18 3 | 2010-01-16,2,2.11 4 | 2010-01-17,3,1.15 5 | 2010-01-18,4,2.45 6 | 2010-01-19,3,2.19 7 | 2010-01-20,3,2.15 8 | 2010-01-21,4,3.45 9 | 2010-01-22,2,2.79 10 | 2010-01-23,4,2.19 11 | 2010-01-24,4,3.15 12 | 2010-01-25,3,3.54 13 | 2010-01-26,2,3.79 14 | 2010-01-27,4,4.15 15 | 2010-01-28,1,4.44 16 | 2010-01-29,5,4.19 -------------------------------------------------------------------------------- /donut/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Donut Chart d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /maps/michigan_cities_bootstrap/css/michigan.css: -------------------------------------------------------------------------------- 1 | .counties { 2 | fill: #00274c; 3 | stroke: #fff; 4 | stroke-width: 1.5px; 5 | stroke-linejoin: round; 6 | stroke-linecap: round; 7 | } 8 | 9 | .county:hover, .city:hover { 10 | fill: #ffcb05; 11 | cursor: pointer; 12 | } 13 | 14 | .counties .active { 15 | display: none; 16 | } 17 | 18 | .cities { 19 | fill: #587abc; 20 | stroke: white; 21 | } 22 | -------------------------------------------------------------------------------- /exercises/homepage/homepage.css: -------------------------------------------------------------------------------- 1 | h1, .p { 2 | padding-top: 40px; 3 | text-align: center; 4 | font-family: 'Aleo', serif; 5 | } 6 | 7 | .p a { 8 | text-decoration: underline; 9 | color: blue; 10 | } 11 | 12 | .col{ 13 | text-align: center; 14 | font-family: 'Aleo', serif; 15 | } 16 | 17 | .col-md-4{ 18 | padding-top: 20px; 19 | text-align: center; 20 | } 21 | 22 | #ED { 23 | background: #fee; 24 | } 25 | -------------------------------------------------------------------------------- /line/multiline/line.css: -------------------------------------------------------------------------------- 1 | .vacation, .sick { 2 | fill: none; 3 | stroke-width: 3px; 4 | } 5 | 6 | .vacation { 7 | stroke: steelblue; 8 | } 9 | 10 | .sick { 11 | stroke: rgb(54, 114, 69); 12 | } 13 | 14 | .grid line { 15 | stroke: #e4e4e4; 16 | shape-rendering: crispEdges; 17 | } 18 | 19 | .grid path { 20 | stroke-width: 0; 21 | } 22 | 23 | .rectangle { 24 | fill-opacity: 0.1; 25 | fill: blue; 26 | } 27 | 28 | -------------------------------------------------------------------------------- /bar/race/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /linkedplots/tsmaps3sv/s3read.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | region: 'us-east-2', 3 | accessKeyId: '', 4 | secretAccessKey: '' 5 | }; 6 | const bucket = 'honda-dsrc-de-id'; 7 | const s3 = new AWS.S3(config); 8 | async function readS3Object(filename) { // csvParse assumes header 9 | return d3.csvParse(await s3.getObject({Bucket: bucket, Key: filename}) 10 | .promise().then(r => new TextDecoder("utf-8").decode(r.Body)) 11 | ) 12 | } -------------------------------------------------------------------------------- /treemap/static/treemap.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | margin: auto; 4 | position: relative; 5 | width: 960px; 6 | } 7 | form { 8 | position: absolute; 9 | right: 10px; 10 | top: 10px; 11 | } 12 | .node { 13 | border: solid 1px white; 14 | font: 10px sans-serif; 15 | line-height: 12px; 16 | overflow: hidden; 17 | position: absolute; 18 | text-indent: 2px; 19 | } 20 | -------------------------------------------------------------------------------- /path/expanding_circular_swirl/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica; 3 | font-size: 16px; 4 | } 5 | ol li { 6 | margin-bottom: 10px; 7 | } 8 | li.highlight { 9 | background: yellow; 10 | } 11 | path { 12 | fill: none; 13 | stroke: #999; 14 | } 15 | path.init { 16 | stroke-width: 2; 17 | } 18 | path.piece { 19 | stroke-width: 24; 20 | stroke: none; 21 | } 22 | line.sep { 23 | stroke-width: 0; 24 | stroke: white; 25 | } -------------------------------------------------------------------------------- /bar/stacked diverging subway/bar.css: -------------------------------------------------------------------------------- 1 | .header { 2 | text-anchor: middle; 3 | font-size: 0.8em; 4 | } 5 | 6 | .grid line, .x-axis line { 7 | stroke: black; 8 | stroke-opacity: 0.1; 9 | shape-rendering: crispEdges; 10 | } 11 | 12 | .grid path { 13 | stroke-width: 0; 14 | } 15 | 16 | .station { 17 | stroke: black; 18 | fill: white; 19 | } 20 | 21 | .headway { 22 | font-size: 0.8em; 23 | text-anchor: end; 24 | } -------------------------------------------------------------------------------- /donut/groupdata/donut.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | margin: auto; 4 | position: relative; 5 | width: 960px; 6 | } 7 | 8 | tspan { 9 | font: 16px sans-serif; 10 | text-anchor: middle; 11 | } 12 | 13 | .total { 14 | font-size: 3em; 15 | text-anchor: middle; 16 | } 17 | 18 | .chart_title { 19 | font-size: 2em; 20 | text-anchor: middle; 21 | } 22 | 23 | .age-group { 24 | font-weight: 700; 25 | } -------------------------------------------------------------------------------- /donut/transition/donut.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | margin: auto; 4 | position: relative; 5 | width: 960px; 6 | } 7 | 8 | tspan { 9 | font: 16px sans-serif; 10 | text-anchor: middle; 11 | } 12 | 13 | .total { 14 | font-size: 3em; 15 | text-anchor: middle; 16 | } 17 | 18 | .chart_title { 19 | font-size: 2em; 20 | text-anchor: middle; 21 | } 22 | 23 | .age-group { 24 | font-weight: 700; 25 | } -------------------------------------------------------------------------------- /exercises/donut/donut.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | margin: auto; 4 | position: relative; 5 | width: 960px; 6 | } 7 | 8 | tspan { 9 | font: 16px sans-serif; 10 | text-anchor: middle; 11 | } 12 | 13 | .total { 14 | font-size: 3em; 15 | text-anchor: middle; 16 | } 17 | 18 | .chart_title { 19 | font-size: 2em; 20 | text-anchor: middle; 21 | } 22 | 23 | .age-group { 24 | font-weight: 700; 25 | } -------------------------------------------------------------------------------- /utilities/css/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* bar chart text */ 2 | .chart { 3 | font-weight: bold; 4 | font-family: 'Helvetica'; 5 | text-anchor: middle; 6 | } 7 | 8 | 9 | /* text inside donut chart */ 10 | .count { 11 | font: 16px sans-serif; 12 | text-anchor: middle; 13 | } 14 | 15 | /* text for label */ 16 | .total { 17 | font-size: 3em; 18 | text-anchor: middle; 19 | font-family: 'Helvetica'; 20 | } 21 | .age-group { 22 | font-weight: 700; 23 | } -------------------------------------------------------------------------------- /circlepack/circlepack.css: -------------------------------------------------------------------------------- 1 | .node { 2 | cursor: pointer; 3 | } 4 | 5 | .node:hover { 6 | stroke: #000; 7 | stroke-width: 1.5px; 8 | } 9 | 10 | .node--leaf { 11 | fill: white; 12 | } 13 | 14 | .label { 15 | font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 16 | text-anchor: middle; 17 | text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; 18 | } 19 | 20 | .label, 21 | .node--root, 22 | .node--leaf { 23 | pointer-events: none; 24 | } 25 | -------------------------------------------------------------------------------- /exercises/barline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 15 | 16 | -------------------------------------------------------------------------------- /heatmap/example1/heatmap.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px sans-serif; 3 | } 4 | 5 | .label { 6 | font-size: 18px; 7 | } 8 | 9 | .tile { 10 | shape-rendering: crispEdges; 11 | stroke: white; 12 | stroke-width: 1px; 13 | } 14 | 15 | .axis path, 16 | .axis line { 17 | fill: none; 18 | stroke: #000; 19 | shape-rendering: crispEdges; 20 | } 21 | 22 | .tooltip text { 23 | font-size: 14px; 24 | } 25 | 26 | .tooltip-rect { 27 | fill: white; 28 | stroke: #000; 29 | } 30 | 31 | .tooltip-text { 32 | font-weight: bold; 33 | } -------------------------------------------------------------------------------- /sankey/sankey-names.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes":[ 3 | {"name":"Barry"}, 4 | {"name":"Frodo"}, 5 | {"name":"Elvis"}, 6 | {"name":"Sarah"}, 7 | {"name":"Alice"} 8 | ], 9 | "links":[ 10 | {"source":"Barry","target":"Elvis","value":2}, 11 | {"source":"Frodo","target":"Elvis","value":2}, 12 | {"source":"Frodo","target":"Sarah","value":2}, 13 | {"source":"Barry","target":"Alice","value":2}, 14 | {"source":"Elvis","target":"Sarah","value":2}, 15 | {"source":"Elvis","target":"Alice","value":2}, 16 | {"source":"Sarah","target":"Alice","value":4} 17 | ]} -------------------------------------------------------------------------------- /exercises/michigan/michigan.css: -------------------------------------------------------------------------------- 1 | /*Style for Custom Tooltip */ 2 | div.tooltip { 3 | position: absolute; 4 | text-align: center; 5 | min-width: 100px; 6 | height: auto; 7 | padding: 12px; 8 | font-size: 14px; 9 | background: rgba(43,43,43, 0.8); 10 | color: #fff; 11 | border-radius: 5px; 12 | pointer-events: none; 13 | line-height: 1; 14 | } 15 | 16 | .tooltip p { 17 | margin: 5px; 18 | } 19 | 20 | path.county { 21 | fill: #00274c; 22 | stroke: #fff; 23 | } 24 | 25 | path.county:hover { 26 | fill: #ffcb05; 27 | } -------------------------------------------------------------------------------- /combo/bar_gmap/barmap.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin:0; 3 | padding:0; 4 | } 5 | 6 | #map { 7 | /* position: relative; */ 8 | top: 0; 9 | bottom: 0; 10 | left: 40px; 11 | width: 620px; 12 | height: 400px; 13 | } 14 | 15 | .bar { 16 | fill: #ffcb05; /* #499bdd */; 17 | clip-path: url(#clip); /* clip bar with rectangle */ 18 | } 19 | 20 | #barchart { 21 | background:#f8f8f8; 22 | /* position:absolute; */ 23 | bottom:0;right:0;left:0; 24 | } 25 | 26 | .brush .extent { 27 | stroke:#fff; 28 | fill-opacity:0.125; 29 | shape-rendering:crispEdges; 30 | } 31 | -------------------------------------------------------------------------------- /line/single/line.csv: -------------------------------------------------------------------------------- 1 | date,close 2 | 1-May-12,58.13 3 | 30-Apr-12,53.98 4 | 27-Apr-12,67.00 5 | 26-Apr-12,89.70 6 | 25-Apr-12,99.00 7 | 24-Apr-12,130.28 8 | 23-Apr-12,166.70 9 | 20-Apr-12,234.98 10 | 19-Apr-12,345.44 11 | 18-Apr-12,443.34 12 | 17-Apr-12,543.70 13 | 16-Apr-12,580.13 14 | 13-Apr-12,605.23 15 | 12-Apr-12,622.77 16 | 11-Apr-12,626.20 17 | 10-Apr-12,628.44 18 | 9-Apr-12,636.23 19 | 5-Apr-12,633.68 20 | 4-Apr-12,624.31 21 | 3-Apr-12,629.32 22 | 2-Apr-12,618.63 23 | 30-Mar-12,599.55 24 | 29-Mar-12,609.86 25 | 28-Mar-12,617.62 26 | 27-Mar-12,614.48 27 | 26-Mar-12,606.98 -------------------------------------------------------------------------------- /combo/bar_mapbox/barmap.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin:0; 3 | padding:0; 4 | } 5 | 6 | #map { 7 | /* position: relative; */ 8 | top: 0; 9 | bottom: 0; 10 | left: 40px; 11 | width: 620px; 12 | height: 400px; 13 | } 14 | 15 | .bar { 16 | fill: #ffcb05; /* #499bdd */; 17 | clip-path: url(#clip); /* clip bar with rectangle */ 18 | } 19 | 20 | #barchart { 21 | background:#f8f8f8; 22 | /* position:absolute; */ 23 | bottom:0;right:0;left:0; 24 | } 25 | 26 | .brush .extent { 27 | stroke:#fff; 28 | fill-opacity:0.125; 29 | shape-rendering:crispEdges; 30 | } 31 | -------------------------------------------------------------------------------- /linkedplots/threelinecharts/line.css: -------------------------------------------------------------------------------- 1 | .prepost { 2 | fill: none; 3 | stroke: rgb(187, 243, 57); 4 | stroke-width: 2px; 5 | } 6 | 7 | .highlight { 8 | clip-path: url(#clip); /* clip line with rectangle */ 9 | } 10 | 11 | .event { 12 | fill: none; 13 | stroke: steelblue; 14 | stroke-width: 2px; 15 | } 16 | 17 | .selected { 18 | clip-path: url(#clip); /* clip line with rectangle */ 19 | } 20 | 21 | .grid line { 22 | stroke: black; 23 | stroke-opacity: 0.1; 24 | shape-rendering: crispEdges; 25 | } 26 | 27 | .grid path { 28 | stroke-width: 0; 29 | } 30 | 31 | .hidden { 32 | opacity: 0.2 33 | } 34 | -------------------------------------------------------------------------------- /bar/basic/bar.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: orange; 3 | } 4 | 5 | .axis text { 6 | font: 15px sans-serif; 7 | } 8 | 9 | .axis path, 10 | .axis line { 11 | fill: none; 12 | stroke: #000; 13 | shape-rendering: crispEdges; 14 | } 15 | 16 | .x.axis path { 17 | display: true; 18 | } 19 | 20 | .label { 21 | text-anchor: middle; 22 | font: 20px helvetica; 23 | } 24 | 25 | .grid line { 26 | stroke: lightgrey; 27 | stroke-opacity: 0.7; 28 | shape-rendering: crispEdges; 29 | } 30 | 31 | .grid path { 32 | stroke-width: 0; 33 | } 34 | 35 | .barlabel { 36 | fill: white; 37 | font: 14px sans-serif; 38 | text-anchor: middle; 39 | } -------------------------------------------------------------------------------- /scatterplot/legend/workshop.csv: -------------------------------------------------------------------------------- 1 | date,workshop,attend,register 2 | 20191101,sql,21,112 3 | 20190118,sql,20,67 4 | 20181207,sql,26,91 5 | 20180928,sql,34,211 6 | 20180316,sql,22,96 7 | 20171006,sql,26,208 8 | 20170314,sql,17,144 9 | 20160906,webscraping,34,34 10 | 20160906,webscraping,16,94 11 | 20170207,webscraping,17,39 12 | 20170620,webscraping,17,28 13 | 20180220,webscraping,10,17 14 | 20180619,webscraping,26,100 15 | 20190416,webscraping,12,25 16 | 20191011,webscraping,15,32 17 | 20170111,regex,23,59 18 | 20170124,regex,12,15 19 | 20171208,regex,13,24 20 | 20180112,regex,9,19 21 | 20180119,regex,18,47 22 | 20181019,regex,15,45 23 | 20181102,regex,8,14 -------------------------------------------------------------------------------- /bar/stacked diverging subway/fakedata_wide.csv: -------------------------------------------------------------------------------- 1 | station,pickup,dropoff,waited,headway 2 | Fire Station,20,26,4,290 3 | Printing Co,23,27,5,380 4 | Mt Vernon,24,23,0,600 5 | Museum EB,26,20,2,230 6 | Amway Grand EB,7,25,0,297 7 | Pearl-Ottawa EB,26,23,4,208 8 | Kendall College,28,24,0,245 9 | Monument Park,18,29,2,414 10 | Division Weston,9,26,0,206 11 | Oakes Commerce,32,20,1,402 12 | Studio Park,21,19,5,106 13 | Van Andel,22,8,8,386 14 | Ionia-Monroe Ctr,25,29,0,155 15 | Pearl-Ottawa WB,25,21,2,286 16 | Amway Grand WB,27,52,5,234 17 | Museum WB,42,10,1,276 18 | YMCA,29,24,0,233 19 | Seward 9S,27,29,0,342 20 | Seward 9C,22,40,5,237 21 | Seward 9N,47,25,15,293 -------------------------------------------------------------------------------- /bar/transition/bar.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: orange; 3 | } 4 | 5 | .axis text { 6 | font: 15px sans-serif; 7 | } 8 | 9 | .axis path, 10 | .axis line { 11 | fill: none; 12 | stroke: #000; 13 | shape-rendering: crispEdges; 14 | } 15 | 16 | .x.axis path { 17 | display: true; 18 | } 19 | 20 | .label { 21 | text-anchor: middle; 22 | font: 20px helvetica; 23 | } 24 | 25 | .grid line { 26 | stroke: lightgrey; 27 | stroke-opacity: 0.7; 28 | shape-rendering: crispEdges; 29 | } 30 | 31 | .grid path { 32 | stroke-width: 0; 33 | } 34 | 35 | .barlabel { 36 | fill: rgb(80, 17, 80); 37 | font: 14px sans-serif; 38 | text-anchor: middle; 39 | } -------------------------------------------------------------------------------- /linkedplots/scatterplotmatrix/matrix.css: -------------------------------------------------------------------------------- 1 | svg { 2 | font: 10px sans-serif; 3 | padding: 10px; 4 | } 5 | 6 | .axis, 7 | .frame { 8 | shape-rendering: crispEdges; 9 | } 10 | 11 | .axis line { 12 | stroke: #ddd; 13 | } 14 | 15 | .axis path { 16 | display: none; 17 | } 18 | 19 | .cell text { 20 | font-weight: bold; 21 | text-transform: capitalize; 22 | fill: black; 23 | } 24 | 25 | .frame { 26 | fill: none; 27 | stroke: #aaa; 28 | } 29 | 30 | circle { 31 | fill-opacity: .7; 32 | } 33 | 34 | circle.hidden { 35 | fill: #ccc !important; 36 | } 37 | 38 | .extent { 39 | fill: #000; 40 | fill-opacity: .125; 41 | stroke: #fff; 42 | } 43 | -------------------------------------------------------------------------------- /exercises/donut/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Donut Chart d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 19 | 20 | -------------------------------------------------------------------------------- /viewBox/bar/bar.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: orange; 3 | } 4 | 5 | .axis text { 6 | font: 15px sans-serif; 7 | } 8 | 9 | .axis path, 10 | .axis line { 11 | fill: none; 12 | stroke: #000; 13 | shape-rendering: crispEdges; 14 | } 15 | 16 | .x.axis path { 17 | display: true; 18 | } 19 | 20 | .label { 21 | text-anchor: middle; 22 | font: 20px helvetica; 23 | } 24 | 25 | .grid line { 26 | stroke: lightgrey; 27 | stroke-opacity: 0.7; 28 | shape-rendering: crispEdges; 29 | } 30 | 31 | .grid path { 32 | stroke-width: 0; 33 | } 34 | 35 | .barlabel { 36 | fill: rgb(80, 17, 80); 37 | font: 14px sans-serif; 38 | text-anchor: middle; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /donut/groupdata/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Donut Chart d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 19 | 20 | -------------------------------------------------------------------------------- /donut/transition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Donut Chart d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 19 | 20 | -------------------------------------------------------------------------------- /donut/reusable/species.tsv: -------------------------------------------------------------------------------- 1 | Species Probability Error 2 | Halobacillus halophilus 0.10069108308662117 0.045296463390387814 3 | Staphylococcus epidermidis 0.04076903848429238 0.0096463390387814 4 | Chromobacterium violaceum 0.10318269548054262 0.03390387814 5 | Pseudomonas TKP 0.05880239155316942 0.0045296463390387745 6 | Bacillus subtilis 0.1908578484310064 0.0765387676 7 | Pseudomonas fluorescens 0.10663641563053275 0.0045296463390387676 8 | Micrococcus luteus 0.04523420524963677 0.006463390387814 9 | Pseudoalteromonas SM9913 0.08033880363132218 0.05296463390387814 10 | Enterococcus faecalis 0.07214855298991701 0.0077390387814 11 | Escherichia coli 0.2014657031774047 0.100646339038795 -------------------------------------------------------------------------------- /tables/sortable/tables.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 60%; 3 | border-collapse: collapse; 4 | margin: 0px auto; 5 | } 6 | /* Zebra striping */ 7 | tr:nth-of-type(odd) { 8 | background: whitesmoke; 9 | } 10 | tr:nth-of-type(even) { 11 | background: rgb(29, 202, 255); 12 | } 13 | th { 14 | background: rgb(50, 12, 116); 15 | color: white; 16 | font-weight: bold; 17 | cursor: s-resize; 18 | background-repeat: no-repeat; 19 | background-position: 3% center; 20 | } 21 | td, th { 22 | padding: 6px; 23 | border: 1px solid #ccc; 24 | text-align: left; 25 | } 26 | th.aes:after { 27 | content: "\21D1"; 28 | } 29 | th.des:after { 30 | content: "\21D3"; 31 | } 32 | 33 | -------------------------------------------------------------------------------- /maps/michigan/michigan.css: -------------------------------------------------------------------------------- 1 | /*Style for Custom Tooltip */ 2 | div.tooltip { 3 | position: absolute; 4 | text-align: center; 5 | min-width: 100px; 6 | height: auto; 7 | padding: 12px; 8 | font-size: 14px; 9 | background: rgba(43,43,43, 0.8); 10 | color: #fff; 11 | border-radius: 5px; 12 | pointer-events: none; 13 | line-height: 1; 14 | } 15 | 16 | .tooltip p { 17 | margin: 5px; 18 | } 19 | 20 | .actived { 21 | fill: lightskyblue; 22 | } 23 | 24 | path.county { 25 | fill: #00274c; 26 | stroke: #fff; 27 | } 28 | 29 | /* path.county:hover, circle.city:hover { 30 | fill: #ffcb05; 31 | } */ 32 | 33 | circle.city { 34 | fill: #587abc; 35 | stroke: none; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /scatterplot/transition/workshop.csv: -------------------------------------------------------------------------------- 1 | date,workshop,attend,register,x3 2 | 20191101,sql,21,112,A 3 | 20190118,sql,20,67,A 4 | 20181207,sql,26,91,A 5 | 20180928,sql,34,211,A 6 | 20180316,sql,22,96,A 7 | 20171006,sql,26,208,A 8 | 20170314,sql,17,144,A 9 | 20160906,webscraping,34,34,B 10 | 20160906,webscraping,16,94,B 11 | 20170207,webscraping,17,39,B 12 | 20170620,webscraping,17,28,B 13 | 20180220,webscraping,10,17,D 14 | 20180619,webscraping,26,100,D 15 | 20190416,webscraping,12,25,D 16 | 20191011,webscraping,15,32,D 17 | 20170111,regex,23,59,C 18 | 20170124,regex,12,15,C 19 | 20171208,regex,13,24,C 20 | 20180112,regex,9,19,C 21 | 20180119,regex,18,47,C 22 | 20181019,regex,15,45,C 23 | 20181102,regex,8,14,C -------------------------------------------------------------------------------- /maps/michigan_bootstrap/css/michigan.css: -------------------------------------------------------------------------------- 1 | /*Style for Custom Tooltip */ 2 | /* div.tooltip { 3 | position: absolute; 4 | text-align: center; 5 | min-width: 80px; 6 | height: auto; 7 | padding: 10px; 8 | font-size: 14px; 9 | font-family: arial; 10 | background: rgba(0,0,0, 0.9); 11 | color: #fff; 12 | border-radius: 5px; 13 | pointer-events: none; 14 | line-height: 1; 15 | } */ 16 | 17 | /* .tooltip p { 18 | margin: 2px; 19 | } */ 20 | 21 | path.county { 22 | fill: #00274c; 23 | stroke: #fff; 24 | } 25 | 26 | path.county:hover, circle.city:hover { 27 | fill: #ffcb05; 28 | cursor: pointer; 29 | } 30 | 31 | circle.city { 32 | fill: #587abc; 33 | stroke: white; 34 | } 35 | -------------------------------------------------------------------------------- /path/s_curve/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica; 3 | font-size: 16px; 4 | } 5 | 6 | #header { 7 | margin-left: 220px; 8 | } 9 | 10 | ul li { 11 | margin-left: 200px; 12 | margin-bottom: 10px; 13 | } 14 | 15 | li.highlight { 16 | background: yellow; 17 | } 18 | 19 | path { 20 | fill: none; 21 | stroke: #999; 22 | } 23 | 24 | path.init { 25 | stroke-width: 2; 26 | } 27 | 28 | path.segment { 29 | stroke: none; 30 | } 31 | 32 | line.sep { 33 | stroke-width: 0; 34 | stroke: white; 35 | } 36 | 37 | .years { 38 | font-size: 2em; 39 | } 40 | 41 | /* Tippy Tooltips */ 42 | .tippy-box[data-theme ~= 'mayniac'] { 43 | background-color: #00BCEE; 44 | color: #fff; 45 | } 46 | -------------------------------------------------------------------------------- /selection/d3nest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /path/expanding_circular_swirl/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Split Path into Pieces in D3 v5 5 | 6 | 7 | 8 | 9 | 10 |
    11 |
  1. Draw an initial path.
    2. 12 |
  2. Determine how many pieces you want and what percentage of the full path each piece should account for. (Here we're using 20 pieces of random sizes.)
    3. 13 |
  3. Get the location of each section's points along the overall path.
    4. 14 |
  4. Use those points to draw a new path for each section.
    5. 16 |
    17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /linkedplots/ts/ts.css: -------------------------------------------------------------------------------- 1 | svg { 2 | font: 10px sans-serif; 3 | padding: 10px; 4 | } 5 | 6 | .axis, .frame { 7 | shape-rendering: crispEdges; 8 | } 9 | 10 | .axis line { 11 | stroke: #ddd; 12 | } 13 | 14 | .axis path { 15 | display: none; 16 | } 17 | 18 | .cell text { 19 | font-weight: bold; 20 | text-transform: capitalize; 21 | fill: black; 22 | } 23 | 24 | .frame { 25 | fill: none; 26 | stroke: #aaa; 27 | } 28 | 29 | .prepost { 30 | fill: none; 31 | stroke: rgb(187, 243, 57); 32 | stroke-width: 3px; 33 | clip-path: url(#clip); 34 | } 35 | 36 | .event { 37 | fill: none; 38 | stroke: royalblue; 39 | stroke-width: 3px; 40 | clip-path: url(#clip); 41 | } 42 | 43 | .ylabel { 44 | text-anchor: middle; 45 | } 46 | 47 | 48 | -------------------------------------------------------------------------------- /brush/timeseries.css: -------------------------------------------------------------------------------- 1 | .line { 2 | fill: none; 3 | stroke: #ddbc2b; 4 | stroke-width: 2px; 5 | clip-path: url(#clip); /* clip line with rectangle */ 6 | } 7 | 8 | .avgLine { 9 | fill: none; 10 | stroke: #352f24; 11 | stroke-width: 2px; 12 | clip-path: url(#clip); /* clip line with rectangle */ 13 | } 14 | 15 | .grid line { 16 | stroke: black; 17 | stroke-opacity: 0.1; 18 | shape-rendering: crispEdges; 19 | } 20 | 21 | .grid path { 22 | stroke-width: 0; 23 | } 24 | 25 | .tooltip { 26 | position: absolute; 27 | text-align: center; 28 | width: 80px; 29 | height: 28px; 30 | padding: 2px; 31 | font: 12px sans-serif; 32 | background: lightsteelblue; 33 | border: 0px; 34 | border-radius: 8px; 35 | pointer-events: none; 36 | } -------------------------------------------------------------------------------- /donut/reusable/donut.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Roboto', sans-serif; 3 | color: #333333; 4 | } 5 | 6 | /* Add shadow effect to chart. If you don't like it, get rid of it. */ 7 | svg { 8 | -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.3) ); 9 | filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.25) ); 10 | } 11 | 12 | /*Styling for the lines connecting the labels to the slices*/ 13 | polyline{ 14 | opacity: .3; 15 | stroke: black; 16 | stroke-width: 2px; 17 | fill: none; 18 | } 19 | 20 | /* Make the percentage on the text labels bold*/ 21 | .labelName tspan { 22 | font-style: normal; 23 | font-weight: 700; 24 | } 25 | 26 | /* In biology we generally italicise species names. */ 27 | .labelName { 28 | font-size: 0.9em; 29 | font-style: italic; 30 | } -------------------------------------------------------------------------------- /timeseries/line/timeseries.css: -------------------------------------------------------------------------------- 1 | .line { 2 | fill: none; 3 | stroke: #ddbc2b; 4 | stroke-width: 2px; 5 | clip-path: url(#clip); /* clip line with rectangle */ 6 | } 7 | 8 | .avgLine { 9 | fill: none; 10 | stroke: #352f24; 11 | stroke-width: 2px; 12 | clip-path: url(#clip); /* clip line with rectangle */ 13 | } 14 | 15 | .grid line { 16 | stroke: black; 17 | stroke-opacity: 0.1; 18 | shape-rendering: crispEdges; 19 | } 20 | 21 | .grid path { 22 | stroke-width: 0; 23 | } 24 | 25 | .tooltip { 26 | position: absolute; 27 | text-align: center; 28 | width: 80px; 29 | height: 28px; 30 | padding: 2px; 31 | font: 12px sans-serif; 32 | background: lightsteelblue; 33 | border: 0px; 34 | border-radius: 8px; 35 | pointer-events: none; 36 | } -------------------------------------------------------------------------------- /linkedplots/matrix/matrix.css: -------------------------------------------------------------------------------- 1 | svg { 2 | font: 10px sans-serif; 3 | padding: 10px; 4 | } 5 | 6 | .axis, .frame { 7 | shape-rendering: crispEdges; 8 | } 9 | 10 | .axis line { 11 | stroke: #ddd; 12 | } 13 | 14 | .axis path { 15 | display: none; 16 | } 17 | 18 | .cell text { 19 | font-weight: bold; 20 | text-transform: capitalize; 21 | fill: black; 22 | } 23 | 24 | .frame { 25 | fill: none; 26 | stroke: #aaa; 27 | } 28 | 29 | .prepost { 30 | fill: none; 31 | stroke: rgb(187, 243, 57); 32 | stroke-width: 3px; 33 | } 34 | 35 | .pts { 36 | fill: red; 37 | fill-opacity: 1; 38 | } 39 | 40 | .pts.hidden { 41 | fill-opacity: 0; 42 | } 43 | 44 | .event { 45 | fill: none; 46 | stroke: royalblue; 47 | stroke-width: 3px; 48 | } 49 | 50 | path.hidden { 51 | stroke: lightgray; 52 | } -------------------------------------------------------------------------------- /maps/statecounty/statecounty.css: -------------------------------------------------------------------------------- 1 | .background { 2 | fill: none; 3 | pointer-events: none; /* default */ 4 | } 5 | 6 | .states { 7 | fill: #eff3ff; 8 | stroke: pink; 9 | stroke-width: 1.5px; 10 | stroke-linejoin: round; 11 | stroke-linecap: round; 12 | } 13 | 14 | .states .active { 15 | fill: orange; 16 | display: none; 17 | } 18 | 19 | /* .state-borders { 20 | fill: none; 21 | stroke: orange; 22 | stroke-width: 1.5px; 23 | stroke-linejoin: round; 24 | stroke-linecap: round; 25 | pointer-events: none; 26 | } */ 27 | 28 | .counties { 29 | fill: #eff3ff; 30 | stroke: white; 31 | } 32 | 33 | /* .counties .active { 34 | fill: yellow; 35 | } */ 36 | 37 | .county-boundary:hover { 38 | opacity: 0.35; 39 | } 40 | 41 | .legend { 42 | position:absolute; 43 | left:20px; 44 | top:0px; 45 | } -------------------------------------------------------------------------------- /animation/movement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | 28 | 29 | -------------------------------------------------------------------------------- /path/s_curve/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | MayNumber in D3 v7 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

    Maynumber

    17 | 22 | 23 |
    24 | 25 | 26 | -------------------------------------------------------------------------------- /combo/bar_line2_table/barline_table.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: #499bdd; 3 | clip-path: url(#clip); /* clip bar with rectangle */ 4 | } 5 | 6 | .avgLine { 7 | fill: none; 8 | stroke: #73000A; 9 | stroke-width: 2px; 10 | clip-path: url(#clip); /* clip line with rectangle */ 11 | } 12 | 13 | /* HTML table */ 14 | table { 15 | width: 600px; 16 | border-collapse: collapse; 17 | margin: 0px auto; 18 | } 19 | /* Zebra striping */ 20 | tr:nth-of-type(odd) { 21 | background: whitesmoke; 22 | } 23 | tr:nth-of-type(even) { 24 | background: rgb(173, 146, 55); 25 | } 26 | th { 27 | background: rgb(50, 12, 116); 28 | color: white; 29 | font-weight: bold; 30 | cursor: s-resize; 31 | background-repeat: no-repeat; 32 | background-position: 3% center; 33 | } 34 | td, th { 35 | padding: 6px; 36 | border: 1px solid #ccc; 37 | text-align: left; 38 | } -------------------------------------------------------------------------------- /utilities/css/timetable.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: #ebc312; 3 | clip-path: url(#clip); /* clip bar with rectangle */ 4 | } 5 | 6 | .avgLine { 7 | fill: none; 8 | stroke: #73000A; 9 | stroke-width: 2px; 10 | clip-path: url(#clip); /* clip line with rectangle */ 11 | } 12 | 13 | .area { 14 | fill: #ebc312; 15 | clip-path: url(#clip); 16 | } 17 | 18 | .axis{ 19 | font-size: 14px; 20 | } 21 | 22 | .brush .extent { 23 | stroke:#fff; 24 | fill-opacity:0.125; 25 | shape-rendering:crispEdges; 26 | } 27 | 28 | div.tooltip { 29 | position: absolute; 30 | text-align: center; 31 | width: 60px; 32 | height: 28px; 33 | padding: 2px; 34 | font: 12px sans-serif; 35 | background: lightsteelblue; 36 | border: 0px; 37 | border-radius: 8px; 38 | pointer-events: none; 39 | } 40 | /* .summary{ 41 | font-weight: bold; 42 | } */ 43 | -------------------------------------------------------------------------------- /calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Calendar Heatmap v4 4 | 5 | 6 | 7 | 8 |
    9 |
    10 |

    Calendar Heatmap

    11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /combo/donut_table/donut_table.css: -------------------------------------------------------------------------------- 1 | tspan { 2 | font: 16px sans-serif; 3 | text-anchor: middle; 4 | } 5 | 6 | .total { 7 | font-size: 3em; 8 | text-anchor: middle; 9 | } 10 | 11 | .chart_title { 12 | font-size: 2em; 13 | text-anchor: middle; 14 | } 15 | 16 | .age-group { 17 | font-weight: 700; 18 | } 19 | 20 | /* HTML table */ 21 | table { 22 | width: 600px; 23 | border-collapse: collapse; 24 | margin: 0px auto; 25 | } 26 | /* Zebra striping */ 27 | tr:nth-of-type(odd) { 28 | background: whitesmoke; 29 | } 30 | tr:nth-of-type(even) { 31 | background: rgb(29, 202, 255); 32 | } 33 | th { 34 | background: rgb(50, 12, 116); 35 | color: white; 36 | font-weight: bold; 37 | cursor: s-resize; 38 | background-repeat: no-repeat; 39 | background-position: 3% center; 40 | } 41 | td, th { 42 | padding: 6px; 43 | border: 1px solid #ccc; 44 | text-align: left; 45 | } -------------------------------------------------------------------------------- /maps/state/choropleth.csv: -------------------------------------------------------------------------------- 1 | state,value 2 | Alabama,4 3 | Alaska,0 4 | Arizona,5 5 | Arkansas,2 6 | California,45 7 | Colorado,6 8 | Connecticut,3 9 | Delaware,0 10 | District of Columbia,2 11 | Florida,15 12 | Georgia,18 13 | Hawaii,0 14 | Idaho,1 15 | Illinois,12 16 | Indiana,7 17 | Iowa,0 18 | Kansas,3 19 | Kentucky,0 20 | Louisiana,2 21 | Maine,3 22 | Maryland,9 23 | Massachusetts,5 24 | Michigan,168 25 | Minnesota,7 26 | Mississippi,0 27 | Missouri,6 28 | Montana,1 29 | Nebraska,4 30 | Nevada,2 31 | New Hampshire,2 32 | New Jersey,9 33 | New Mexico,2 34 | New York,23 35 | North Carolina,9 36 | North Dakota,0 37 | Ohio,16 38 | Oklahoma,2 39 | Oregon,4 40 | Pennsylvania,11 41 | Rhode Island,0 42 | South Carolina,53 43 | South Dakota,0 44 | Tennessee,4 45 | Texas,13 46 | Utah,5 47 | Vermont,1 48 | Virginia,7 49 | Washington,7 50 | West Virginia,1 51 | Wisconsin,4 52 | Wyoming,0 53 | Puerto Rico,0 54 | -------------------------------------------------------------------------------- /mapbox/mapbox-js/choropleth.csv: -------------------------------------------------------------------------------- 1 | state,value 2 | Alabama,4 3 | Alaska,0 4 | Arizona,5 5 | Arkansas,2 6 | California,45 7 | Colorado,6 8 | Connecticut,3 9 | Delaware,0 10 | District of Columbia,2 11 | Florida,15 12 | Georgia,18 13 | Hawaii,0 14 | Idaho,1 15 | Illinois,12 16 | Indiana,7 17 | Iowa,0 18 | Kansas,3 19 | Kentucky,0 20 | Louisiana,2 21 | Maine,3 22 | Maryland,9 23 | Massachusetts,5 24 | Michigan,168 25 | Minnesota,7 26 | Mississippi,0 27 | Missouri,6 28 | Montana,1 29 | Nebraska,4 30 | Nevada,2 31 | New Hampshire,2 32 | New Jersey,9 33 | New Mexico,2 34 | New York,23 35 | North Carolina,9 36 | North Dakota,0 37 | Ohio,16 38 | Oklahoma,2 39 | Oregon,4 40 | Pennsylvania,11 41 | Rhode Island,0 42 | South Carolina,53 43 | South Dakota,0 44 | Tennessee,4 45 | Texas,13 46 | Utah,5 47 | Vermont,1 48 | Virginia,7 49 | Washington,7 50 | West Virginia,1 51 | Wisconsin,4 52 | Wyoming,0 53 | Puerto Rico,0 54 | -------------------------------------------------------------------------------- /maps/statecounty/choropleth_state.csv: -------------------------------------------------------------------------------- 1 | state,value 2 | Alabama,4 3 | Alaska,0 4 | Arizona,5 5 | Arkansas,2 6 | California,45 7 | Colorado,6 8 | Connecticut,3 9 | Delaware,0 10 | District of Columbia,2 11 | Florida,15 12 | Georgia,18 13 | Hawaii,0 14 | Idaho,1 15 | Illinois,12 16 | Indiana,7 17 | Iowa,0 18 | Kansas,3 19 | Kentucky,0 20 | Louisiana,2 21 | Maine,3 22 | Maryland,9 23 | Massachusetts,5 24 | Michigan,168 25 | Minnesota,7 26 | Mississippi,0 27 | Missouri,6 28 | Montana,1 29 | Nebraska,4 30 | Nevada,2 31 | New Hampshire,2 32 | New Jersey,9 33 | New Mexico,2 34 | New York,23 35 | North Carolina,9 36 | North Dakota,0 37 | Ohio,16 38 | Oklahoma,2 39 | Oregon,4 40 | Pennsylvania,11 41 | Rhode Island,0 42 | South Carolina,53 43 | South Dakota,0 44 | Tennessee,4 45 | Texas,13 46 | Utah,5 47 | Vermont,1 48 | Virginia,7 49 | Washington,7 50 | West Virginia,1 51 | Wisconsin,4 52 | Wyoming,0 53 | Puerto Rico,0 54 | -------------------------------------------------------------------------------- /bar/join_enter_update_exit/bar.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | fill: orange; 3 | } 4 | 5 | .axis text { 6 | font: 15px sans-serif; 7 | } 8 | 9 | .axis path, 10 | .axis line { 11 | fill: none; 12 | stroke: #000; 13 | shape-rendering: crispEdges; 14 | } 15 | 16 | .x.axis path { 17 | display: true; 18 | } 19 | 20 | .label { 21 | text-anchor: middle; 22 | font: 20px helvetica; 23 | } 24 | 25 | .grid line { 26 | stroke: lightgrey; 27 | stroke-opacity: 0.7; 28 | shape-rendering: crispEdges; 29 | } 30 | 31 | .grid path { 32 | stroke-width: 0; 33 | } 34 | 35 | .barlabel { 36 | fill: rgb(80, 17, 80); 37 | font: 14px sans-serif; 38 | text-anchor: middle; 39 | } 40 | 41 | .button { 42 | background-color: #4CAF50; /* Green */ 43 | border: none; 44 | color: white; 45 | padding: 15px 32px; 46 | text-align: center; 47 | text-decoration: none; 48 | display: inline-block; 49 | font-size: 16px; 50 | } -------------------------------------------------------------------------------- /selection/d3csv_googlesheet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 25 | 26 | -------------------------------------------------------------------------------- /maps/michigan_bootstrap/michigan.css: -------------------------------------------------------------------------------- 1 | /*Style for Custom Tooltip */ 2 | div.tooltip { 3 | position: absolute !important; 4 | text-align: center !important; 5 | min-width: 80px !important; 6 | height: auto !important; 7 | padding: 10px !important; 8 | font-size: 14px !important; 9 | font-family: arial !important; 10 | background: rgba(0,0,0, 0.9) !important; 11 | color: #fff !important; 12 | border-radius: 5px !important; 13 | pointer-events: none !important; 14 | line-height: 1 !important; 15 | } 16 | 17 | .tooltip p { 18 | margin: 2px !important; 19 | } 20 | 21 | path.county { 22 | fill: #00274c !important; 23 | stroke: #fff !important; 24 | } 25 | 26 | path.county:hover, circle.city:hover { 27 | fill: #ffcb05 !important; 28 | cursor: pointer !important; 29 | } 30 | 31 | circle.city { 32 | fill: #587abc !important; 33 | stroke: white !important; 34 | } 35 | 36 | #map{ 37 | display: block; 38 | } 39 | -------------------------------------------------------------------------------- /combo/donut_table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Donut Chart d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 |
    19 | 22 | 23 | -------------------------------------------------------------------------------- /bar/race/preprocessing/preprocessing.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | """ 3 | Created on Fri Oct 18 16:17:58 2019 4 | 5 | @author: caoa 6 | """ 7 | import pandas as pd 8 | 9 | pd.options.display.max_rows =20 10 | pd.options.display.max_columns = 20 11 | 12 | df = pd.read_csv('GL2018.TXT', header=None, usecols=[0,3,6,9,10]) 13 | df.columns = ['date','away','home','aRuns','hRuns'] 14 | 15 | #%% 16 | df['team'] = df.apply(lambda x: x['away'] if x['aRuns'] > x['hRuns'] else x['home'], axis=1) 17 | data = df[['date','team']] 18 | data.to_csv('daily_snapshot.csv', index=False) 19 | 20 | #%% Find first day where all teams have won at least one game 21 | data['date'] = pd.to_datetime(data['date'], format='%Y%m%d') 22 | daterange = pd.date_range('2018-03-29','2018-10-01',freq='D') 23 | for day in daterange: 24 | abc = data[data['date'] <= day] 25 | xyz = abc.team.value_counts() 26 | if xyz.shape[0] >= 30: 27 | print(day) 28 | break 29 | -------------------------------------------------------------------------------- /bar/sortable/bar.css: -------------------------------------------------------------------------------- 1 | .chart { 2 | clip-path: url(#clip); 3 | } 4 | 5 | .bar { 6 | fill: orange; 7 | } 8 | 9 | .axis text { 10 | font: 15px sans-serif; 11 | } 12 | 13 | .axis path, .axis line { 14 | fill: none; 15 | stroke: '#000'; 16 | shape-rendering: crispEdges; 17 | } 18 | 19 | .label { 20 | text-anchor: middle; 21 | font: 20px helvetica; 22 | } 23 | 24 | .grid line { 25 | stroke: lightgrey; 26 | stroke-opacity: 0.7; 27 | shape-rendering: crispEdges; 28 | } 29 | 30 | .grid path { 31 | stroke-width: 0; 32 | } 33 | 34 | .team { 35 | fill: black; 36 | font: 14px sans-serif; 37 | text-anchor: end; 38 | font-weight: 600; 39 | } 40 | 41 | .barlabel{ 42 | fill: black; 43 | font: 14px sans-serif; 44 | text-anchor: left; 45 | } 46 | 47 | .logo { 48 | fill: black; 49 | font: 14px sans-serif; 50 | text-anchor: middle; 51 | } 52 | 53 | .divisions { 54 | stroke: black; 55 | stroke-width: 2; 56 | stroke-dasharray: 12; 57 | } -------------------------------------------------------------------------------- /bar/race/urls.js: -------------------------------------------------------------------------------- 1 | const urls = { 2 | 'ARI':'Arizona_Diamondbacks', 3 | 'ATL':'Atlanta_Braves', 4 | 'SFN':'SanFrancisco_Giants', 5 | 'CHN':'Chicago_Cubs', 6 | 'NYN':'NewYork_Mets', 7 | 'MIL':'Milwaukee_Brewers', 8 | 'BAL':'Baltimore_Orioles', 9 | 'CHA':'Chicago_White_Sox', 10 | 'OAK':'Oakland_Athletics', 11 | 'SEA':'Seattle_Mariners', 12 | 'TBA':'TampaBay_Rays', 13 | 'HOU':'Houston_Astros', 14 | 'NYA':'NewYork_Yankees', 15 | 'PHI':'Philadelphia_Phillies', 16 | 'WAS':'Washington_Nationals', 17 | 'MIA':'Miami_Marlins', 18 | 'PIT':'Pittsburgh_Pirates', 19 | 'ANA':'LosAngeles_Angels', 20 | 'BOS':'Boston_Redsox', 21 | 'TEX':'Texas_Rangers', 22 | 'COL':'Colorado_Rockies', 23 | 'LAN':'LosAngeles_Dodgers', 24 | 'MIN':'Minnesota_Twins', 25 | 'CLE':'Cleveland_Indians', 26 | 'TOR':'Toronto_Blue_Jays', 27 | 'SLN':'StLouis_Cardinals', 28 | 'CIN':'Cincinnati_Reds', 29 | 'DET':'Detroit_Tigers', 30 | 'SDN':'SanDiego_Padres', 31 | 'KCA':'KansasCity_Royals', 32 | } -------------------------------------------------------------------------------- /maps/hexmap/michigan.css: -------------------------------------------------------------------------------- 1 | /*Style for Custom Tooltip */ 2 | /* div.tooltip { 3 | position: absolute; 4 | text-align: center; 5 | min-width: 80px; 6 | height: auto; 7 | padding: 10px; 8 | font-size: 14px; 9 | font-family: arial; 10 | background: rgba(0,0,0, 0.9); 11 | color: #fff; 12 | border-radius: 5px; 13 | pointer-events: none; 14 | line-height: 1; 15 | } */ 16 | 17 | /* .tooltip p { 18 | margin: 2px; 19 | } */ 20 | .top-buffer{ 21 | margin-top: 20px; 22 | } 23 | 24 | 25 | path.hex { 26 | /* fill: #4d84b8; */. 27 | stroke: none; 28 | /* stroke-width: 1px; */ 29 | } 30 | 31 | path.hex:hover{ 32 | /* fill: #ffcb05; */ 33 | stroke: black; 34 | cursor: pointer; 35 | } 36 | 37 | .svg-container { 38 | /* display: inline-block; */ 39 | /* position: relative; */ 40 | /* width: 100%; */ 41 | /* vertical-align: top; */ 42 | /* overflow: hidden; */ 43 | border: 2px solid green; 44 | } 45 | 46 | #legendTitle, .legendLabel { 47 | font-size: 0.8em; 48 | } 49 | -------------------------------------------------------------------------------- /timeseries/hbar/timeseries.css: -------------------------------------------------------------------------------- 1 | .line { 2 | fill: none; 3 | stroke: #ddbc2b; 4 | stroke-width: 2px; 5 | clip-path: url(#clip); /* clip line with rectangle */ 6 | } 7 | 8 | .avgLine { 9 | fill: none; 10 | stroke: #352f24; 11 | stroke-width: 2px; 12 | clip-path: url(#clip); /* clip line with rectangle */ 13 | } 14 | 15 | .grid line { 16 | stroke: black; 17 | stroke-opacity: 0.1; 18 | shape-rendering: crispEdges; 19 | } 20 | 21 | .grid path { 22 | stroke-width: 0; 23 | } 24 | 25 | .tooltip { 26 | position: absolute; 27 | text-align: center; 28 | width: 80px; 29 | height: 28px; 30 | padding: 2px; 31 | font: 12px sans-serif; 32 | background: lightsteelblue; 33 | border: 0px; 34 | border-radius: 8px; 35 | pointer-events: none; 36 | } 37 | 38 | .bar { 39 | clip-path: url(#clip-timeline); 40 | } 41 | 42 | .swatch-label { 43 | font-size: 0.8em; 44 | } 45 | 46 | .tippy-box[data-theme ~= 'alex'] { 47 | background-color: #00274C; 48 | color: #FFCB05; 49 | } -------------------------------------------------------------------------------- /selection/3circles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /donut/reusable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Reusable Donut Chart in D3 v5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /star-fill/index.css: -------------------------------------------------------------------------------- 1 | .rating { 2 | width: calc(45px * 5); 3 | height: 45px; 4 | background: url('data:image/svg+xml;utf8,'); 5 | position:relative; 6 | } 7 | .rating:before { 8 | content: ""; 9 | position: absolute; 10 | top: 0; 11 | bottom: 0; 12 | left: 0; 13 | width: calc(45px * var(--stars, 5)); 14 | background: url('data:image/svg+xml;utf8,'); 15 | } -------------------------------------------------------------------------------- /combo/bar_line4_stats/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar Line Combo in D3 v5 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | 17 |
    18 |

    19 |

    20 |

    21 |

    22 |

    23 | 26 | -------------------------------------------------------------------------------- /maps/state/choropleth.css: -------------------------------------------------------------------------------- 1 | /* Legend Font Style */ 2 | body { 3 | font: 11px sans-serif; 4 | background-color: #ffffff; 5 | } 6 | 7 | /* Legend Position Style */ 8 | .legend { 9 | position:absolute; 10 | left:20px; 11 | top:0px; 12 | } 13 | 14 | .axis text { 15 | font: 10px sans-serif; 16 | } 17 | 18 | .axis line, .axis path { 19 | fill: none; 20 | stroke: #000; 21 | shape-rendering: crispEdges; 22 | } 23 | /*Style for Custom Tooltip */ 24 | div.tooltip { 25 | position: absolute; 26 | text-align: center; 27 | min-width: 100px; 28 | height: auto; 29 | padding: 12px; 30 | font-size: 14px; 31 | background: rgba(43,43,43, 0.8); 32 | color: #fff; 33 | border-radius: 5px; 34 | pointer-events: none; 35 | line-height: 1; 36 | } 37 | 38 | .tooltip p { 39 | margin: 5px; 40 | } 41 | 42 | .q0-7{fill:rgb(247,247,247)} 43 | .q1-7{fill:rgb(217,217,217)} 44 | .q2-7{fill:rgb(189,189,189)} 45 | .q3-7{fill:rgb(150,150,150)} 46 | .q4-7{fill:rgb(115,115,115)} 47 | .q5-7{fill:rgb(82,82,82)} 48 | .q6-7{fill:rgb(37,37,37)} 49 | -------------------------------------------------------------------------------- /donut/reusable/crashes.tsv: -------------------------------------------------------------------------------- 1 | Person Age Single motor vehicle Head-on Head-on / left turn Angle Rear-end Rear-end left turn Rear-end right turn Sideswipe same direction Sideswipe opposite direction Backing Other / unknown Other Unknown Uncoded & errors Total 2 | 75 391 24 104 530 600 22 28 344 45 49 0 132 3 0 2272 3 | 76 334 20 72 466 496 24 12 292 43 36 0 99 6 0 1900 4 | 77 314 22 83 421 407 18 22 222 37 33 0 77 8 0 1664 5 | 78 285 14 73 371 391 18 15 235 36 33 0 89 3 0 1563 6 | 79 252 17 67 372 354 22 12 227 31 37 0 75 3 0 1469 7 | 80 203 23 67 343 256 16 8 162 27 28 0 73 4 0 1210 8 | 81 188 12 50 326 268 16 7 158 23 29 0 66 6 0 1149 9 | 82 167 9 55 296 262 12 8 172 33 22 0 66 2 0 1104 10 | 83 133 9 42 264 229 18 15 127 13 13 0 51 1 0 915 11 | 84 106 10 33 208 188 13 9 133 15 27 0 50 4 0 796 12 | 85 97 9 33 199 172 11 5 132 14 16 0 43 0 0 731 13 | 86 75 7 47 210 150 8 5 107 18 17 0 32 2 0 678 14 | 87 82 7 32 172 109 5 4 80 13 13 0 32 1 0 550 15 | 88 51 8 19 132 107 2 2 84 7 7 0 21 1 0 441 16 | 89 42 4 22 123 81 2 3 63 8 6 0 15 1 0 370 17 | 90 27 3 22 89 56 6 5 45 9 6 0 11 0 0 279 -------------------------------------------------------------------------------- /bar/race/bar.css: -------------------------------------------------------------------------------- 1 | /* .chart { 2 | clip-path: url(#clip); 3 | } */ 4 | 5 | .bar { 6 | fill: orange; 7 | } 8 | 9 | .x.axis text { 10 | font: 15px sans-serif; 11 | } 12 | 13 | .axis path, .axis line { 14 | fill: none; 15 | stroke: '#000'; 16 | shape-rendering: crispEdges; 17 | } 18 | 19 | .label { 20 | text-anchor: middle; 21 | font: 20px helvetica; 22 | } 23 | 24 | #date { 25 | text-anchor: start; 26 | font: 20px helvetica; 27 | } 28 | 29 | .grid line { 30 | stroke: lightgrey; 31 | stroke-opacity: 0.7; 32 | shape-rendering: crispEdges; 33 | } 34 | 35 | .grid path { 36 | stroke-width: 0; 37 | } 38 | 39 | .team { 40 | fill: black; 41 | font: 14px sans-serif; 42 | text-anchor: end; 43 | font-weight: 600; 44 | } 45 | 46 | .barlabel{ 47 | fill: black; 48 | font: 14px sans-serif; 49 | text-anchor: left; 50 | font-weight: 600; 51 | } 52 | 53 | .logo { 54 | fill: black; 55 | font: 14px sans-serif; 56 | text-anchor: middle; 57 | } 58 | 59 | .divisions { 60 | stroke: black; 61 | stroke-width: 2; 62 | stroke-dasharray: 12; 63 | } -------------------------------------------------------------------------------- /maps/statecounty/state_fips_abbr.csv: -------------------------------------------------------------------------------- 1 | name,fips,abbr 2 | Alabama,01,AL 3 | Alaska,02,AK 4 | Arizona,04,AZ 5 | Arkansas,05,AR 6 | California,06,CA 7 | Colorado,08,CO 8 | Connecticut,09,CT 9 | Delaware,10,DE 10 | District of Columbia,11,DC 11 | Florida,12,FL 12 | Georgia,13,GA 13 | Hawaii,15,HI 14 | Idaho,16,ID 15 | Illinois,17,IL 16 | Indiana,18,IN 17 | Iowa,19,IA 18 | Kansas,20,KS 19 | Kentucky,21,KY 20 | Louisiana,22,LA 21 | Maine,23,ME 22 | Maryland,24,MD 23 | Massachusetts,25,MA 24 | Michigan,26,MI 25 | Minnesota,27,MN 26 | Mississippi,28,MS 27 | Missouri,29,MO 28 | Montana,30,MT 29 | Nebraska,31,NE 30 | Nevada,32,NV 31 | New Hampshire,33,NH 32 | New Jersey,34,NJ 33 | New Mexico,35,NM 34 | New York,36,NY 35 | North Carolina,37,NC 36 | North Dakota,38,ND 37 | Ohio,39,OH 38 | Oklahoma,40,OK 39 | Oregon,41,OR 40 | Pennsylvania,42,PA 41 | Rhode Island,44,RI 42 | South Carolina,45,SC 43 | South Dakota,46,SD 44 | Tennessee,47,TN 45 | Texas,48,TX 46 | Utah,49,UT 47 | Vermont,50,VT 48 | Virginia,51,VA 49 | Washington,53,WA 50 | West Virginia,54,WV 51 | Wisconsin,55,WI 52 | Wyoming,56,WY 53 | Puerto Rico,72,PR 54 | -------------------------------------------------------------------------------- /combo/bar_line4_stats_rf/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar Line Combo in D3 v5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 |
    19 |

    20 |

    21 |

    22 |

    23 |

    24 | 27 | -------------------------------------------------------------------------------- /linkedplots/tsmaps3sv/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Linked Line Charts in D3 v5 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 |
    19 |
    20 |
    21 |
    22 | 23 | 24 | 28 | -------------------------------------------------------------------------------- /selection/d3group_rollup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 30 | 31 | -------------------------------------------------------------------------------- /utilities/main.js: -------------------------------------------------------------------------------- 1 | // creates all charts 2 | async function makeDashboard() { 3 | // parse the date / time 4 | parseDate = d3.timeParse("%m/%d/%y"); 5 | formatDate = d3.timeFormat("%b %d %Y"); 6 | 7 | DATA = await d3.csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vT4Ct6soKGWLJqC5sBk3vL3lvmH2t2GfCBe0xUgewKgDJ14v21NX5bdZ0oJfZRYcc-Ac4SClwtwopUE/pub?gid=0&single=true&output=csv', type); 8 | CF = crossfilter(DATA); 9 | date = CF.dimension(d => d.date); 10 | dateGrp = date.group(); 11 | year = CF.dimension(d => d.year); 12 | yearGrp = year.group(); 13 | month = CF.dimension(d => d.month); 14 | monthGrp = month.group(); 15 | day = CF.dimension(d => d.day); 16 | dayGrp = day.group(); 17 | weekday = CF.dimension(d => d.weekday); 18 | weekdayGrp = weekday.group(); 19 | hour = CF.dimension(d => d.hour); 20 | hourGrp = hour.group(); 21 | 22 | makeTimeSeries(); 23 | } 24 | 25 | // read in data 26 | function type(d) { 27 | d.date = parseDate(d.date); 28 | d.year = d.date.getFullYear(); 29 | d.month = d.date.getMonth(); 30 | d.day = d.date.getDate(); 31 | d.weekday = d.date.getDay(); 32 | d.hour = +d.hour; 33 | d.usage = +d.usage; 34 | return d 35 | } 36 | 37 | -------------------------------------------------------------------------------- /mapbox/mapbox-js/mapbox.css: -------------------------------------------------------------------------------- 1 | /* Legend Font Style */ 2 | body { 3 | font: 11px sans-serif; 4 | background-color: #ffffff; 5 | } 6 | 7 | #map { 8 | /* position: relative; */ 9 | top: 0; 10 | bottom: 0; 11 | left: 40px; 12 | width: 620px; 13 | height: 400px; 14 | } 15 | 16 | .state { 17 | fill: rgb(84, 234, 240); 18 | stroke: red; 19 | stroke-width: 2px; 20 | } 21 | 22 | .state:hover { 23 | stroke-width: 5px; 24 | } 25 | 26 | .axis text { 27 | font: 10px sans-serif; 28 | } 29 | 30 | .axis line, .axis path { 31 | fill: none; 32 | stroke: #000; 33 | shape-rendering: crispEdges; 34 | } 35 | /*Style for Custom Tooltip */ 36 | div.tooltip { 37 | position: absolute; 38 | text-align: center; 39 | min-width: 100px; 40 | height: auto; 41 | padding: 12px; 42 | font-size: 14px; 43 | background: rgba(43,43,43, 0.8); 44 | color: #fff; 45 | border-radius: 5px; 46 | pointer-events: none; 47 | line-height: 1; 48 | } 49 | 50 | .tooltip p { 51 | margin: 5px; 52 | } 53 | 54 | .q0-7{fill:rgb(247,247,247)} 55 | .q1-7{fill:rgb(217,217,217)} 56 | .q2-7{fill:rgb(189,189,189)} 57 | .q3-7{fill:rgb(150,150,150)} 58 | .q4-7{fill:rgb(115,115,115)} 59 | .q5-7{fill:rgb(82,82,82)} 60 | .q6-7{fill:rgb(37,37,37)} 61 | -------------------------------------------------------------------------------- /star-fill/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 16 | 17 |
    18 |
    19 |
    20 |
    21 |
    22 | 23 | -------------------------------------------------------------------------------- /tables/jquery DataTable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery DataTable Bootstrap 4 styling using d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
    21 | 37 | -------------------------------------------------------------------------------- /linkedplots/tsmap/tsmap.css: -------------------------------------------------------------------------------- 1 | svg { 2 | font: 10px sans-serif; 3 | padding: 10px; 4 | position: relative; 5 | } 6 | 7 | .axis, .frame { 8 | shape-rendering: crispEdges; 9 | } 10 | 11 | .axis line { 12 | stroke: #ddd; 13 | } 14 | 15 | .axis path { 16 | display: none; 17 | } 18 | 19 | .cell text { 20 | font-weight: bold; 21 | text-transform: capitalize; 22 | fill: black; 23 | } 24 | 25 | .frame { 26 | fill: none; 27 | stroke: #aaa; 28 | } 29 | 30 | .prepost { 31 | fill: none; 32 | stroke: rgb(187, 243, 57); 33 | stroke-width: 3px; 34 | clip-path: url(#clip); 35 | } 36 | 37 | .event { 38 | fill: none; 39 | stroke: royalblue; 40 | stroke-width: 3px; 41 | clip-path: url(#clip); 42 | } 43 | 44 | .xlabel, .ylabel { 45 | text-anchor: middle; 46 | } 47 | 48 | /* Map */ 49 | #map, #mapbox { 50 | position: absolute; 51 | width: 800px; 52 | height: 300px; 53 | } 54 | 55 | .host, .evt, .remote { 56 | fill: none; 57 | stroke-width: 4px; 58 | } 59 | 60 | .host { 61 | stroke: rgb(187, 243, 57); 62 | } 63 | 64 | .host.evt { 65 | stroke: royalblue; 66 | } 67 | 68 | .remote { 69 | stroke: rgb(243, 169, 57); 70 | } 71 | 72 | .remote.evt { 73 | stroke: red; 74 | } 75 | 76 | .legendBkgd { 77 | fill: lightblue; 78 | fill-opacity: 0.6; 79 | } 80 | 81 | .legend.hidden { 82 | opacity: 0.2; 83 | } 84 | -------------------------------------------------------------------------------- /squarechart/demographics/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Inconsolata', Monaco, "Lucida Console", Consolas, "Courier New"; 3 | /* background: #58585B;*/ 4 | } 5 | h1 { 6 | font-family: 'Inconsolata', Monaco, "Lucida Console", Consolas, "Courier New"; 7 | font-size: 40px; 8 | font-style: normal; 9 | text-transform: uppercase; 10 | } 11 | 12 | h3 { 13 | text-transform: uppercase; 14 | font-size: 1.5em; 15 | padding: 3px 0px; 16 | /* margin: -5px 0 0px 0;*/ 17 | font-style: normal; 18 | margin-bottom:0.2em; 19 | } 20 | 21 | .desc { 22 | font-family: "Mercury SSm A", "Mercury SSm B"; 23 | font-style: italic; 24 | font-weight: 400; 25 | font-size: 1em; 26 | line-height: 1.4em; 27 | margin: 0 auto; 28 | } 29 | 30 | .centered{ 31 | text-align:center; 32 | } 33 | 34 | .button { 35 | width: 60px; 36 | padding: 5px 5px; 37 | margin-right: 3px; 38 | margin-bottom: 3px; 39 | cursor: pointer; 40 | text-align: center; 41 | font-size: .9em; 42 | border: 1px solid #e0e0e0; 43 | float: left; 44 | -moz-border-radius: 6px; 45 | border-radius: 6px; 46 | } 47 | 48 | .button:hover { 49 | background: #e0e0e0; 50 | } 51 | 52 | .button.current { 53 | background: #000; 54 | color: #fff; 55 | } 56 | 57 | #n { 58 | font-size: 3.0em; 59 | } -------------------------------------------------------------------------------- /calendar/static/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Asap', sans-serif; 3 | } 4 | 5 | .contentContainer { 6 | width:960px; 7 | margin: 0 auto; 8 | } 9 | 10 | .content { 11 | float:left; 12 | width:700px; 13 | } 14 | 15 | .sidebar { 16 | float:right; 17 | padding:15px; 18 | width:180px; 19 | } 20 | 21 | .clear { 22 | clear:both; 23 | } 24 | 25 | .day { 26 | fill: none; 27 | stroke: #bbb; 28 | stroke-width: 1px; 29 | } 30 | 31 | .month { 32 | fill: none; 33 | stroke: #000; 34 | stroke-width: 2px; 35 | } 36 | 37 | .year-title { 38 | font-size: 18px; 39 | letter-spacing: 10px; 40 | } 41 | 42 | header{ 43 | width: 700px; 44 | margin-top: 2%; 45 | text-align: center; 46 | } 47 | 48 | svg text { 49 | font-size: 9px; 50 | text-transform: capitalize; 51 | fill: #000; 52 | } 53 | 54 | text.legendTitle{ 55 | font-size: 12px; 56 | font-weight: 500; 57 | } 58 | 59 | text.label{ 60 | font-size: 10px; 61 | } 62 | 63 | /*Style for Custom Tooltip */ 64 | div.tooltip { 65 | position: absolute; 66 | text-align: center; 67 | min-width: 100px; 68 | height: auto; 69 | padding: 2px; 70 | font-size: 12px; 71 | background: white; 72 | border: 1px orange solid; 73 | border-radius: 5px; 74 | pointer-events: none; 75 | } 76 | 77 | .tooltip p { 78 | margin: 5px; 79 | } -------------------------------------------------------------------------------- /exercises/instructions.txt: -------------------------------------------------------------------------------- 1 | Here are instructions for the four folders. Try to get as much done as possible. They do not have to be done in order. Please use d3 version 5. 2 | 3 | A. barline folder 4 | Here is a D3 bar line combo chart. I would like you to add the following: 5 | i) Brush window to the barline chart 6 | Example: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 7 | The x-axis should only show days and no smaller time unit than that. 8 | ii) Make the default window the last 7 days 9 | iii) Implement brush snapping so only day boundaries are displayed: 10 | Example: https://bl.ocks.org/mbostock/6232620 11 | 12 | B. michigan folder 13 | Here is a county map of Michigan. I would like you to format the text in the tooltip so it only shows the county name. I would also like you to add a click event so that it redirects to another webpage when you click on a county (you can have redirect to the wikipedia page for the county or something). 14 | 15 | C. homepage folder 16 | Here is a html file with some bootstrap layout. I would like you to add the county map of Michigan above the list of county names. See png for desired output. The results from task (B) should also be working. 17 | 18 | D. donut folder 19 | Here is a D3 donut chart with transition effects. The text transition goes in a straight line which doesn't look good. I would like the text to follow the arc of the circle. 20 | 21 | -------------------------------------------------------------------------------- /linkedplots/tsmaps3sv/tsmaps3sv.css: -------------------------------------------------------------------------------- 1 | svg { 2 | font: 10px sans-serif; 3 | padding: 10px; 4 | position: relative; 5 | } 6 | 7 | .axis, .frame { 8 | shape-rendering: crispEdges; 9 | } 10 | 11 | .axis line { 12 | stroke: #ddd; 13 | } 14 | 15 | .axis path { 16 | display: none; 17 | } 18 | 19 | .cell text { 20 | font-weight: bold; 21 | text-transform: capitalize; 22 | fill: black; 23 | } 24 | 25 | .frame { 26 | fill: none; 27 | stroke: #aaa; 28 | } 29 | 30 | .prepost { 31 | fill: none; 32 | stroke: rgb(187, 243, 57); 33 | stroke-width: 3px; 34 | clip-path: url(#clip); 35 | } 36 | 37 | .event { 38 | fill: none; 39 | stroke: royalblue; 40 | stroke-width: 3px; 41 | clip-path: url(#clip); 42 | } 43 | 44 | .xlabel, .ylabel { 45 | text-anchor: middle; 46 | } 47 | 48 | #charts { 49 | width: 80%; 50 | } 51 | 52 | /* Map */ 53 | @import url("https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css"); 54 | 55 | #gmap, #mapbox { 56 | width: 800px; 57 | height: 300px; 58 | position: absolute; 59 | top: 650; 60 | } 61 | 62 | .host, .evt, .remote { 63 | fill: none; 64 | stroke-width: 4px; 65 | } 66 | 67 | .host { 68 | stroke: rgb(187, 243, 57); 69 | } 70 | 71 | .host.evt { 72 | stroke: royalblue; 73 | } 74 | 75 | .remote { 76 | stroke: rgb(243, 169, 57); 77 | } 78 | 79 | .remote.evt { 80 | stroke: red; 81 | } 82 | 83 | .legendBkgd { 84 | fill: lightblue; 85 | fill-opacity: 0.6; 86 | } 87 | 88 | .legend.hidden { 89 | opacity: 0.2; 90 | } 91 | -------------------------------------------------------------------------------- /animation/chart_example_from_d3-graph-gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 |
    15 |
    16 | 17 |
    18 | 19 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /treemap/zoomable/ztreemap.css: -------------------------------------------------------------------------------- 1 | #chart { 2 | max-width: 100%; 3 | overflow:auto; 4 | } 5 | text { 6 | pointer-events: none; 7 | } 8 | .grandparent text { 9 | font-weight: bold; 10 | } 11 | rect { 12 | stroke: #fff; 13 | stroke-width: 1px; 14 | } 15 | rect.parent, 16 | .grandparent rect { 17 | stroke-width: 3px; 18 | } 19 | .grandparent:hover rect { 20 | fill: seagreen; 21 | } 22 | .children rect.parent, 23 | .grandparent rect { 24 | cursor: pointer; 25 | } 26 | .children rect.child { 27 | opacity: 0; 28 | } 29 | .children rect.parent { 30 | } 31 | .children:hover rect.child { 32 | opacity: 1; 33 | stroke-width: 1px; 34 | } 35 | .children:hover rect.parent { 36 | opacity: 0; 37 | } 38 | .legend { 39 | margin-bottom:8px !important; 40 | } 41 | .legend rect { 42 | stroke-width: 0px; 43 | } 44 | .legend text { 45 | text-anchor: middle; 46 | pointer-events: auto; 47 | font-size: 13px; 48 | font-family: sans-serif; 49 | fill: black; 50 | } 51 | .form-group { 52 | text-align:left; 53 | } 54 | .textdiv { 55 | font-family: "Open Sans",Helvetica,Arial,sans-serif; 56 | font-size: 14px; 57 | padding: 7px; 58 | cursor: pointer; 59 | overflow:none; 60 | } 61 | .textdiv .title { 62 | font-size: 102%; 63 | font-weight: bold; 64 | margin-top: 8px; 65 | font-size:11px !important; 66 | } 67 | .textdiv p{ 68 | line-height: 13px; 69 | margin:0 0 4px !important; 70 | padding:0px; 71 | font-size:10px !important; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /animation/cross-fade opacity/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 |
    23 |

    0

    24 | 25 | 63 | -------------------------------------------------------------------------------- /utilities/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Delaware Utilities 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

    Time Series

    29 |
    30 |
    31 |
    32 | 35 | -------------------------------------------------------------------------------- /selection/map_object_ops.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 35 | 36 | -------------------------------------------------------------------------------- /css/img_modal.css: -------------------------------------------------------------------------------- 1 | .imgBlock { 2 | position: relative; 3 | display: block; 4 | } 5 | 6 | .imgBlock:hover img { 7 | -webkit-transform: scale(1, 1); 8 | transform: scale(1, 1); 9 | opacity: 0.5; 10 | } 11 | 12 | .imgBlock:hover .img-modal { 13 | opacity: 0.8; 14 | -webkit-transform: scale(1); 15 | transform: scale(1); 16 | } 17 | 18 | .img-container { 19 | overflow: hidden; 20 | } 21 | 22 | .img-container img { 23 | width: 100%; 24 | height: auto; 25 | -webkit-transform: scale(1, 1); 26 | transform: scale(1, 1); 27 | /* transition: opacity .5s, -webkit-transform 0.5s; 28 | transition: opacity .5s, transform 0.5s; */ 29 | transition: opacity .5s, transform 0.5s, -webkit-transform 0.5s; 30 | } 31 | 32 | .img-modal { 33 | position: absolute; 34 | border: 0px solid white; 35 | top: 0rem; 36 | left: 0rem; 37 | right: 0rem; 38 | bottom: 0rem; 39 | padding: 2.5rem 1rem 2rem; 40 | opacity: 0; 41 | /* transition: opacity 0.5s, -webkit-transform 0.5s; 42 | transition: opacity 0.5s, transform 0.5s; */ 43 | transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; 44 | -webkit-transform: scale(1); 45 | transform: scale(1); 46 | background-color: #2b95be; 47 | } 48 | .img-modal h5, .img-modal p { 49 | color: white; 50 | text-align: center; 51 | } 52 | .img-modal h5 { 53 | font-family: Lato; 54 | font-weight: normal; 55 | font-size: 1.8rem; 56 | margin-top: 0; 57 | margin-bottom: 1.6rem; 58 | } 59 | .img-modal p { 60 | font-family: Source Sans Pro; 61 | font-size: 1rem; 62 | line-height: 1.5; 63 | } 64 | -------------------------------------------------------------------------------- /exercises/barline/daily.csv: -------------------------------------------------------------------------------- 1 | date,value,avg 2 | 2019-01-01,9,9 3 | 2019-01-02,8,8.5 4 | 2019-01-03,13,10 5 | 2019-01-04,8,9.5 6 | 2019-01-05,9,9.4 7 | 2019-01-06,6,8.83333333333333 8 | 2019-01-07,9,8.85714285714286 9 | 2019-01-08,10,9 10 | 2019-01-09,12,9.57142857142857 11 | 2019-01-10,8,8.85714285714286 12 | 2019-01-11,9,9 13 | 2019-01-12,8,8.85714285714286 14 | 2019-01-13,6,8.85714285714286 15 | 2019-01-14,15,9.71428571428571 16 | 2019-01-15,11,9.85714285714286 17 | 2019-01-16,4,8.71428571428571 18 | 2019-01-17,6,8.42857142857143 19 | 2019-01-18,13,9 20 | 2019-01-19,18,10.4285714285714 21 | 2019-01-20,6,10.4285714285714 22 | 2019-01-21,4,8.85714285714286 23 | 2019-01-22,11,8.85714285714286 24 | 2019-01-23,9,9.57142857142857 25 | 2019-01-24,8,9.85714285714286 26 | 2019-01-25,11,9.57142857142857 27 | 2019-01-26,12,8.71428571428571 28 | 2019-01-27,16,10.1428571428571 29 | 2019-01-28,7,10.5714285714286 30 | 2019-01-29,11,10.5714285714286 31 | 2019-01-30,4,9.85714285714286 32 | 2019-01-31,5,9.42857142857143 33 | 2019-02-01,2,7.71 34 | 2019-02-02,0,5.71 35 | 2019-02-03,0,3.71 36 | 2019-02-04,1,2.86 37 | 2019-02-05,0,1.86 38 | 2019-02-06,2,1.0 39 | 2019-02-07,1,0.86 40 | 2019-02-08,0,0.57 41 | 2019-02-09,1,0.71 42 | 2019-02-10,1,0.86 43 | 2019-02-11,2,1.0 44 | 2019-02-12,1,1.14 45 | 2019-02-13,1,1.0 46 | 2019-02-14,0,0.86 47 | 2019-02-15,1,1.0 48 | 2019-02-16,1,1.0 49 | 2019-02-17,1,1.0 50 | 2019-02-18,0,0.71 51 | 2019-02-19,1,0.71 52 | 2019-02-20,1,0.71 53 | 2019-02-21,1,0.86 54 | 2019-02-22,1,0.86 55 | 2019-02-23,0,0.71 56 | 2019-02-24,2,0.86 57 | 2019-02-25,0,0.86 58 | 2019-02-26,0,0.71 59 | 2019-02-27,2,0.86 60 | 2019-02-28,1,0.86 61 | 62 | -------------------------------------------------------------------------------- /tables/sortable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3.js v5 Sortable Table 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /tables/jquery DataTable/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery DataTable Bootstrap 4 styling using d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/features.geojson: -------------------------------------------------------------------------------- 1 | {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[-113.57940673828125,53.42712825922956],[-113.66317749023438,53.425491691402634],[-113.66111755371094,53.57293832648609],[-113.72222900390625,53.57212285981298],[-113.56430053710938,53.658881738642066],[-113.41941833496094,53.65806793034065],[-113.29444885253906,53.57008412432628],[-113.34251403808594,53.56967636543387],[-113.34388732910156,53.42385506057108],[-113.52378845214844,53.42385506057108]]}},{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[-113.57872009277344,53.42794651951664],[-113.57460021972656,53.490905272496185],[-113.51760864257811,53.49049675052435],[-113.51829528808592,53.42712825922956]]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.6151123046875,53.55866538908501]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.61648559570312,53.530105062697444]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.41735839843749,53.53214572511981]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.41873168945312,53.559481115263615]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.44207763671875,53.489271160998356]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.38233947753906,53.489271160998356]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.44345092773438,53.453713656852536]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[-113.38371276855469,53.45412253304956]}}]} -------------------------------------------------------------------------------- /tables/linkable cells/summary.txt: -------------------------------------------------------------------------------- 1 | Device,Trip,StartTime,Endtime,StartLocalTimeOrg,EndLocalTimeOrg,TripStartTimeUTC,TripStart,TodTripStart 2 | 2004,12,12850,186250,80077954,81940934,1539036877954,43381.92682816358,43381.71849516358 3 | 2004,14,11900,183650,78425616,80262755,1539121625616,43382.907703896606,43382.699370896604 4 | 2004,35,100,721250,49876097,57089258,1539611476097,43388.577269637346,43388.368936637344 5 | 2004,40,5250,159700,43054731,44777632,1540295854731,43396.49831863426,43396.289985634256 6 | 2004,46,2400,174650,40052729,41915393,1540379252729,43397.463573263885,43397.25524026388 7 | 2004,52,2350,164300,42602703,44367690,1540554602703,43399.49308684414,43399.284753844135 8 | 2004,53,25200,193650,76951388,78888434,1540588951388,43399.89064104938,43399.68230804938 9 | 2004,74,100,178150,42959223,44889249,1540900559223,43403.49721323302,43403.28888023302 10 | 2004,80,100,162000,42873131,44614761,1540986873131,43404.496216782405,43404.2878837824 11 | 2004,92,50,96200,76295154,77257122,1541193095154,43406.88304575617,43406.67471275617 12 | 2004,97,2050,164050,67951230,69592218,1541271151230,43407.786472569445,43407.57813956944 13 | 2004,107,100,195050,45056971,47137718,1541507456971,43410.521492708336,43410.313159708334 14 | 2004,119,16200,195900,80578688,82538519,1541802178688,43413.93262368827,43413.72429068827 15 | 2004,142,14000,133800,1221888,3010588,1542154821888,43418.01414220679,43417.80580920679 16 | 2004,161,1200,193500,46911729,49001190,1542632511729,43423.54295983796,43423.33462683796 17 | 2004,164,100,163900,43961483,45722194,1542715961483,43424.508813464505,43424.3004804645 18 | 2004,186,100,181300,46560203,48511035,1543323360203,43431.538891242286,43431.33055824228 19 | 2004,187,24000,204900,80334893,82384394,1543357134893,43431.929802006176,43431.721469006174 20 | 2004,196,15200,180950,81419845,83229948,1543531019845,43433.94235933642,43433.73402633642 21 | 2004,213,1350,179650,46880728,48802398,1543842080728,43437.542601003086,43437.334268003084 -------------------------------------------------------------------------------- /exercises/michigan/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 63 | 64 | -------------------------------------------------------------------------------- /line/single/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Line Chart in D3 v5 6 | 7 | 8 | 9 | 10 | 11 | 72 | -------------------------------------------------------------------------------- /mapbox/mapbox-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 60 | 61 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/legend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapbox GL JS + D3v5 6 | 7 | 8 | 9 | 16 | 17 | 18 |
    19 | 64 | -------------------------------------------------------------------------------- /tables/linkable cells/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Linkable Table Cells d3.js v5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/geojson.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapbox GL JS + D3v5 6 | 7 | 8 | 27 | 28 | 29 |
    30 | 66 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/points csv.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapbox GL JS + D3v5 6 | 7 | 8 | 22 | 23 | 24 |
    25 | 68 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/points geojson path.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapbox GL JS + D3v5 6 | 7 | 8 | 24 | 25 | 26 |
    27 | 66 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/points geojson.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapbox GL JS + D3v5 6 | 7 | 8 | 9 | 21 | 22 | 23 |
    24 | 60 | -------------------------------------------------------------------------------- /scrollama/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | body { 12 | font-family: 'Poppins', sans-serif; 13 | min-height: 1280px; 14 | color: #3b3b3b; 15 | font-size: 24px; 16 | } 17 | 18 | p, 19 | h1 { 20 | margin: 0; 21 | font-weight: 400; 22 | } 23 | 24 | #intro { 25 | max-width: 40rem; 26 | margin: 1rem auto; 27 | text-align: center; 28 | margin-bottom: 320px; 29 | } 30 | 31 | .intro-header { 32 | font-size: 2em; 33 | margin: 2rem auto 0.5rem auto; 34 | } 35 | 36 | .intro-text { 37 | color: #8a8a8a; 38 | } 39 | 40 | #outro { 41 | height: 640px; 42 | } 43 | 44 | /* scrolling */ 45 | #scrolly { 46 | position: relative; 47 | display: -webkit-box; 48 | display: -ms-flexbox; 49 | display: flex; 50 | background-color: #f3f3f3; 51 | padding: 1rem; 52 | } 53 | 54 | #scrolly > * { 55 | -webkit-box-flex: 1; 56 | -ms-flex: 1; 57 | flex: 1; 58 | } 59 | 60 | article { 61 | position: relative; 62 | padding: 0 1rem; 63 | max-width: 20rem; 64 | } 65 | 66 | .step { 67 | margin: 0 auto 2rem auto; 68 | background-color: #3b3b3b; 69 | color: #fff; 70 | } 71 | 72 | .step:last-child { 73 | margin-bottom: 0; 74 | } 75 | 76 | .step.is-active { 77 | background-color: goldenrod; 78 | color: #3b3b3b; 79 | } 80 | 81 | .step p { 82 | text-align: end; 83 | padding: 1rem; 84 | font-size: 1.0rem; 85 | } 86 | 87 | /* constant graphic */ 88 | figure { 89 | position: -webkit-sticky; 90 | position: sticky; 91 | width: 100%; 92 | margin: 0; 93 | -webkit-transform: translate3d(0, 0, 0); 94 | -moz-transform: translate3d(0, 0, 0); 95 | transform: translate3d(0, 0, 0); 96 | background-color: #369040; 97 | z-index: 0; 98 | } 99 | 100 | figure p { 101 | text-align: center; 102 | padding: 1rem; 103 | position: absolute; 104 | top: 50%; 105 | left: 50%; 106 | -moz-transform: translate(-50%, -50%); 107 | -webkit-transform: translate(-50%, -50%); 108 | transform: translate(-50%, -50%); 109 | font-size: 8rem; 110 | font-weight: 900; 111 | color: #fff; 112 | } 113 | 114 | -------------------------------------------------------------------------------- /mapbox/mapbox-GL/points csv path.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapbox GL JS + D3v5 6 | 7 | 8 | 23 | 24 | 25 |
    26 | 66 | -------------------------------------------------------------------------------- /squarechart/demographics/data/demographics.csv: -------------------------------------------------------------------------------- 1 | sex,racesimp,agegrp,married,children,college,healthcare,employed,selfemp,publictrans,inpoverty,isveteran,income_moremed,diffmovecog,diffhearvis,widowed,bornoutus,total 2 | 1,1,1,6,4,9,87,63,4,14,26,1,14,5,2,0,7,10816127 3 | 2,1,1,10,12,14,90,63,3,14,31,0,9,4,2,0,7,10211313 4 | 1,2,1,3,4,5,80,51,2,24,35,1,8,7,2,0,8,2371724 5 | 2,2,1,4,17,8,86,57,1,24,37,1,7,4,2,0,8,2261232 6 | 1,3,1,6,7,3,68,51,5,17,29,1,10,7,2,0,6,159797 7 | 2,3,1,10,20,2,74,49,2,15,34,0,5,5,3,0,5,149337 8 | 1,4,1,3,1,21,90,45,4,27,38,1,10,2,1,0,49,889968 9 | 2,4,1,8,4,24,91,48,2,29,40,0,9,1,1,0,51,860244 10 | 1,5,1,7,6,4,74,63,3,16,23,1,11,4,2,0,24,3484461 11 | 2,5,1,12,18,7,79,58,3,17,28,0,6,3,2,0,21,3272223 12 | 1,1,2,50,45,33,84,85,10,12,11,6,63,6,3,0,14,29976308 13 | 2,1,2,56,61,41,88,74,8,12,13,1,45,5,2,1,13,29248303 14 | 1,2,2,31,33,20,77,70,7,17,23,6,42,8,3,0,15,5474293 15 | 2,2,2,28,61,27,87,75,4,16,24,2,39,6,2,1,14,5961661 16 | 1,3,2,36,40,12,66,67,9,15,26,6,39,10,5,1,11,368463 17 | 2,3,2,39,64,17,76,61,6,12,30,2,30,9,4,1,8,368326 18 | 1,4,2,57,41,63,91,87,8,20,10,3,67,2,1,0,73,2840945 19 | 2,4,2,67,55,63,92,69,7,21,10,1,47,2,1,1,76,3206026 20 | 1,5,2,47,47,14,66,85,10,14,16,3,47,5,2,0,51,8890481 21 | 2,5,2,51,69,19,74,66,8,15,23,1,29,4,2,1,48,8378967 22 | 1,1,3,67,39,31,91,76,19,12,9,13,69,11,7,2,12,31687089 23 | 2,1,3,64,40,32,93,66,13,12,10,2,47,12,5,5,11,32602130 24 | 1,2,3,47,33,17,87,61,11,16,23,18,47,18,7,3,14,4686605 25 | 2,2,3,37,44,23,91,63,6,17,20,3,42,19,6,7,14,5413415 26 | 1,3,3,52,37,13,77,59,15,13,24,15,46,21,13,4,9,309841 27 | 2,3,3,50,43,16,81,56,8,15,23,2,34,23,10,8,8,325151 28 | 1,4,3,81,62,49,91,81,18,16,9,4,63,5,3,1,87,2060964 29 | 2,4,3,74,58,44,92,66,14,19,9,1,42,5,3,5,89,2444913 30 | 1,5,3,66,54,14,78,78,15,13,14,7,53,10,6,2,61,5527628 31 | 2,5,3,58,60,16,81,60,14,17,16,1,28,12,5,5,60,5601685 32 | 1,1,4,71,14,34,99,21,49,17,8,44,55,22,23,11,9,18312292 33 | 2,1,4,46,17,23,99,14,29,16,12,1,29,29,16,34,10,22620963 34 | 1,2,4,53,21,17,98,18,22,14,18,35,37,30,17,14,12,1795153 35 | 2,2,4,25,30,16,99,14,15,18,21,1,24,38,15,38,11,2671167 36 | 1,3,4,56,22,17,98,17,28,19,19,42,35,37,36,13,6,118233 37 | 2,3,4,38,29,13,98,16,22,20,21,2,21,40,24,34,7,143220 38 | 1,4,4,80,42,44,97,22,39,19,12,12,37,19,15,9,87,926430 39 | 2,4,4,50,41,30,97,14,27,24,15,0,21,26,14,35,87,1225877 40 | 1,5,4,67,35,13,97,21,27,16,18,21,31,27,22,12,55,1692627 41 | 2,5,4,38,40,9,96,12,24,25,21,1,13,34,17,34,57,2243121 42 | -------------------------------------------------------------------------------- /exercises/barline/report.css: -------------------------------------------------------------------------------- 1 | /* google map */ 2 | #map { 3 | height: 550px; 4 | width: 100%; 5 | margin-top: 1em; 6 | } 7 | 8 | /* bar line chart */ 9 | .bar { 10 | fill: #FFCB05; 11 | stroke: none; 12 | } 13 | 14 | .line { 15 | fill: none; 16 | stroke: #00274C; 17 | stroke-width: 4px; 18 | } 19 | 20 | .barline { 21 | display: block; 22 | } 23 | 24 | .grid line { 25 | stroke: lightgrey; 26 | stroke-opacity: 0.7; 27 | shape-rendering: crispEdges; 28 | } 29 | 30 | .grid path { 31 | stroke-width: 0; 32 | } 33 | 34 | .tick:nth-child(odd) text { 35 | visibility: hidden; 36 | } 37 | 38 | .x.ticklabel { 39 | text-anchor: end; 40 | font-size: 12px; 41 | } 42 | 43 | .y.ticklabel { 44 | font-size: 14px; 45 | } 46 | 47 | .y.label { 48 | text-anchor: middle; 49 | font-size: 20px; 50 | } 51 | 52 | .legend { 53 | text-anchor: start; 54 | font-size: 20px; 55 | } 56 | 57 | /* donut chart */ 58 | tspan { 59 | font: 16px sans-serif; 60 | text-anchor: middle; 61 | } 62 | 63 | .arclabel.one { 64 | font-weight: 600; 65 | } 66 | 67 | .donut_center { 68 | font-size: 2em; 69 | text-anchor: middle; 70 | } 71 | 72 | .donut_title { 73 | font-size: 1.5em; 74 | font-weight: 500; 75 | text-anchor: middle; 76 | } 77 | 78 | #logos { 79 | 80 | } 81 | 82 | /* table */ 83 | h1, h2, h3 { 84 | text-align: center; 85 | } 86 | table { 87 | width: 600px; 88 | border-collapse: collapse; 89 | margin: 0px auto; 90 | } 91 | th { 92 | background: rgb(0, 39, 76); 93 | color: white; 94 | font-weight: bold; 95 | cursor: s-resize; 96 | background-repeat: no-repeat; 97 | background-position: 3% center; 98 | } 99 | td, th { 100 | padding: 6px; 101 | border: 1px solid rgb(0, 39, 76); 102 | text-align: center; 103 | } 104 | #summary tr { 105 | background: rgb(255, 203, 5); 106 | } 107 | 108 | /* selenium save to pdf print settings */ 109 | @page { 110 | size: auto; /* auto is the initial value */ 111 | margin: 0mm; /* this affects the margin in the printer settings */ 112 | } 113 | 114 | html { 115 | /* background-color: #FFFFFF; */ 116 | margin: 40px; /* this affects the margin on the html before sending to printer */ 117 | } 118 | 119 | body { 120 | /* border: solid 1px red ; */ 121 | margin: 0mm; /* margin you want for the content */ 122 | } 123 | -------------------------------------------------------------------------------- /viewBox/bird/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
    6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /forcedirect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 91 | 92 | -------------------------------------------------------------------------------- /treemap/static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 | 6 | 7 |
    8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /timeseries/hbar/reliability.csv: -------------------------------------------------------------------------------- 1 | "may_id","new_value","start_time","end_time","duration" 2 | "marty","grounded-prod","2021-03-11 08:50:12","2021-03-11 08:50:21",8.119677 3 | "marty","autonomy","2021-03-11 08:50:21","2021-03-31 08:58:04",1724863 4 | "marty","manual-only","2021-03-31 08:58:04","2021-03-31 19:59:34",39690 5 | "marty","autonomy","2021-03-31 19:59:34","2021-04-07 16:13:50",591256 6 | "marty","manual-only","2021-04-07 16:13:50","2021-04-08 15:14:33",82843 7 | "marty","grounded-prod","2021-04-08 15:14:33","2021-04-14 10:27:58",501205 8 | "marty","manual-only","2021-04-14 10:27:58","2021-04-21 23:59:59",464055.461835 9 | "mchale","manual-only","2021-03-29 18:36:07","2021-03-31 19:59:39",177812 10 | "mchale","autonomy","2021-03-31 19:59:39","2021-04-15 07:31:49",1251130 11 | "mchale","manual-only","2021-04-15 07:31:49","2021-04-15 14:38:26",25597 12 | "mchale","autonomy","2021-04-15 14:38:26","2021-04-21 23:59:59",362627.461835 13 | "mojo","autonomy","2021-01-05 16:10:14","2021-03-29 18:29:50",7175975.03732 14 | "mojo","manual-only","2021-03-29 18:29:50","2021-03-31 19:59:20",178170 15 | "mojo","autonomy","2021-03-31 19:59:20","2021-04-05 09:12:02",393162 16 | "mojo","manual-only","2021-04-05 09:12:02","2021-04-07 22:07:39",219337 17 | "mojo","autonomy","2021-04-07 22:07:39","2021-04-08 08:40:11",37952 18 | "mojo","manual-only","2021-04-08 08:40:11","2021-04-08 15:35:30",24919 19 | "mojo","autonomy","2021-04-08 15:35:30","2021-04-08 15:36:09",39 20 | "mojo","manual-only","2021-04-08 15:36:09","2021-04-14 11:27:16",503467 21 | "mojo","grounded-prod","2021-04-14 11:27:16","2021-04-15 05:35:58",65322 22 | "mojo","manual-only","2021-04-15 05:35:58","2021-04-21 23:59:59",395175.461835 23 | "molly","autonomy","2021-01-05 16:11:17","2021-03-29 18:36:02",7176284.242782 24 | "molly","manual-only","2021-03-29 18:36:02","2021-03-31 19:59:24",177802 25 | "molly","autonomy","2021-03-31 19:59:24","2021-04-08 08:40:18",650454 26 | "molly","manual-only","2021-04-08 08:40:18","2021-04-21 23:59:59",988915.461835 27 | "morocca","grounded-prod","2021-01-22 10:55:48","2021-02-26 10:50:57",3023708.254198 28 | "morocca","autonomy","2021-02-26 10:50:57","2021-03-24 09:17:20",2237183 29 | "morocca","manual-only","2021-03-24 09:17:20","2021-03-31 19:59:30",643330 30 | "morocca","autonomy","2021-03-31 19:59:30","2021-04-05 09:12:08",393158 31 | "morocca","grounded-prod","2021-04-05 09:12:08","2021-04-15 14:38:57",883609 32 | "morocca","manual-only","2021-04-15 14:38:57","2021-04-21 23:59:59",362596.461835 33 | -------------------------------------------------------------------------------- /maps/county/choropleth_county.csv: -------------------------------------------------------------------------------- 1 | fips,value 2 | 01003,1 3 | 01045,1 4 | 01089,1 5 | 01117,1 6 | 04013,5 7 | 05007,1 8 | 05073,1 9 | 06001,2 10 | 06007,1 11 | 06013,1 12 | 06037,14 13 | 06059,3 14 | 06061,3 15 | 06067,1 16 | 06073,6 17 | 06075,5 18 | 06077,1 19 | 06079,2 20 | 06085,3 21 | 06087,1 22 | 06113,1 23 | 08031,1 24 | 08045,1 25 | 08069,2 26 | 08117,1 27 | 09001,2 28 | 09009,1 29 | 11001,2 30 | 12009,1 31 | 12011,3 32 | 12049,1 33 | 12057,1 34 | 12061,1 35 | 12071,1 36 | 12086,4 37 | 12099,1 38 | 12101,1 39 | 12117,1 40 | 13045,1 41 | 13067,2 42 | 13089,7 43 | 13095,1 44 | 13121,4 45 | 13135,2 46 | 13151,1 47 | 16001,1 48 | 17031,4 49 | 17043,3 50 | 17097,1 51 | 17113,2 52 | 17179,1 53 | 17197,1 54 | 18039,2 55 | 18089,1 56 | 18097,2 57 | 18105,1 58 | 18141,1 59 | 20015,1 60 | 20091,1 61 | 20169,1 62 | 22017,1 63 | 22097,1 64 | 23005,1 65 | 23019,2 66 | 24003,1 67 | 24005,2 68 | 24027,1 69 | 24031,1 70 | 24033,1 71 | 24039,1 72 | 24043,1 73 | 24510,1 74 | 25013,1 75 | 25017,1 76 | 25021,1 77 | 25025,2 78 | 26037,1 79 | 26049,1 80 | 26055,1 81 | 26075,2 82 | 26099,1 83 | 26115,2 84 | 26125,4 85 | 26149,1 86 | 26161,146 87 | 26163,9 88 | 27017,1 89 | 27037,1 90 | 27047,1 91 | 27053,2 92 | 27123,1 93 | 27139,1 94 | 29005,1 95 | 29023,1 96 | 29097,1 97 | 29183,1 98 | 29189,2 99 | 31033,1 100 | 31055,2 101 | 31109,1 102 | 32003,1 103 | 32019,1 104 | 33001,1 105 | 33017,1 106 | 34005,1 107 | 34015,2 108 | 34017,2 109 | 34021,1 110 | 34027,1 111 | 34035,1 112 | 34039,1 113 | 35027,1 114 | 35049,1 115 | 36003,1 116 | 36005,1 117 | 36007,1 118 | 36029,2 119 | 36047,5 120 | 36061,7 121 | 36067,1 122 | 36081,2 123 | 36085,1 124 | 36103,1 125 | 36119,1 126 | 37049,1 127 | 37067,1 128 | 37081,1 129 | 37119,3 130 | 37133,1 131 | 37183,2 132 | 39009,1 133 | 39035,1 134 | 39043,1 135 | 39049,4 136 | 39061,2 137 | 39085,1 138 | 39087,1 139 | 39095,3 140 | 39149,1 141 | 39151,1 142 | 40109,1 143 | 40119,1 144 | 41043,1 145 | 41051,3 146 | 42043,1 147 | 42077,1 148 | 42089,1 149 | 42091,5 150 | 42101,1 151 | 42119,1 152 | 42133,1 153 | 45007,1 154 | 45019,1 155 | 45063,2 156 | 45075,1 157 | 45079,45 158 | 45085,1 159 | 45091,1 160 | 47045,1 161 | 47063,1 162 | 47157,1 163 | 47183,1 164 | 48029,2 165 | 48113,1 166 | 48157,1 167 | 48181,1 168 | 48201,4 169 | 48361,1 170 | 48453,3 171 | 49035,3 172 | 49049,1 173 | 49057,1 174 | 50007,1 175 | 51003,2 176 | 51041,1 177 | 51087,1 178 | 51153,1 179 | 51810,2 180 | 53033,3 181 | 53053,1 182 | 53073,2 183 | 53077,1 184 | 54107,1 185 | 55025,2 186 | 55073,1 187 | 55101,1 188 | -------------------------------------------------------------------------------- /symbols/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 | 6 | 73 | 74 | -------------------------------------------------------------------------------- /maps/statecounty/choropleth_county.csv: -------------------------------------------------------------------------------- 1 | fips,value 2 | 01003,1 3 | 01045,1 4 | 01089,1 5 | 01117,1 6 | 04013,5 7 | 05007,1 8 | 05073,1 9 | 06001,2 10 | 06007,1 11 | 06013,1 12 | 06037,14 13 | 06059,3 14 | 06061,3 15 | 06067,1 16 | 06073,6 17 | 06075,5 18 | 06077,1 19 | 06079,2 20 | 06085,3 21 | 06087,1 22 | 06113,1 23 | 08031,1 24 | 08045,1 25 | 08069,2 26 | 08117,1 27 | 09001,2 28 | 09009,1 29 | 11001,2 30 | 12009,1 31 | 12011,3 32 | 12049,1 33 | 12057,1 34 | 12061,1 35 | 12071,1 36 | 12086,4 37 | 12099,1 38 | 12101,1 39 | 12117,1 40 | 13045,1 41 | 13067,2 42 | 13089,7 43 | 13095,1 44 | 13121,4 45 | 13135,2 46 | 13151,1 47 | 16001,1 48 | 17031,4 49 | 17043,3 50 | 17097,1 51 | 17113,2 52 | 17179,1 53 | 17197,1 54 | 18039,2 55 | 18089,1 56 | 18097,2 57 | 18105,1 58 | 18141,1 59 | 20015,1 60 | 20091,1 61 | 20169,1 62 | 22017,1 63 | 22097,1 64 | 23005,1 65 | 23019,2 66 | 24003,1 67 | 24005,2 68 | 24027,1 69 | 24031,1 70 | 24033,1 71 | 24039,1 72 | 24043,1 73 | 24510,1 74 | 25013,1 75 | 25017,1 76 | 25021,1 77 | 25025,2 78 | 26037,1 79 | 26049,1 80 | 26055,1 81 | 26075,2 82 | 26099,1 83 | 26115,2 84 | 26125,4 85 | 26149,1 86 | 26161,146 87 | 26163,9 88 | 27017,1 89 | 27037,1 90 | 27047,1 91 | 27053,2 92 | 27123,1 93 | 27139,1 94 | 29005,1 95 | 29023,1 96 | 29097,1 97 | 29183,1 98 | 29189,2 99 | 31033,1 100 | 31055,2 101 | 31109,1 102 | 32003,1 103 | 32019,1 104 | 33001,1 105 | 33017,1 106 | 34005,1 107 | 34015,2 108 | 34017,2 109 | 34021,1 110 | 34027,1 111 | 34035,1 112 | 34039,1 113 | 35027,1 114 | 35049,1 115 | 36003,1 116 | 36005,1 117 | 36007,1 118 | 36029,2 119 | 36047,5 120 | 36061,7 121 | 36067,1 122 | 36081,2 123 | 36085,1 124 | 36103,1 125 | 36119,1 126 | 37049,1 127 | 37067,1 128 | 37081,1 129 | 37119,3 130 | 37133,1 131 | 37183,2 132 | 39009,1 133 | 39035,1 134 | 39043,1 135 | 39049,4 136 | 39061,2 137 | 39085,1 138 | 39087,1 139 | 39095,3 140 | 39149,1 141 | 39151,1 142 | 40109,1 143 | 40119,1 144 | 41043,1 145 | 41051,3 146 | 42043,1 147 | 42077,1 148 | 42089,1 149 | 42091,5 150 | 42101,1 151 | 42119,1 152 | 42133,1 153 | 45007,1 154 | 45019,1 155 | 45063,2 156 | 45075,1 157 | 45079,45 158 | 45085,1 159 | 45091,1 160 | 47045,1 161 | 47063,1 162 | 47157,1 163 | 47183,1 164 | 48029,2 165 | 48113,1 166 | 48157,1 167 | 48181,1 168 | 48201,4 169 | 48361,1 170 | 48453,3 171 | 49035,3 172 | 49049,1 173 | 49057,1 174 | 50007,1 175 | 51003,2 176 | 51041,1 177 | 51087,1 178 | 51153,1 179 | 51810,2 180 | 53033,3 181 | 53053,1 182 | 53073,2 183 | 53077,1 184 | 54107,1 185 | 55025,2 186 | 55073,1 187 | 55101,1 188 | -------------------------------------------------------------------------------- /maps/hexmap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 | 20 |
    21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 |
    37 |
    38 |
    39 |
    40 | 41 | 42 | 43 | 44 | 45 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /donut/basic/donut_chart.js: -------------------------------------------------------------------------------- 1 | async function make_donut_chart(filename) { 2 | const data = await d3.csv(filename) 3 | 4 | var margin = {top: 10, right: 10, bottom: 10, left: 10}, 5 | width = 400 - margin.left - margin.right, 6 | height = 400 - margin.top - margin.bottom + 50, 7 | radius = Math.min(width, height) / 2; 8 | var color = d3.schemePaired; 9 | 10 | var pie = d3.pie() 11 | .value(d => d.value) 12 | .sort(null); 13 | 14 | var arc = d3.arc() 15 | .innerRadius(radius - 100) 16 | .outerRadius(radius - 20); 17 | 18 | var svg = d3.select("body").append("svg") 19 | .attr("width", width) 20 | .attr("height", height) 21 | .append("g") 22 | .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 23 | 24 | // arc slice 25 | var slices = svg.datum(data) 26 | .selectAll("path") 27 | .data(pie) 28 | .enter().append("path") 29 | .attr('class', 'slices') 30 | .attr("fill", (d,i) => color[i] ) 31 | .attr("d", arc) 32 | // .on('mouseenter', function() { d3.select(this).style('opacity', 0.5) }) 33 | // .on('mouseleave', function() { d3.select(this).style('opacity', 1) }) 34 | 35 | // label placement 36 | var text = svg.datum(data) 37 | .selectAll('text') 38 | .data(pie) 39 | .enter().append('text') 40 | .attr('transform', d => 'translate(' + arc.centroid(d) + ')') 41 | .attr('dy','0.35em') 42 | 43 | // label line 1 44 | text.filter(d => d.data.value > 0) 45 | .append("tspan") 46 | .attr("x", 0) 47 | .attr("y", "-0.7em") 48 | .style("font-weight", "bold") 49 | .style('text-anchor', 'middle') 50 | .text(d => d.data.index); 51 | 52 | // label line 2 53 | var total = 0 54 | text.filter(d => d.data.value > 0.25) 55 | .append("tspan") 56 | .attr("x", 0) 57 | .attr("y", "1em") 58 | .style('text-anchor', 'middle') 59 | .text(d => { 60 | total += parseInt(d.data.value); 61 | return d.data.value 62 | }); 63 | 64 | // Center text 65 | svg.append('text') 66 | .attr('class', 'toolCircle') 67 | .attr('dy', '0.35em') 68 | .text(total) // add text to the circle. 69 | .style('font-size', '3em') 70 | .style('text-anchor', 'middle'); 71 | 72 | svg.append('text') 73 | .attr('class', 'chart_title') 74 | .attr('x', 0) 75 | .attr('y', -height/2+25) 76 | .attr('dy', '0.35em') 77 | .text(total) // add text to the circle. 78 | .style('font-size', '2em') 79 | .style('text-anchor', 'middle') 80 | .text('Age') 81 | ; 82 | }; -------------------------------------------------------------------------------- /sankey/sankey.csv: -------------------------------------------------------------------------------- 1 | source,target,value 2 | Free,Amazon,90 3 | Free,Craigslist,105 4 | Free,Self,2 5 | Free,eBay,14 6 | Friends,Amazon,3 7 | Friends,Craigslist,5 8 | Friends,eBay,2 9 | Gift,Amazon,11 10 | Gift,Craigslist,6 11 | Gift,eBay,9 12 | Nancy,Amazon,54 13 | Nancy,Craigslist,31 14 | Nancy,Self,2 15 | Nancy,eBay,8 16 | Paid,Amazon,65 17 | Paid,Craigslist,69 18 | Paid,Self,4 19 | Paid,StubHub,5 20 | Paid,eBay,31 21 | Amazon,Appliance,1 22 | Amazon,Book,150 23 | Amazon,CD,8 24 | Amazon,DVD,11 25 | Amazon,Electronics,42 26 | Amazon,Furniture,1 27 | Amazon,Kitchen,1 28 | Amazon,Misc,9 29 | Craigslist,Appliance,24 30 | Craigslist,Book,1 31 | Craigslist,CD,1 32 | Craigslist,Coupon,4 33 | Craigslist,DVD,2 34 | Craigslist,Electronics,41 35 | Craigslist,Furniture,59 36 | Craigslist,Kitchen,9 37 | Craigslist,Misc,48 38 | Craigslist,Patio&Garden,17 39 | Craigslist,Sports,10 40 | Self,Book,1 41 | Self,Electronics,1 42 | Self,Misc,3 43 | Self,Patio&Garden,2 44 | Self,Sports,1 45 | StubHub,Misc,5 46 | eBay,Appliance,1 47 | eBay,Book,5 48 | eBay,Clothing,14 49 | eBay,Coupon,4 50 | eBay,DVD,2 51 | eBay,Electronics,14 52 | eBay,Kitchen,1 53 | eBay,Misc,18 54 | eBay,Sports,5 55 | Appliance,Delivery,3 56 | Appliance,Expedited,2 57 | Appliance,In Person,18 58 | Appliance,Tele-exchange,3 59 | Book,1st Class,33 60 | Book,Delivery,1 61 | Book,Expedited,26 62 | Book,In Person,1 63 | Book,Media,96 64 | CD,1st Class,6 65 | CD,Expedited,1 66 | CD,Media,2 67 | Clothing,1st Class,8 68 | Clothing,Expedited,6 69 | Coupon,1st Class,4 70 | Coupon,Email,2 71 | Coupon,Neutral Site,1 72 | Coupon,School,1 73 | DVD,1st Class,9 74 | DVD,Expedited,2 75 | DVD,In Person,1 76 | DVD,Media,2 77 | DVD,Out & About,1 78 | Electronics,1st Class,18 79 | Electronics,Delivery,5 80 | Electronics,Expedited,18 81 | Electronics,In Person,28 82 | Electronics,Neutral Site,6 83 | Electronics,Parcel Post,18 84 | Electronics,School,3 85 | Electronics,Tele-exchange,1 86 | Electronics,UPS Ground,1 87 | Furniture,Delivery,7 88 | Furniture,In Person,49 89 | Furniture,Neutral Site,2 90 | Furniture,Parcel Post,1 91 | Furniture,School,1 92 | Kitchen,1st Class,1 93 | Kitchen,Delivery,2 94 | Kitchen,Expedited,1 95 | Kitchen,In Person,5 96 | Kitchen,Neutral Site,2 97 | Misc,1st Class,14 98 | Misc,Delivery,3 99 | Misc,Expedited,11 100 | Misc,In Person,48 101 | Misc,Neutral Site,1 102 | Misc,Parcel Post,2 103 | Misc,School,1 104 | Misc,Tele-exchange,3 105 | Patio&Garden,In Person,18 106 | Patio&Garden,Tele-exchange,1 107 | Sports,1st Class,1 108 | Sports,Expedited,4 109 | Sports,In Person,10 110 | Sports,Tele-exchange,1 111 | -------------------------------------------------------------------------------- /tables/jquery DataTable/make_table.js: -------------------------------------------------------------------------------- 1 | var makeTable = function() { 2 | var data, sort_by, filter_cols; // Customizable variables 3 | 4 | // Main function, where the actual plotting takes place. 5 | function _table(targetDiv) { 6 | // Create and select table skeleton 7 | var tableSelect = targetDiv.append("table") 8 | // Generally, hard-coding Ids is wrong, because then 9 | // you can't have 2 table plots in one page (both will have the same id). 10 | // I will leave it for now for simplicity. TODO: remove hard-coded id. 11 | .attr("id", "data-table") 12 | // .attr("class", "display compact") 13 | .attr("class", "order-column compact table table-striped table-bordered") 14 | .style("visibility", "hidden") // Hide table until style loads; 15 | .style("width", "100%"); 16 | 17 | // Set column names 18 | var colnames = Object.keys(data[0]); 19 | if(typeof filter_cols !== 'undefined'){ 20 | // If we have filtered cols, remove them. 21 | colnames = colnames.filter(d => filter_cols.indexOf(d) < 0); 22 | } 23 | 24 | // Here I initialize the table and head only. 25 | // I will let DataTables handle the table body. 26 | var headSelect = tableSelect.append("thead") 27 | .append("tr") 28 | .selectAll('td') 29 | .data(colnames).enter() 30 | .append('td') 31 | .text(d => d); 32 | 33 | 34 | 35 | if(typeof sort_by !== 'undefined'){ 36 | // if we have a sort_by column, format it according to datatables. 37 | sort_by[0] = colnames.indexOf(sort_by[0]); //colname to col idx 38 | sort_by = [sort_by]; //wrap it in an array 39 | } 40 | 41 | // DataTable Manual: https://www.datatables.net/manual 42 | $(document).ready(function() { 43 | table = $('#data-table').DataTable({ 44 | data: data, 45 | columns: colnames.map(function(d) { return {data: d}; }), 46 | "bLengthChange": true, // page length flag 47 | "lengthMenu": [10, 20, 50], 48 | "bDeferRender": true, 49 | "order": sort_by, 50 | }); 51 | 52 | tableSelect.style("visibility", "visible"); 53 | }); 54 | } 55 | 56 | /**** Setter / getters functions to customize the table plot *****/ 57 | _table.datum = function(_){ 58 | if (!arguments.length) {return data;} 59 | data = _; 60 | 61 | return _table; 62 | }; 63 | _table.filterCols = function(_){ 64 | if (!arguments.length) {return filter_cols;} 65 | filter_cols = _; 66 | 67 | return _table; 68 | }; 69 | _table.sortBy = function(colname, ascending){ 70 | if (!arguments.length) {return sort_by;} 71 | 72 | sort_by = []; 73 | sort_by[0] = colname; 74 | sort_by[1] = ascending ? 'asc': 'desc'; 75 | 76 | return _table; 77 | }; 78 | 79 | // This is the return of the main function 'makeTable' 80 | return _table; 81 | } -------------------------------------------------------------------------------- /circlepack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 84 | 85 | -------------------------------------------------------------------------------- /maps/cities.geojson: -------------------------------------------------------------------------------- 1 | { 2 | "type": "FeatureCollection", 3 | "features": [ 4 | { 5 | "type": "Feature", 6 | "properties": { 7 | "name": "Ann Arbor", 8 | "isActive": true 9 | }, 10 | "geometry": { 11 | "type": "Point", 12 | "coordinates": [ 13 | -83.739, 14 | 42.274 15 | ] 16 | } 17 | }, 18 | { 19 | "type": "Feature", 20 | "properties": { 21 | "name": "Grand Rapids, MI", 22 | "isActive": false 23 | }, 24 | "geometry": { 25 | "type": "Point", 26 | "coordinates": [ 27 | -85.679, 28 | 42.966 29 | ] 30 | } 31 | }, 32 | { 33 | "type": "Feature", 34 | "properties": { 35 | "name": "Arlington", 36 | "isActive": true 37 | }, 38 | "geometry": { 39 | "type": "Point", 40 | "coordinates": [ 41 | -97.114, 42 | 32.729 43 | ] 44 | } 45 | }, 46 | { 47 | "type": "Feature", 48 | "properties": { 49 | "name": "Indianapolis", 50 | "isActive": true 51 | }, 52 | "geometry": { 53 | "type": "Point", 54 | "coordinates": [ 55 | -86.175, 56 | 39.774 57 | ] 58 | } 59 | }, 60 | { 61 | "type": "Feature", 62 | "properties": { 63 | "name": "Detroit", 64 | "isActive": false 65 | }, 66 | "geometry": { 67 | "type": "Point", 68 | "coordinates": [ 69 | -83.049, 70 | 42.334 71 | ] 72 | } 73 | }, 74 | { 75 | "type": "Feature", 76 | "properties": { 77 | "name": "Providence", 78 | "isActive": false 79 | }, 80 | "geometry": { 81 | "type": "Point", 82 | "coordinates": [ 83 | -71.426, 84 | 41.829 85 | ] 86 | } 87 | }, 88 | { 89 | "type": "Feature", 90 | "properties": { 91 | "name": "Columbus", 92 | "isActive": false 93 | }, 94 | "geometry": { 95 | "type": "Point", 96 | "coordinates": [ 97 | -83.000, 98 | 39.962 99 | ] 100 | } 101 | }, 102 | { 103 | "type": "Feature", 104 | "properties": { 105 | "name": "Higashihiroshima", 106 | "isActive": true 107 | }, 108 | "geometry": { 109 | "type": "Point", 110 | "coordinates": [ 111 | 132.713, 112 | 34.404 113 | ] 114 | } 115 | } 116 | ] 117 | } -------------------------------------------------------------------------------- /crossfilter/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 73 | 74 | -------------------------------------------------------------------------------- /maps/michigan_tipsy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 82 | 83 | -------------------------------------------------------------------------------- /bar/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 100 | 101 | -------------------------------------------------------------------------------- /heatmap/example1/data.csv: -------------------------------------------------------------------------------- 1 | date,bucket,count 2 | 2012-07-20,800,25 3 | 2012-07-27,900,25 4 | 2012-07-27,1000,75 5 | 2012-07-27,1100,125 6 | 2012-07-27,1200,175 7 | 2012-07-27,1300,225 8 | 2012-07-27,1400,275 9 | 2012-07-27,1500,325 10 | 2012-07-20,1700,204 11 | 2012-07-20,1800,187 12 | 2012-07-20,1900,177 13 | 2012-07-20,2000,164 14 | 2012-07-20,2100,125 15 | 2012-07-20,2200,140 16 | 2012-07-20,2300,109 17 | 2012-07-20,2400,103 18 | 2012-07-21,800,123 19 | 2012-07-21,900,165 20 | 2012-07-21,1000,237 21 | 2012-07-21,1100,278 22 | 2012-07-21,1200,338 23 | 2012-07-21,1300,306 24 | 2012-07-21,1400,316 25 | 2012-07-21,1500,269 26 | 2012-07-21,1600,271 27 | 2012-07-21,1700,241 28 | 2012-07-21,1800,188 29 | 2012-07-21,1900,174 30 | 2012-07-21,2000,158 31 | 2012-07-21,2100,153 32 | 2012-07-21,2200,132 33 | 2012-07-22,900,154 34 | 2012-07-22,1000,241 35 | 2012-07-22,1100,246 36 | 2012-07-22,1200,300 37 | 2012-07-22,1300,305 38 | 2012-07-22,1400,301 39 | 2012-07-22,1500,292 40 | 2012-07-22,1600,253 41 | 2012-07-22,1700,251 42 | 2012-07-22,1800,214 43 | 2012-07-22,1900,189 44 | 2012-07-22,2000,179 45 | 2012-07-22,2100,159 46 | 2012-07-22,2200,161 47 | 2012-07-22,2300,144 48 | 2012-07-22,2400,139 49 | 2012-07-22,2500,132 50 | 2012-07-22,2600,136 51 | 2012-07-22,2800,105 52 | 2012-07-23,800,120 53 | 2012-07-23,900,156 54 | 2012-07-23,1000,209 55 | 2012-07-23,1100,267 56 | 2012-07-23,1200,299 57 | 2012-07-23,1300,316 58 | 2012-07-23,1400,318 59 | 2012-07-23,1500,307 60 | 2012-07-23,1600,295 61 | 2012-07-23,1700,273 62 | 2012-07-23,1800,283 63 | 2012-07-23,1900,229 64 | 2012-07-23,2000,192 65 | 2012-07-23,2100,193 66 | 2012-07-23,2200,170 67 | 2012-07-23,2300,164 68 | 2012-07-23,2400,154 69 | 2012-07-23,2500,138 70 | 2012-07-23,2600,101 71 | 2012-07-23,2700,115 72 | 2012-07-23,2800,103 73 | 2012-07-24,800,105 74 | 2012-07-24,900,156 75 | 2012-07-24,1000,220 76 | 2012-07-24,1100,255 77 | 2012-07-24,1200,308 78 | 2012-07-24,1300,338 79 | 2012-07-24,1400,318 80 | 2012-07-24,1500,255 81 | 2012-07-24,1600,278 82 | 2012-07-24,1700,260 83 | 2012-07-24,1800,235 84 | 2012-07-24,1900,230 85 | 2012-07-24,2000,185 86 | 2012-07-24,2100,145 87 | 2012-07-24,2200,147 88 | 2012-07-24,2300,157 89 | 2012-07-24,2400,109 90 | 2012-07-25,800,104 91 | 2012-07-25,900,191 92 | 2012-07-25,1000,201 93 | 2012-07-25,1100,238 94 | 2012-07-25,1200,223 95 | 2012-07-25,1300,229 96 | 2012-07-25,1400,286 97 | 2012-07-25,1500,256 98 | 2012-07-25,1600,240 99 | 2012-07-25,1700,233 100 | 2012-07-25,1800,202 101 | 2012-07-25,1900,180 102 | 2012-07-25,2000,184 103 | 2012-07-25,2100,161 104 | 2012-07-25,2200,125 105 | 2012-07-25,2300,110 106 | 2012-07-25,2400,101 107 | 2012-07-26,1300,132 108 | 2012-07-26,1400,117 109 | 2012-07-26,1500,124 110 | 2012-07-26,1600,154 111 | 2012-07-27,1700,167 112 | 2012-07-27,1800,137 113 | 2012-07-26,1900,169 114 | 2012-07-26,2000,175 115 | 2012-07-27,2100,168 116 | 2012-07-26,2200,188 117 | 2012-07-26,2300,137 118 | 2012-07-26,2400,173 119 | 2012-07-26,2500,164 120 | 2012-07-26,2600,167 121 | 2012-07-26,2700,115 122 | 2012-07-26,2800,116 123 | 2012-07-26,2900,118 124 | 2012-07-26,3000,125 125 | 2012-07-26,3200,104 -------------------------------------------------------------------------------- /line/multiline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Line Chart in D3 v5 6 | 7 | 8 | 9 | 10 | 11 | 104 | -------------------------------------------------------------------------------- /exercises/donut/donut_chart.js: -------------------------------------------------------------------------------- 1 | async function make_donut_chart(filename) { 2 | const data = await d3.csv(filename) 3 | 4 | var margin = {top: 10, right: 10, bottom: 10, left: 10}, 5 | width = 600 - margin.left - margin.right, 6 | height = 650 - margin.top - margin.bottom + 50, 7 | radius = Math.min(width, height) / 2; 8 | var color = d3.schemePaired.slice(6); 9 | 10 | var pie = d3.pie() 11 | .value(d => d.value) 12 | .sort(null); 13 | 14 | var arc = d3.arc() 15 | .outerRadius(radius * 0.9) 16 | .innerRadius(radius * 0.5) 17 | 18 | var svg = d3.select("body").append("svg") 19 | .attr("width", width) 20 | .attr("height", height) 21 | .append("g") 22 | .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 23 | 24 | // arc slice 25 | var angles = [] 26 | var path = svg.datum(data).selectAll("path") 27 | .data(pie) 28 | .enter().append("path") 29 | .attr("fill", (d,i) => (color[i]) ) 30 | .attr("d", arc) 31 | .each(function(d) {return this._current = d} ) // store the initial angles 32 | 33 | // label placement 34 | var label = svg.datum(data).selectAll('text') 35 | .data(pie) 36 | .enter().append('text') 37 | .attr('transform', d => 'translate(' + arc.centroid(d) + ')') 38 | .attr('dy','0.35em') 39 | .style('opacity', d => d.data['value']==0 ? 0 : 1) 40 | 41 | // label line 1 42 | label.append("tspan") 43 | .attr('class', 'age-group') 44 | .attr("x", 0) 45 | .attr("y", "-0.7em") 46 | .text(d => d.data['index']) 47 | 48 | // label line 2 49 | label.append("tspan") 50 | .attr('class', 'count') 51 | .attr("x", 0) 52 | .attr("y", "1em") 53 | .text(d => d.data['value']) 54 | 55 | // Center text 56 | var total = d3.sum(data.map(d => d['value'])) 57 | svg.append('text') 58 | .attr('class', 'total') 59 | .attr('dy', '0.35em') 60 | .text(total) // add text to the circle. 61 | 62 | svg.append('text') 63 | .attr('class', 'chart_title') 64 | .attr('x', 0) 65 | .attr('y', -height/2+25) 66 | .attr('dy', '0.35em') 67 | .text('Age') 68 | 69 | d3.selectAll("input") 70 | .on("change", update); 71 | 72 | function update() { 73 | var value = this.value; 74 | pie.value(d => d[value]); // change the value function 75 | path = path.data(pie); // compute the new angles 76 | path.transition().duration(750) 77 | .attrTween("d", arcTween); // redraw the arcs 78 | var label = svg.datum(data).selectAll('text') 79 | .data(pie) 80 | label.transition().duration(750) // animate text movement 81 | .attr('transform', d => 'translate(' + arc.centroid(d) + ')') 82 | .attr('dy','0.35em') 83 | // .style('opacity', 0) // make text invisible 84 | // .transition().duration(750) // and fade in if needed 85 | .style('opacity', d => d.data[value]==0 ? 0 : 1) 86 | label.selectAll('.count') 87 | .text(d => d.data[value]) 88 | svg.selectAll('.total') 89 | .text(d3.sum(data.map(d => d[value]))) 90 | } 91 | 92 | function arcTween(a) { 93 | var i = d3.interpolate(this._current, a); 94 | this._current = i(0); 95 | return t => arc(i(t)); 96 | } 97 | }; 98 | 99 | -------------------------------------------------------------------------------- /maps/michigan_bootstrap/css/style.css: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | border-radius: 0; 3 | margin-bottom: 0; 4 | background-color: black; 5 | opacity:1; 6 | } 7 | .navbar a:hover{ 8 | color: black !important; 9 | background-color: #CCC !important; 10 | } 11 | .navbar .active{ 12 | font-weight: bold; 13 | } 14 | .navbar a{ 15 | color:#FFFFFF !important; 16 | } 17 | 18 | .row.content { 19 | height:auto; 20 | } 21 | .sidenav{ 22 | /* padding-top: 170px; */ 23 | background-color:#1F3551; 24 | height: 100%; 25 | } 26 | .footer{ 27 | position: absolute; 28 | background-color: black; 29 | right: 0; 30 | left: 0; 31 | /* bottom: -200; */ 32 | padding: 45px; 33 | width: 100%; 34 | } 35 | li{ 36 | list-style: none; 37 | } 38 | #wayne, #timetable { 39 | width: 70vw; 40 | margin: 5px; 41 | } 42 | #race, #age, #gender{ 43 | width: 100%; 44 | margin: 5px; 45 | } 46 | section{ 47 | margin-top: 40px; 48 | } 49 | table { 50 | border-collapse: collapse; 51 | } 52 | 53 | th { 54 | background-color: #2E4B70; 55 | color: white; 56 | text-align: center; 57 | 58 | } 59 | 60 | table, th, td { 61 | padding: 10px; 62 | font-weight: 400; 63 | text-transform: capitalize; 64 | } 65 | 66 | th{ 67 | font-weight: 600; 68 | } 69 | .container-top-buffer{ 70 | margin-top:20px; 71 | } 72 | .top-buffer{ 73 | margin-top:50px; 74 | margin-bottom: 25px; 75 | } 76 | .section-buffer{ 77 | margin-top: 60px; 78 | } 79 | 80 | .list-group-item-action{ 81 | font-size: 20px !important; 82 | margin: 5px; 83 | } 84 | 85 | .list-group-item-text a{ 86 | color: white !important; 87 | } 88 | .list-group-item-text a:hover{ 89 | background-color:#B5CEEE!important; 90 | color: #1F3551 !important; 91 | } 92 | .list-group-item-text a:focus{ 93 | background-color:#B5CEEE!important; 94 | color: #1F3551 !important; 95 | text-decoration: none; 96 | text-transform: uppercase; 97 | font-weight: bold; 98 | } 99 | 100 | .list-group a{ 101 | background-color: #1F3551 !important; 102 | color: white !important; 103 | font-size: 14px; 104 | border: none; 105 | } 106 | .list-group{ 107 | background-color: #1F3551 !important; 108 | border: none; 109 | } 110 | .centerimage img{ 111 | width:100%; 112 | padding: 5px; 113 | } 114 | 115 | h2{ 116 | font-weight: bold; 117 | } 118 | #datasource{ 119 | font-weight: bold; 120 | } 121 | #number-incidents{ 122 | font-size: 80px; 123 | } 124 | #number-change{ 125 | color: red; 126 | font-weight: bold; 127 | font-size: 36px; 128 | } 129 | #up-down{ 130 | color: red; 131 | font-weight: bold; 132 | font-size: 36px; 133 | } 134 | 135 | #change-percent{ 136 | font-weight: bold; 137 | color: red; 138 | } 139 | 140 | hr{ 141 | border-color: black; 142 | border-radius: 2px; 143 | 144 | } 145 | .rightbuff{ 146 | background-color:#2E4B70; 147 | height: 100%; 148 | } 149 | 150 | .footstyle{ 151 | background-color: black; 152 | color: white; 153 | } 154 | input[type=text] { 155 | padding: 10px; 156 | margin: 10px;; 157 | font-size: 17px; 158 | } 159 | 160 | .searchbar{ 161 | margin: 50px; 162 | } 163 | 164 | .sidebuff{ 165 | height: 100%; 166 | background-color:#2E4B70; 167 | } 168 | 169 | @media screen and (min-width:700px){ 170 | .row.content{ 171 | height:750px; 172 | } 173 | .sidenav{ 174 | padding-top: 50px; 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /maps/michigan_cities_bootstrap/css/style.css: -------------------------------------------------------------------------------- 1 | .navbar{ 2 | border-radius: 0; 3 | margin-bottom: 0; 4 | background-color: black; 5 | opacity:1; 6 | } 7 | .navbar a:hover{ 8 | color: black !important; 9 | background-color: #CCC !important; 10 | } 11 | .navbar .active{ 12 | font-weight: bold; 13 | } 14 | .navbar a{ 15 | color:#FFFFFF !important; 16 | } 17 | 18 | .row.content { 19 | height:auto; 20 | } 21 | .sidenav{ 22 | /* padding-top: 170px; */ 23 | background-color:#1F3551; 24 | height: 100%; 25 | } 26 | .footer{ 27 | position: absolute; 28 | background-color: black; 29 | right: 0; 30 | left: 0; 31 | /* bottom: -200; */ 32 | padding: 45px; 33 | width: 100%; 34 | } 35 | li{ 36 | list-style: none; 37 | } 38 | #wayne, #timetable { 39 | width: 70vw; 40 | margin: 5px; 41 | } 42 | #race, #age, #gender{ 43 | width: 100%; 44 | margin: 5px; 45 | } 46 | section{ 47 | margin-top: 40px; 48 | } 49 | table { 50 | border-collapse: collapse; 51 | } 52 | 53 | th { 54 | background-color: #2E4B70; 55 | color: white; 56 | text-align: center; 57 | 58 | } 59 | 60 | table, th, td { 61 | padding: 10px; 62 | font-weight: 400; 63 | text-transform: capitalize; 64 | } 65 | 66 | th{ 67 | font-weight: 600; 68 | } 69 | .container-top-buffer{ 70 | margin-top:20px; 71 | } 72 | .top-buffer{ 73 | margin-top:50px; 74 | margin-bottom: 25px; 75 | } 76 | .section-buffer{ 77 | margin-top: 60px; 78 | } 79 | 80 | .list-group-item-action{ 81 | font-size: 20px !important; 82 | margin: 5px; 83 | } 84 | 85 | .list-group-item-text a{ 86 | color: white !important; 87 | } 88 | .list-group-item-text a:hover{ 89 | background-color:#B5CEEE!important; 90 | color: #1F3551 !important; 91 | } 92 | .list-group-item-text a:focus{ 93 | background-color:#B5CEEE!important; 94 | color: #1F3551 !important; 95 | text-decoration: none; 96 | text-transform: uppercase; 97 | font-weight: bold; 98 | } 99 | 100 | .list-group a{ 101 | background-color: #1F3551 !important; 102 | color: white !important; 103 | font-size: 14px; 104 | border: none; 105 | } 106 | .list-group{ 107 | background-color: #1F3551 !important; 108 | border: none; 109 | } 110 | .centerimage img{ 111 | width:100%; 112 | padding: 5px; 113 | } 114 | 115 | h2{ 116 | font-weight: bold; 117 | } 118 | #datasource{ 119 | font-weight: bold; 120 | } 121 | #number-incidents{ 122 | font-size: 80px; 123 | } 124 | #number-change{ 125 | color: red; 126 | font-weight: bold; 127 | font-size: 36px; 128 | } 129 | #up-down{ 130 | color: red; 131 | font-weight: bold; 132 | font-size: 36px; 133 | } 134 | 135 | #change-percent{ 136 | font-weight: bold; 137 | color: red; 138 | } 139 | 140 | hr{ 141 | border-color: black; 142 | border-radius: 2px; 143 | 144 | } 145 | .rightbuff{ 146 | background-color:#2E4B70; 147 | height: 100%; 148 | } 149 | 150 | .footstyle{ 151 | background-color: black; 152 | color: white; 153 | } 154 | input[type=text] { 155 | padding: 10px; 156 | margin: 10px;; 157 | font-size: 17px; 158 | } 159 | 160 | .searchbar{ 161 | margin: 50px; 162 | } 163 | 164 | .sidebuff{ 165 | height: 100%; 166 | background-color:#2E4B70; 167 | } 168 | 169 | @media screen and (min-width:700px){ 170 | .row.content{ 171 | height:750px; 172 | } 173 | .sidenav{ 174 | padding-top: 50px; 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /legends/continuous_discrete/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Continuous Scale Legend in D3 v5 6 | 7 | 8 | 13 | 14 | 15 | 110 | -------------------------------------------------------------------------------- /scatterplot/legend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /bar/stacked grouped normalized/age_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 105 | 106 | -------------------------------------------------------------------------------- /maps/michigan_tooltipster/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
    30 | 92 | 93 | -------------------------------------------------------------------------------- /squarechart/demographics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demographics 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 |
    18 |
    19 |
    20 |

    how groups of people live

    21 |
    22 |
    23 |
    24 |
    25 |

    Select among the following demographics.

    26 |
    27 |
    28 |
    29 |
    30 |
    31 |

    SEX

    32 |
    33 |
    34 |
    Female
    35 |
    Male
    36 |
    37 |
    38 |
    39 |
    40 |

    age group

    41 |
    18 to 24
    42 |
    25 to 44
    43 |
    45 to 64
    44 |
    65+
    45 |
    46 |
    47 |
    48 |
    49 |
    50 |

    Race or Origin

    51 |
    White
    52 |
    Black
    53 |
    Asian
    54 |
    Native
    55 |
    Hispanic
    56 |
    57 |
    58 |
    59 |
    60 |

    There are about this many people in this group…

    61 |
    62 |
    63 |
    64 |
    65 |
    0
    66 |
    67 |
    68 |
    69 |
    70 |

    …and of these people, here are their percentage breakdowns.

    71 |
    72 |
    73 | 74 |
    75 |
    76 | 77 |
    78 |
    79 |
    80 | 81 | 82 | -------------------------------------------------------------------------------- /treemap/static/treemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fa", 3 | "children": [ 4 | { 5 | "name": "Amazon", 6 | "children": [ 7 | { 8 | "name": "Book", 9 | "size": 4002.8600000000097 10 | }, 11 | { 12 | "name": "DVD", 13 | "size": 102.18999999999997 14 | }, 15 | { 16 | "name": "Electronics", 17 | "size": 1518.8799999999997 18 | }, 19 | { 20 | "name": "CD", 21 | "size": 79.63999999999999 22 | }, 23 | { 24 | "name": "Furniture", 25 | "size": 30.01 26 | }, 27 | { 28 | "name": "Misc", 29 | "size": 226.30999999999997 30 | }, 31 | { 32 | "name": "Kitchen", 33 | "size": 6.01 34 | }, 35 | { 36 | "name": "Appliance", 37 | "size": 28.51 38 | } 39 | ] 40 | }, 41 | { 42 | "name": "Craigslist", 43 | "children": [ 44 | { 45 | "name": "Patio&Garden", 46 | "size": 730.0 47 | }, 48 | { 49 | "name": "Electronics", 50 | "size": 967.95 51 | }, 52 | { 53 | "name": "Appliance", 54 | "size": 606.0 55 | }, 56 | { 57 | "name": "Furniture", 58 | "size": 1933.0 59 | }, 60 | { 61 | "name": "Misc", 62 | "size": 817.0 63 | }, 64 | { 65 | "name": "Sports", 66 | "size": 445.0 67 | }, 68 | { 69 | "name": "CD", 70 | "size": 25.0 71 | }, 72 | { 73 | "name": "Book", 74 | "size": 20.0 75 | }, 76 | { 77 | "name": "Coupon", 78 | "size": 110.0 79 | }, 80 | { 81 | "name": "Kitchen", 82 | "size": 177.0 83 | }, 84 | { 85 | "name": "DVD", 86 | "size": 15.0 87 | } 88 | ] 89 | }, 90 | { 91 | "name": "Self", 92 | "children": [ 93 | { 94 | "name": "Electronics", 95 | "size": 200.0 96 | }, 97 | { 98 | "name": "Book", 99 | "size": 10.0 100 | }, 101 | { 102 | "name": "Patio&Garden", 103 | "size": 90.0 104 | }, 105 | { 106 | "name": "Misc", 107 | "size": 39.0 108 | }, 109 | { 110 | "name": "Sports", 111 | "size": 6.0 112 | } 113 | ] 114 | }, 115 | { 116 | "name": "StubHub", 117 | "children": [ 118 | { 119 | "name": "Misc", 120 | "size": 1515.0 121 | } 122 | ] 123 | }, 124 | { 125 | "name": "eBay", 126 | "children": [ 127 | { 128 | "name": "Sports", 129 | "size": 236.76 130 | }, 131 | { 132 | "name": "Electronics", 133 | "size": 977.1700000000001 134 | }, 135 | { 136 | "name": "Misc", 137 | "size": 423.08000000000004 138 | }, 139 | { 140 | "name": "Coupon", 141 | "size": 19.099999999999994 142 | }, 143 | { 144 | "name": "DVD", 145 | "size": 53.0 146 | }, 147 | { 148 | "name": "Clothing", 149 | "size": 198.48000000000002 150 | }, 151 | { 152 | "name": "Appliance", 153 | "size": 14.0 154 | }, 155 | { 156 | "name": "Kitchen", 157 | "size": 40.0 158 | }, 159 | { 160 | "name": "Book", 161 | "size": 39.49 162 | } 163 | ] 164 | } 165 | ] 166 | } -------------------------------------------------------------------------------- /donut/transition/donut_chart_v2.js: -------------------------------------------------------------------------------- 1 | async function make_donut_chart(filename) { 2 | const data = await d3.csv(filename) 3 | 4 | const margin = {top: 10, right: 10, bottom: 10, left: 10}, 5 | width = 600 - margin.left - margin.right, 6 | height = 650 - margin.top - margin.bottom + 50, 7 | radius = Math.min(width, height) / 2; 8 | const color = d3.schemePaired.slice(6); 9 | 10 | let pie = d3.pie() 11 | .value(d => d.value) 12 | .sort(null); 13 | 14 | let arc = d3.arc() 15 | .outerRadius(radius * 0.9) 16 | .innerRadius(radius * 0.5) 17 | 18 | let svg = d3.select("body").append("svg") 19 | .attr("width", width) 20 | .attr("height", height) 21 | .append("g") 22 | .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 23 | 24 | // arc slice 25 | let angles = [] 26 | let path = svg.datum(data).selectAll("path") 27 | .data(pie) 28 | .enter().append("path") 29 | .attr("fill", (d,i) => (color[i]) ) 30 | .attr("d", arc) 31 | .each(function(d) { 32 | this._current = d 33 | }) // store the initial angles 34 | 35 | // label placement 36 | let label = svg.datum(data).selectAll('text') 37 | .data(pie) 38 | .enter().append('text') 39 | .attr('transform', d => 'translate(' + arc.centroid(d) + ')') 40 | .attr('dy','0.35em') 41 | .style('opacity', d => d.data['value']==0 ? 0 : 1) 42 | .each(function(d) { 43 | const endAt = { startAngle: d.startAngle, endAngle: d.endAngle }; 44 | this._current = endAt; 45 | }) // store the initial angles 46 | 47 | // label line 1 48 | label.append("tspan") 49 | .attr('class', 'age-group') 50 | .attr("x", 0) 51 | .attr("y", "-0.7em") 52 | .text(d => d.data['index']) 53 | 54 | // label line 2 55 | label.append("tspan") 56 | .attr('class', 'count') 57 | .attr("x", 0) 58 | .attr("y", "1em") 59 | .text(d => d.data['value']) 60 | 61 | // Center text 62 | let total = d3.sum(data.map(d => d['value'])) 63 | svg.append('text') 64 | .attr('class', 'total') 65 | .attr('dy', '0.35em') 66 | .text(total) // add text to the circle. 67 | 68 | svg.append('text') 69 | .attr('class', 'chart_title') 70 | .attr('x', 0) 71 | .attr('y', -height/2+25) 72 | .attr('dy', '0.35em') 73 | .text('Age') 74 | 75 | d3.selectAll("input") 76 | .on("change", update); 77 | 78 | function update() { 79 | let value = this.value; 80 | let easement = d3.easeSin; 81 | let T = 750; 82 | pie.value(d => d[value]); // change the value function 83 | path = path.data(pie); // compute the new angles 84 | path.transition().ease(easement).duration(T) 85 | .attrTween("d", arcTween); // redraw the arcs 86 | let label = svg.datum(data).selectAll('text') 87 | .data(pie) 88 | label.transition().ease(easement).duration(T) // animate text movement 89 | .attr('dy','0.35em') 90 | .style('opacity', d => d.data[value]==0 ? 0 : 1) 91 | .attrTween("transform", function(d) { 92 | const endAt = { startAngle: d.startAngle, endAngle: d.endAngle }; 93 | const interpolate = d3.interpolate(this._current, d); 94 | this._current = endAt; 95 | return function(t) { 96 | return `translate(${arc.centroid(interpolate(t))})`; 97 | }; 98 | }); 99 | label.selectAll('.count') 100 | .text(d => d.data[value]) 101 | svg.selectAll('.total') 102 | .text(d3.sum(data.map(d => d[value]))) 103 | } 104 | 105 | function arcTween(a) { 106 | let i = d3.interpolate(this._current, a); 107 | this._current = i(0); 108 | return t => arc(i(t)); 109 | } 110 | }; 111 | 112 | --------------------------------------------------------------------------------