This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Virtual Scrolling Demo</title> | |
| <style> | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; |
| function focus() { | |
| $('input').focus(); | |
| } | |
| $(focus); | |
| $(function() { | |
| $(document.body).load(focus); | |
| $('#click').click(focus); | |
| $('#click-timeout').click(function() { | |
| setTimeout(focus); | |
| }); |
| <div ng-app="sortableApp" ng-controller="sortableController" class="container"> | |
| <h2>ui.sortable connected lists event order</h2> | |
| <div class="floatleft"> | |
| <div ui-sortable="sortableOptionsList[0]" class="apps-container screen floatleft" ng-model="rawScreens[0]"> | |
| <div class="app" ng-repeat="app in rawScreens[0]">{{$index}} {{app.title}}</div> | |
| </div> | |
| <div ui-sortable="sortableOptionsList[1]" class="apps-container screen floatleft" ng-model="rawScreens[1]"> | |
| <div class="app" ng-repeat="app in rawScreens[1]">{{$index}} {{app.title}}</div> | |
| </div> |
| <div id="chart"> | |
| <h4>Percent of adults over 25 with at least a bachelor's degree:</h4> | |
| <p><strong>Median:</strong> <span class="median"></span></p> | |
| <small>Source: <cite><a href="http://census.gov">U.S. Census Bureau</a></cite>, via <cite><a href="http://beta.censusreporter.org/compare/01000US/040/table/?release=acs2011_1yr&table=B15003">Census Reporter</a></cite></small> | |
| </div> |
[ Launch: test2 ] e6a4156f88a7e480a646 by alexanderchan[ Launch: test ] 4653053 by enjalot[ Launch: test ] 4652017 by enjalot[ Launch: test ] 4582399 by enjalot
| /*jshint esnext:true */ | |
| class TestAutosize extends React.Component { | |
| constructor(props){ | |
| super(props); | |
| this.state = { | |
| searchText: 'some example text' | |
| } | |
| this.autosize = this.autosize.bind(this); |
Using D3 in a React component to transition elements. Alternative implementations only with D3 and using React's TransitionGroup addon.
This block is here.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> |
This example pulls together various examples of work with trees in D3.js.
The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.
One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.
Dragging can be performed on any node other than root (flare). Dropping can be done on any node.
Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.