Recreating the result of Mike Bostock's awesome tutorial with OpenLayers
pbogden pbogden
This example uses the default (Mercator) projection for OpenLayers. The "Web Mercator" versionreproduces the result of Mike Bostock's D3 + Leaflet example. See his example for an explanation of how things work.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| SOURCE_FILES = d3.min.js grouped2stacked.js grouped.js | |
| GENERATED_JS_FILE = my.min.js | |
| all: $(GENERATED_JS_FILE) | |
| .PHONY: clean all | |
| $(GENERATED_JS_FILE): $(SOURCE_FILES) | |
| @rm -f $@ | |
| @cat $^ > tmp.js |
We can make this file beautiful and searchable if this error is corrected: It looks like row 3 should actually have 49 columns, instead of 8. in line 2.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ProjectID,ProjectName,ProjectDescription,LoggedOut,IsDeleted,IsInactive,DateCreated,DateAquired,DateChanged,ProjectRoleIDMask,TaskRoleIDMask,UserRoleIDMask,CrewMax,BitmapURL,NeedsRepair,InServiceSince,AtRegattaSince,SeasonTrips,SeasonMiles,LifetimeMiles,SeasonRepairs,SeasonRepairHours,SeasonMaintenance,SeasonMaintenanceHours,LastRepairID,LastWash,MilesSinceLastWash,SeasonBoatHistory,S2Trips,S2Miles,S2Repairs,S2RepairHours,S2Maintenance,S2MaintenanceHours,S2SeasonBoatHistory,S3Trips,S3Miles,S3Repairs,S3RepairHours,S3Maintenance,S3MaintenanceHours,S3SeasonBoatHistory,S4Trips,S4Miles,S4Repairs,S4RepairHours,S4Maintenance,S4MaintenanceHours,S4SeasonBoatHistory | |
| -2,Private other,Generic private non-single ,NULL,0,NULL,2006-06-25 20:06:00.000,2006-06-25 20:06:00.000,NULL,7,NULL,NULL,NULL,NULL,1,2013-06-16 08:36:26.000,NULL,38,181.88,94.52,0,0,0,0,NULL,NULL,NULL,NULL,11,76.82,0,0,0,0,NULL,0,0,NULL,NULL,NULL,NULL,NULL,0,0,NULL,NULL,NULL,NULL,NULL | |
| -1,Private,Generic private 1x.,NULL,0,NULL,2005-03-11 14:56:02.000,20 |
simple transition demo
- SVG button (this one)
- styling uses: gradient fill & drop shadow
- buttons interact by dispatching custom events
- Toggling buttons
- SVG drop-shadow
- For animations, I prefer mbostock's block
- An HTML button
Drag the various elements to see how things work.
- The
<image>is clipped with a<clipPath>(both are SVG elements). - Render the
<clipPath>itself with SVG<use>. - `` references its clipping path with the
clip-pathSVG attribute.
Simple x-y plot -- Check out Mike Bostock's.