hogwild

hogwild

hogwild

geounit,gu_a3,formal_en,pop_est,gdp_md_est,economy,income_grp,region_un,subregion
Kosovo,XKX,Republic of Kosovo,1804838,5352,6. Developing region,4. Lower middle income,Europe,Southern Europe
Somaliland,SOL,Republic of Somaliland,3500000,12250,6. Developing region,4. Lower middle income,Africa,Eastern Africa
Northern Cyprus,CYN,Turkish Republic of Northern Cyprus,265100,3600,6. Developing region,3. Upper middle income,Asia,Western Asia
Afghanistan,AFG,Islamic State of Afghanistan,28400000,22270,7. Least developed region,5. Low income,Asia,Southern Asia
Angola,AGO,People's Republic of Angola,12799293,110300,7. Least developed region,3. Upper middle income,Africa,Middle Africa
Albania,ALB,Republic of Albania,3639453,21810,6. Developing region,4. Lower middle income,Europe,Southern Europe
United Arab Emirates,ARE,United Arab Emirates,4798491,184300,6. Developing region,2. High income: nonOECD,Asia,Western Asia
Argentina,ARG,Argentine Republic,40913584,573900,5. Emerging region: G20,3. Upper middle income,America

hogwild

hogwild

Tutorial: Building visualization with D3 and React

The tutorial is designed under the idea of learning by doing. We assume that you have some familiarity with JavaScript and D3. But if you need to review JavaScript and D3, the following guides are recommended:

• A re-introduction to JavaScript
• D3 Tutorials

This tutorial mainly contains two parts:

• Introduction to basice React conpects
• Making a scatter plot by using D3 and React together

We will build a scatter plot in this tutorial. The dataset we used is the trip histories data of Citi Bike, originally from Citi Bike System Data. We modified the trip data of 2020 by removing/aggregating some columns and rows. Here is the link of our dataset: Citi Bike 2020. It has eight

hogwild

tripduration,starttime,stoptime,start station id,start station name,start station latitude,start station longitude,usertype,birth year,gender
1437,2020-04-01 01:06:20.6300,2020-04-01 01:30:17.9680,3678,Fairmount Ave,40.72572613742560,-74.07195925712590,Customer,2002,2
264,2020-04-01 05:02:42.0570,2020-04-01 05:07:06.1260,3207,Oakland Ave,40.7376037,-74.0524783,Subscriber,1963,2
254,2020-04-01 06:20:28.1190,2020-04-01 06:24:42.1380,3678,Fairmount Ave,40.72572613742560,-74.07195925712590,Subscriber,1981,1
429,2020-04-01 06:33:30.5170,2020-04-01 06:40:40.1990,3195,Sip Ave,40.73089709786180,-74.06391263008120,Subscriber,1964,1
805,2020-04-01 06:38:32.9220,2020-04-01 06:51:58.2050,3193,Lincoln Park,40.7246050998869,-74.07840594649320,Subscriber,1965,1
317,2020-04-01 06:43:44.5300,2020-04-01 06:49:01.8340,3211,Newark Ave,40.72152515,-74.046304543,Subscriber,1956,1
238,2020-04-01 06:43:52.2160,2020-04-01 06:47:51.0450,3267,Morris Canal,40.7124188237569,-74.03852552175520,Subscriber,1967,1
360,2020-04-01 06:51:07.845

hogwild

This dataset is updated from Citi Bike trip data: https://www.citibikenyc.com/system-data.

It has the following columns:

• station: the name of the Citi Bike stations
• latitude: the latitudes of the stations
• longitude: the longitudes of the stations
• start: the number of riders that start their trips from the corresponding stations
• tripdurationS: the median of trip durations that start from the corresponding stations
• end: the number of riders that end their trips to the corresponding stations
• tripdurationE: the median of trip durations that end to the corresponding stations

hogwild

{"error": 42716.2954, "samples": 506, "value": [22.532806324110698], "label": "RM <= 6.94", "type": "split", "children": [{"error": 17317.3210, "samples": 430, "value": [19.93372093023257], "label": "LSTAT <= 14.40", "type": "split", "children": [{"error": 6632.2175, "samples": 255, "value": [23.349803921568636], "label": "DIS <= 1.38", "type": "split", "children": [{"error": 390.7280, "samples": 5, "value": [45.58], "label": "CRIM <= 10.59", "type": "split", "children": [{"error": 0.0000, "samples": 4, "value": [50.0], "label": "Leaf - 4", "type": "leaf"}, {"error": 0.0000, "samples": 1, "value": [27.9], "label": "Leaf - 5", "type": "leaf"}]}, {"error": 3721.1632, "samples": 250, "value": [22.90520000000001], "label": "RM <= 6.54", "type": "split", "children": [{"error": 1636.0675, "samples": 195, "value": [21.629743589743576], "label": "LSTAT <= 7.57", "type": "split", "children": [{"error": 129.6307, "samples": 43, "value": [23.969767441860473], "label": "TAX <= 222.50", "type": "split", "children": [{"err

hogwild

##Fork of Mike Bostock's original force-directed example. This fork uses an ugly csv which unfortunately is just a fact of life in my world. JSON is highly recommended unless it is unavailable.

##Original readme.md is below and does a very nice job of explaining the graph.

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

hogwild

license: gpl-3.0
height: 600
redirect: https://beta.observablehq.com/@mbostock/d3-force-directed-graph