vx - 🐯react + d3 = vx | visualization components

  •        37

vx is a collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM. Let's make a simple bar graph.

https://vx-demo.now.sh/
https://github.com/hshoff/vx

Tags
Implementation
License
Platform

   




Related Projects

react-vis - Data-Visualization oriented components

  •    Javascript

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.Install react-vis via npm.

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.


react-d3-components - D3 Components for React

  •    Javascript

Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM. to start a webserver, and navigate to http://localhost:8000/example in order to visualize the new example page. Note that the example page directly points to the dist folder.

victory-native - victory components for react native

  •    Javascript

Note: react-native-svg has strict version requirements for both react and react-native. Please match versions to those required by react-native-svg. See the up-to-date requirements on the react-native-svg Readme. We encourage you to use the latest version of react-native-svg possible for your project, as victory-native issues are frequently solved by react-native-svg bugfixes.Full documentation can be found here.

mapd-charting - Dimensional charting built to work natively with crossfilter rendered using d3.js

  •    Javascript

Dimensional charting built to work natively with crossfilter rendered using d3.js. MapD-Charting is a superfast charting library that works natively with crossfilter that is based off dc.js. It is designed to work with MapD-Connector and MapD-Crossfilter to create charts instantly with our MapD-Core SQL Database. Please see examples for further understanding to quickly create interactive charts.

react-native-svg-charts - 📈 One library to rule all charts for React Native 📊

  •    Javascript

A much improved decorator system has been introduced, allowing for greater flexibility and less complexity. See releases for more information. In order to not bloat this README to much we've moved some examples over to react-native-svg-charts-examples. There we will try to showcase the really cool things you can do with this library. This README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.

react-d3-library - Open source library for using D3 in React

  •    Javascript

An open source library that will allow developers the ability to reroute D3 output to React’s virtual DOM. Just use your existing D3 code, and with a few simples lines, you can now harness the power of React with the flexibility of D3! React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.

epoch - A general purpose, real-time visualization library.

  •    HTML

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.

XChart - Light weight Java library for plotting data

  •    Java

XChart is a light-weight and convenient library for plotting data designed to go from data to chart in the least amount of time possible and to take the guess-work out of customizing the chart style.

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.

Orson Charts - A 3D chart library for Java applications (JavaFX, Swing or server-side)

  •    Java

Orson Charts is a 3D chart library for the Java(tm) platform that can generate a wide variety of 3D charts for use in client-side applications (JavaFX and Swing) and server-side applications (with export to PDF, SVG, PNG and JPEG).

angular-nvd3 - AngularJS directive for NVD3 reusable charting library (based on D3)

  •    Javascript

This thing is designed to make it easier to work with nvd3.js re-usable charting library. This directive allows you to easily customize your charts via JSON API.The key feature is that the original hierarchical structure of nvd3 models is completely preserved in directive JSON structure. This means that while you creating a complex chart that containing multiple elementary chart models (such as line, bar, axis, ...), you can in turn customize the properties of each internal elementary models as well as the global charting properties the way you want. This can be done as usual, but it becomes quite easily to customize while applying JSON approach to.

d3.chart - A framework for creating reusable charts with d3.js.

  •    Javascript

A framework for creating reusable charts with D3.js. Otherwise, you can download it directly from this repository.