# Visualization tools

**URL:** <https://discourse.processing.org/t/visualization-tools/43485>\
**Category:** Libraries\
**Created:** [December 16, 2023, 8:38am UTC](https://discourse.processing.org/t/visualization-tools/43485 "2023-12-16T08:38:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kmll](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@kmll](https://discourse.processing.org/u/kmll)\
**Post date:** [December 16, 2023, 8:38am UTC](https://discourse.processing.org/t/visualization-tools/43485/1 "2023-12-16T08:38:08Z")

</div>

I am looking for some good libraries to use for data visualization. Any suggestion where I should start?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [December 16, 2023, 11:32am UTC](https://discourse.processing.org/t/visualization-tools/43485/2 "2023-12-16T11:32:50Z")

</div>

Hi @kmll,

It depends a bit what kind of data you want to visualize.  
What are your plans ?

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![JiyaHana](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jiyahana/32/19209_2.png) [@JiyaHana](https://discourse.processing.org/u/JiyaHana)\
**Post date:** [December 18, 2023, 7:31am UTC](https://discourse.processing.org/t/visualization-tools/43485/3 "2023-12-18T07:31:49Z")

</div>

Yes @mnse is right for data visualization you can use several powerful and versatile libraries according to your need. If you are using Java then java library is **JFreeChart** , for javascript is **D3.js** and like this so many available.  
So, which technology you are searching for.

---

<div class="post-metadata">

**Author:** ![kmll](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@kmll](https://discourse.processing.org/u/kmll)\
**Post date:** [December 18, 2023, 7:46am UTC](https://discourse.processing.org/t/visualization-tools/43485/4 "2023-12-18T07:46:23Z")

</div>

Thanks for the advise. In this particular case I have a file containing values like this:  
1 64  
1 32  
2 34  
1 78  
2 43  
3 12  
1 78  
2 23  
3 44  
3 15  
I then want to display a line chart containing three lines where the first line contains all the values where the first column is 1 and the second line for all values where the first column is 2 etc.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 18, 2023, 8:49am UTC](https://discourse.processing.org/t/visualization-tools/43485/5 "2023-12-18T08:49:00Z")

</div>

> [@kmll](#):
>
> the first line contains all the values where  
> the first column is 1

How does the 1st line contain those values?  
Like on top of each other in the same line?

---

<div class="post-metadata">

**Author:** ![kmll](https://avatars.discourse-cdn.com/v4/letter/k/f4b2a3/32.png) [@kmll](https://discourse.processing.org/u/kmll)\
**Post date:** [December 18, 2023, 9:04am UTC](https://discourse.processing.org/t/visualization-tools/43485/6 "2023-12-18T09:04:21Z")

</div>

For the rows containing 1 as an id I would like to display a graph like this:

![ScreenHunter 2770](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/9/59b8a75f218d4627a6174d208a5028dc778fa10d.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 18, 2023, 4:36pm UTC](https://discourse.processing.org/t/visualization-tools/43485/7 "2023-12-18T16:36:17Z")

</div>

JavaFX has a line chart capability:

```auto
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.scene.control.*;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;

Pane pane;

Pane addControls() {
  pane = new Pane();
  // ****Line Chart**** //
  NumberAxis xAxis = new NumberAxis();
  xAxis.setLabel("Observation");
  NumberAxis yAxis = new NumberAxis();
  yAxis.setLabel("Value");
  LineChart lineChart = new LineChart(xAxis, yAxis);
  XYChart.Series Series1 = new XYChart.Series();
  XYChart.Series Series2 = new XYChart.Series();
  XYChart.Series Series3 = new XYChart.Series();
  Series1.setName("Series 1");
  Series2.setName("Series 2");
  Series3.setName("Series 3");
  Series1.getData().add(new XYChart.Data(1, 64));
  Series1.getData().add(new XYChart.Data(2, 32));
  Series1.getData().add(new XYChart.Data(3, 78));
  Series1.getData().add(new XYChart.Data(4, 78));
  Series2.getData().add(new XYChart.Data(1, 34));
  Series2.getData().add(new XYChart.Data(2, 43));
  Series2.getData().add(new XYChart.Data(3, 23));
  Series3.getData().add(new XYChart.Data(1, 12));
  Series3.getData().add(new XYChart.Data(2, 44));
  Series3.getData().add(new XYChart.Data(3, 15));
  lineChart.getData().add(Series1);
  lineChart.getData().add(Series2);
  lineChart.getData().add(Series3);
  lineChart.setTitle("My Special Data");
  lineChart.setLayoutX(80);
  lineChart.setLayoutY(50);
  lineChart.setMaxSize(420, 340);
  pane.getChildren().add(lineChart);

  return pane;
}

void setup() {
  size(1, 1, FX2D);
  Stage stage = new Stage();
  stage.setTitle("JavaFX Controls");
  pane = addControls();
  Scene scene = new Scene(pane, 600, 450);
  stage.setScene(scene);
  stage.show();
}

void draw() {
}

```

 ![chart](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/9/79d0f57069369d16d25956d146770df0b7c9bf3f.png)