Helder's public fiddles
-
Ch01 D3 Hello World
Drawing SVG circles with D3. The D3 library needs to be loaded (see Resources tab below)
-
v39ecotk
No-Library (pure JS), HTML, CSS, JavaScript
-
D3 Map 19: Events
D3v5 mapmaking tutorial: example 19 (showing city name on mouse over)
-
D3 Map 18: Color scale
D3v5 mapmaking tutorial: example 18 (using a color scale for city populations and bubble size)
-
D3 Map 17: Bubble chart
D3v5 mapmaking tutorial: example 17 (using an area scale to reveal city populations)
-
D3 Map 16: Dot distribution
D3v5 mapmaking tutorial: example 16 (revealing human presence through coordinates of cities)
-
D3 Map 15: Applying projection to individual coordinates
D3v5 mapmaking tutorial: example 15 (using a dot distribution to display cities)
-
D3 Map 14: Using geoArea
D3v5 mapmaking tutorial: example 14 (population density choropleth using d3.geoArea() to calculate shape area)
-
D3 Map 13: Loading thematic data
D3v5 mapmaking tutorial: example 13 (loading data from a CSV and adding it to corresponding GeoJSON object properties to make a cloropleth)
-
D3 Map 12: Using another projection
D3v5 mapmaking tutorial: example 12 (using a different projection and loading the d3-geo-projection module)
-
D3 Map 11: Map projection
D3v5 mapmaking tutorial: example 10 (applying the Marcator projection to scale the generated path data)
-
D3 Map 10: General Update Pattern
D3v5 mapmaking tutorial: example 9 (using the general update pattern to bind all shape data to generated SVG paths)
-
D3 Map 9: D3 geo path generator
D3v5 mapmaking tutorial: example 9 (drawing a GeoJSON shape using a generated SVG path without a projection)
-
D3 Map 8: SVG path
D3v5 mapmaking tutorial: example 8 (drawing a shape using an SVG path element)
-
D3 Map 7: SVG binding with D3
D3v5 mapmaking tutorial: example 7 (using D3 to draw a polygon and scales do adjust values)
-
D3 Map 6: SVG example
D3v5 mapmaking tutorial: example 6 (using pure SVG XML tags to draw a shape)
-
D3 Map 5: D3 bindings
D3v5 mapmaking tutorial: example 5 drawing a simple shape using CSS positioning to demonstrate D3 bindings)
-
D3 Map 4: show positions with CSS
D3v5 mapmaking tutorial: example 4 (showing the coordinates using CSS positioning)
-
D3 Map 4: show positions with CSS
D3v5 mapmaking tutorial: example 4 (showing the coordinates using CSS positioning)
-
D3 Map 3: list GeoJSON coords
D3v5 mapmaking tutorial: example 2 (listing the coordinates for one objec)