chernoff-faces - Multivariate data visualization using D3.js and React.js

  •        70

This project is about exploring Chernoff faces. Imagine visually comparing election results as they're rolling in on election day. You want to see how things like voter turnout, dem-to-repub ratio, votes counted, etc compare across a few select states. There are a number of separate categories (states) and lots of variables for each one, each with their own range of possible values.

https://gnarmis.github.io/chernoff-faces
https://github.com/gnarmis/chernoff-faces

Dependencies:

browserify : ^8.0.2
d3 : ^3.5.2
debowerify : ^1.2.0
domready : ^1.0.7
functional-node : ^1.0.2
jasmine-node : ^1.14.5
node-static : ^0.7.6
react : ^0.12.2
react-bootstrap : ^0.13.0
reactify : ^0.17.1

Tags
Implementation
License
Platform

   




Related Projects

vx - ๐Ÿฏreact + d3 = vx | visualization components

  •    Javascript

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.

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.

d4 - Data-Driven Declarative Documents

  •    Javascript

d4 is an experiment in using React to produce data-driven documents (ala d3) that are performant and understandable. This is not a library, but rather a demonstration that it's possible (and preferable) to use React instead of the core of d3. d3 can produce fantastic results. Look no further than Mike Bostock's blocks for examples. Unfortunately, I always find d3 code surprisingly difficult to understand and extend, in the same way I used to find code difficult to approach before React encouraged a declarative style. By using React (which can render SVGs, no problem) for data-driven documents, we can improve comprehension and performance and use tools from the React ecosystem.

reaviz - ๐Ÿ“Š Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.


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.

react-simple-maps - An svg map component built with and for React

  •    Javascript

An svg map component built with and for React. It allows the creation of pure react svg maps. React-simple-maps aims to make working with svg maps in react easier. It handles tasks such as panning, zooming and simple rendering optimization, and takes advantage of parts of d3-geo and topojson-client instead of relying on the entire d3 library.

react-trend - ๐Ÿ“ˆ Simple, elegant spark lines

  •    Javascript

These are very simple and elegant visualizations, and they should not require a bloated graphing library to produce. React Trend is a concrete component that does 1 thing, and does it well: generate these trending graphs.

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.

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.

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.

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.

model - A functional reactive model library for interactive data visualization.

  •    Javascript

A functional reactive model library - Model.js manages the execution flow of the data flow graphs you define. Kind of like Backbone and React, but simpler and designed specifically for making D3 easier to use. Also check out Chiasm, a visualization runtime engine built on Model.js. Installable via Bower: bower install model.

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).

neo4jd3 - Neo4j graph visualization using D3.js

  •    Javascript

Neo4j graph visualization using D3.js. First of all, make sure you have ruby and sass gem installed. Then, clone the repository, install all dependencies, build and serve the project.

victory - A collection of composable React components for building interactive data visualizations

  •    Javascript

Projects using Victory should also depend on React and prop-types.The victory repo aggregates stable victory components that are developed in other repos. The victory repo is only updated with new releases, but the following repos are under very active development.

react-d3 - Modular React charts made with d3.js

  •    Javascript

The actively maintained fork of this project is now at the Github of react-d3 co-creator yang-wei, who has recently taken the lead in maintaining the project and moving toward 1.0. Yang Wei's fork is located here.

plotly.js - The open source JavaScript graphing library that powers plotly

  •    Javascript

Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.