Skip to main content
SimilarExport ZIP
100%

dex.js : Clustered Force

✓ Published0🌍 Public
PPatMartin
Last edited Aug 13, 2017
Created on Aug 13, 2017

A clustered force-directed layout shows 2015 baseball salaries by team and position from a CSV file. Using the dex.js library, this visualization places each player as a node, grouping them by team while position serves as a secondary clustering attribute. The chart is interactive, with a legend that highlights nodes on mouseover, and users can adjust the visualization through a configuration pane built with dex.ui.ConfigurationPane. This example effectively combines data filters with GUI controls for exploring the salary dataset.

AI-generated description

Baseball Be Very Very Good To Me

This is a look at 2015 baseball salaries by team and position.

This also demonstrates the effective combination of data filters and GUI controls on exploring a dataset which isn't so large that the browser chokes on it.

References

mit Licensed

Similar vizzes

Loading thumbnail…

dex.js : Clustered Force

This example uses dex.js and D3.js to display crime statistics as an interactive clustered force layout. The visualization groups nodes by crime type, using two custom forces—cluster and collide—to pull similar colors together while preventing overlapping. Data comes from crime2000.csv, interacting with forceSimulation to animate node positions. A separate legend highlights nodes on hover, while a configuration pane allows real-time adjustment of chart and legend settings.

PPatMartin
81% match
Loading thumbnail…

dex.js : Clustered Force

The dex.js Sunburst visualization organizes U.S. presidential data by party and home state, using a radial hierarchical layout with colored arcs and labels. It loads `presidents.csv` via `d3.csv`, then processes the data with a `dex.csv` object and renders the chart through `dex.charts.d3.Sunburst`. The example includes an interactive configuration pane, built with `dex.ui.ConfigurationPane`, for adjusting chart settings. D3.js powers the underlying rendering, while jQuery UI and Bootstrap handle the page layout and styling. The visualization focuses on displaying categorical relationships, with label placement and dynamic sizing noted as areas for future improvement.

PPatMartin
79% match
Loading thumbnail…

dex.js : ECharts Line Chart

This interactive 3D visualization renders a line chart using the ECharts-GL library, displaying synthetic sales and revenue data generated with the Faker library. The chart plots five employees' monthly performance across x, y, and z axes within a browser via dex.js, which integrates the ECharts-GL engine and jQuery UI for configuration. Users can filter data and adjust appearance options, including chart type, colormap, and axis styling, through a configuration pane built with dex.js components.

PPatMartin
74% match
Loading thumbnail…

Clustered Interactive Force Layout v4

This clustered force layout visualizes college major data from FiveThirtyEight, with circle size representing student enrollment and color grouping majors by category. Built with d3.v4, it uses `d3.forceSimulation` with custom clustering and collision forces, plus `d3.drag` for interactive repositioning. SVG circles display tooltips on hover showing the major name and category.

AAjayyy
69% match
Loading thumbnail…

Baseball Scatterplot Matrix II

This example shows a scatterplot matrix of 1986 baseball statistics, plotting pairs of traits like hits, home runs, and RBIs to reveal correlations. A slider controls the fill opacity of the SVG circles, allowing users to adjust point visibility. Built with D3 v4, it uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleCategory20` for color encoding by position. Data comes from the R package Visualizing Categorical Data.

深深度碎片
68% match
Loading thumbnail…

clustered force layout, static data

A clustered force layout visualizes static graph data, grouping nodes into ten distinct clusters by color. The visualization shows how similar nodes are drawn together, with circle size representing each node's radius value. Using D3.js v4, the implementation applies `d3.forceSimulation` with custom clustering and collision forces, and renders via SVG. The underlying graph data comes from a static JSON file that specifies each node's cluster assignment and radius.

TThanaporn-sk
68% match
Loading thumbnail…

Baseball Scatterplot

Baseball Scatterplot visualizes 1986 baseball player statistics from the Baseball.csv dataset, using D3.js v4 to render an SVG scatterplot. Each player is a circle positioned by at-bats (x-axis) and runs (y-axis), with the circle's radius scaled to home runs using `d3.scaleSqrt`. A categorical color scale encodes the player's team. The chart includes axis tick marks and a legend; hovering over a team in the legend fades out all other circles, highlighting only that team's players. Player names appear on hover.

AAndresAnayaIsaza
68% match
Loading thumbnail…

Baseball Scatterplot

Baseball Scatterplot visualizes 1986 baseball player statistics from the Baseball.csv dataset, using D3.js v4 to render an SVG scatterplot. Each player is a circle positioned by at-bats (x-axis) and runs (y-axis), with the circle's radius scaled to home runs using `d3.scaleSqrt`. A categorical color scale encodes the player's team. The chart includes axis tick marks and a legend; hovering over a team in the legend fades out all other circles, highlighting only that team's players. Player names appear on hover.

AAndresAnayaIsaza
68% match