Search Results for "d3"

D3.js (or D3 for Data-Driven Documents) is a JavaScript library that allows you to produce dynamic, interactive data visualizations in web browsers. With D3 you can bring data to life using SVG, Canvas and HTML. Powerful visualization and interaction techniques plus a data-driven approach to DOM manipulation means D3.js gives you greater design freedom and control over the final result.

Plotly JavaScript Open Source Graphing Library. Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. plotly.js is free and open source and you can view the source, report issues or contribute on GitHub. For plotly.js to build with Webpack you will need to install ify-loader@v1.1.0+ and add it to your webpack.config.json. This adds Browserify transform...

visx a collection of expressive, low-level visualization primitives for React. At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React. visx is split into multiple packages. Start small and use only what you need. Bring your own state management, animation library, or CSS-in-JS solution. Odds are good your React app already has an opinion on how animation, theming...

Observable Plot is a free, open-source JavaScript library to help you quickly visualize tabular data. It has a concise and (hopefully) memorable API to foster fluency — and plenty of examples to learn from and copy-paste. In the spirit of show don’t tell, below is a scatterplot of the height and weight of Olympic athletes (sourced from Matt Riggott), constructed using a dot mark. We assign columns of data (such as weight) to visual properties (such as the dot’s x), and Plot infers the rest....

Real-time visualization of the Greenhouse Gas (in terms of CO2 equivalent) footprint of electricity consumption built with d3.js and mapbox GL. Real-time data is defined as a data source with an hourly (or better) frequency, delayed by less than 2hrs. It should provide a breakdown by generation type. Often fossil fuel generation (coal/gas/oil) is combined under a single heading like 'thermal' or 'conventional', this is not a problem. Citizens should not be responsible for the emissions...

Textures.js is a JavaScript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization. Import textures.js from NPM. You can also use textures.js in your HTML page with a <script> tag by downloading textures.js to a local folder or by using the Unpkg CDN network. Textures.js can be used alongside d3.

Semiotic is a data visualization framework combining React & D3. It provides three types of frames XYFrame, OrdinalFrame, NetworkFrame, to deploy a wide variety of charts. XY data i.e. line charts and scatterplots. Categorical data i.e. bar charts, violin plots, parallel coordinates. Topological and network data i.e. flow diagrams, network visualization, and hierarchical views. A guide for creating a line chart, timeseries, difference line, and line percents using XYFrame along with hover...

Clustergrammer is a visualization library built using D3.js that enables intuitive interaction with high-dimensional data. Clustergrammer was built with biological data in mind. Clustergrammer is a web-based tool for visualizing high-dimensional data (e.g. a matrix) as an interactive and shareable hierarchically clustered heatmap. Clustergrammer's front end (Clustergrammer-JS) is built using D3.js and its back-end (Clustergrammer-PY) is built using Python. Clustergrammer produces highly...

Britecharts is a client-side reusable Charting Library based on D3.js v5 that offers easy and intuitive use of charts and components that can be composed together to create amazing visualizations. Britecharts components have been written in ES2016 with a Test Driven methodology, so they are fully tested, and we are committed to keeping them that way. The typical use of Britecharts involves creating a chart using its simple API, then rendering it on a container that has previously had data...

Flame graphs are a visualization of profiled software, allowing the most frequent code-paths to be identified quickly and accurately. They can be generated using my open source programs, which create interactive SVGs. See the Updates section for other implementations. Recently I've been helping with d3-flame-graph. The x-axis shows the stack profile population, sorted alphabetically (it is not the passage of time), and the y-axis shows stack depth, counting from zero at the bottom. Each...