d3-grid-layout - A grid layout for d3.js

  •        602

A grid layout for d3.js. The layout gradually expands to fit its nodes/cells within its boundaries.See the demo for a better explanation.

http://hughsk.github.com/d3-grid-layout/
https://github.com/hughsk/d3-grid-layout

Dependencies:

d3 : ~3.1.4

Tags
Implementation
License
Platform

   




Related Projects

Vue.D3.tree - Vue component to display tree based on D3.js layout.

  •    Vue

Update documentationVue components to display graphics based on D3.js layout. For all these events, the argument passed is {element, data} where element represents the node build by D3.js and data is the node raw data.

WebCola - Javascript constraint-based graph layout

  •    TypeScript

JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries. Note: While D3 adaptor supports both D3 v3 and D3 v4, WebCoLa's interface is styled like D3 v3. Follow the setup in our homepage for more details.

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

textures - Textures.js is a JavaScript library for creating SVG patterns

  •    Javascript

Textures.js is a javascript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization. Read more on http://riccardoscalco.github.io/textures/.

d3-dag - Layout algorithms for visualizing directed acyclic graphs

  •    Javascript

Often data sets are hierarchical, but are not in a tree structure, such as genetic data. In these instances d3-hierarchy may not suit your needs, which is why d3-dag (Directed Acyclic Graph) exists. This module implements a data structure for manipulating DAGs that mimics the API of d3-hierarchy as much as possible, while allowing layouts of acylic DAGs. The update from 0.1 to 0.2 includes a few small backwards incompatible changes.


party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

d3act - d3 with React

  •    Javascript

d3 has been the de facto standard when it comes to data visualisations for a while now and React has recently emerged as the go-to library for building user interfaces. d3 and React are both data-centric libraries, making them a natural fit; d3 takes a data-driven approach and React aims to solve the problem of data changing over time in the context of building large applications. Nicolas Hery's "Integrating D3.js visualizations in a React app" talks about letting d3 do all the work after React has finished rendering components in the DOM. d3act is inspired by @nicolas_hery's approach; create a lightweight React component wrapper that maps React's lifecycle methods componentDidMount, componentDidUpdate and componentWillUnmount into a d3 chart's create, update and unmount methods respectively.

vue-grid-layout - A draggable and resizable grid layout, for Vue.js.

  •    Vue

This is the initial layout of the grid. The value must be an Array of Object items. Each item must have i, x, y, w and h proprties. Please refer to GridItem documentation below for more informations.

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •    Javascript

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

  •    CSS

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.

react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

greedo-layout-for-android - Full aspect ratio grid LayoutManager for Android's RecyclerView

  •    Java

A drop-in custom layout manager for Android RecyclerViews to layout a grid of photos while respecting their aspect ratios. See the sample project for a complete solution on how to use GreedoLayout. Below are the specific steps.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

autoresponsive-react - Auto Responsive Layout Library For React

  •    Javascript

Auto responsive grid layout library for React.See our CONTRIBUTING.md for information on how to contribute.

patternfills - A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3

  •    HTML

This is a collection of svg-based pattern fills that can be used both as SVG patterns defs and CSS background image urls. There is also an example of how one might use pattern fills with d3.js. A lot of these pattens started from: http://philbit.com/svgpatterns/ which is an amazing project.

Singularity - Grids without limits

  •    CSS

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use. Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.

D3 - A JavaScript visualization library for HTML and SVG

  •    Javascript

D3 is a small, free JavaScript library for manipulating HTML documents based on data. D3 can help you quickly visualize your data as HTML or SVG, handle interactivity, and incorporate smooth transitions and staged animations into your pages. You can use D3 as a visualization framework (like Protovis), or you can use it to build dynamic pages (like jQuery).






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.