| license: gpl-3.0 | |
| height: 500 | |
| border: no |
| license: gpl-3.0 |
Demonstrates some graph layouts on the Coauthorship in Network Science network in D3.js version 5.
Used NetworkX to convert the GML files into JSON, and calculate some basic node metrics.
See the following Gist for more information about the dataset used in these examples:
🔗 https://gist.github.com/sjengle/510ffd96ad06fc3921aee0425e962c1e/
| [ { | |
| "date" : "2016-01-02T00:00:00", | |
| "count_incidntnum" : "34", | |
| "pddistrict" : "BAYVIEW" | |
| } | |
| , { | |
| "date" : "2016-01-03T00:00:00", | |
| "count_incidntnum" : "29", | |
| "pddistrict" : "BAYVIEW" | |
| } |
| height: 750 |
This example will demonstrate how to implement a bubble chart in D3.js version 5 with legends using d3-legend by Susie Lu.
The data comes from Opportunity Insights, which is a "non-partisan, not-for-profit organization based at Harvard University" that puts out public datasets produced for on their research.
We will specifically use data from the Mobility Report Cards project. The dataset is titled "Mobility Report Cards: Preferred Estimates of Access and Mobility Rates by College" and can be accessed via these direct links:
| "RegionID","RegionName","SizeRank","Index","HistoricAverage_1985thru1999","1979-03","1979-06","1979-09","1979-12","1980-03","1980-06","1980-09","1980-12","1981-03","1981-06","1981-09","1981-12","1982-03","1982-06","1982-09","1982-12","1983-03","1983-06","1983-09","1983-12","1984-03","1984-06","1984-09","1984-12","1985-03","1985-06","1985-09","1985-12","1986-03","1986-06","1986-09","1986-12","1987-03","1987-06","1987-09","1987-12","1988-03","1988-06","1988-09","1988-12","1989-03","1989-06","1989-09","1989-12","1990-03","1990-06","1990-09","1990-12","1991-03","1991-06","1991-09","1991-12","1992-03","1992-06","1992-09","1992-12","1993-03","1993-06","1993-09","1993-12","1994-03","1994-06","1994-09","1994-12","1995-03","1995-06","1995-09","1995-12","1996-03","1996-06","1996-09","1996-12","1997-03","1997-06","1997-09","1997-12","1998-03","1998-06","1998-09","1998-12","1999-03","1999-06","1999-09","1999-12","2000-03","2000-06","2000-09","2000-12","2001-03","2001-06","2001-09","2001-12","2002-03","2002-06","2002-09", |
| "RegionID","RegionName","SizeRank","Index","HistoricAverage_1985thru1999","1979-03","1979-06","1979-09","1979-12","1980-03","1980-06","1980-09","1980-12","1981-03","1981-06","1981-09","1981-12","1982-03","1982-06","1982-09","1982-12","1983-03","1983-06","1983-09","1983-12","1984-03","1984-06","1984-09","1984-12","1985-03","1985-06","1985-09","1985-12","1986-03","1986-06","1986-09","1986-12","1987-03","1987-06","1987-09","1987-12","1988-03","1988-06","1988-09","1988-12","1989-03","1989-06","1989-09","1989-12","1990-03","1990-06","1990-09","1990-12","1991-03","1991-06","1991-09","1991-12","1992-03","1992-06","1992-09","1992-12","1993-03","1993-06","1993-09","1993-12","1994-03","1994-06","1994-09","1994-12","1995-03","1995-06","1995-09","1995-12","1996-03","1996-06","1996-09","1996-12","1997-03","1997-06","1997-09","1997-12","1998-03","1998-06","1998-09","1998-12","1999-03","1999-06","1999-09","1999-12","2000-03","2000-06","2000-09","2000-12","2001-03","2001-06","2001-09","2001-12","2002-03","2002-06","2002-09", |
In this demo, we asynchronously load a text file, use JavaScript to count the number of times each letter appears in that file, and generate a bar chart showing the letter count in D3.js v5.
This is meant to be an introductory demo to expose students to HTML, CSS, SVG, JavaScript, D3, Bl.ocks, Blockbuilder, and VizHub for the first time.
This example can be found at: Gist, Bl.ocks, Blockbuilder, [VizHub](https://vizhub.com/sjengle/c31dc3533020482