JS Data Viz Lessons

<script src="https://d3js.org/d3.v7.min.js"></script>
// or: npm install d3

// Linear: continuous numeric input → output
const xScale = d3.scaleLinear()
  .domain([0, 100])    // input range (data)
  .range([0, 500]);    // output range (pixels)

xScale(50);  // → 250px

// Band: discrete categories → widths
const xBand = d3.scaleBand()
  .domain(['A', 'B', 'C', 'D'])
  .range([0, 400])
  .padding(0.2);

xBand('B');        // → x position
xBand.bandwidth(); // → bar width

// Time: date input
const timeScale = d3.scaleTime()
  .domain([new Date('2024-01-01'), new Date('2024-12-31')])
  .range([0, 800]);

// Color scales
const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([0, 100]);
colorScale(50); // → 'rgb(...)' color

const data = [
  { month: 'Jan', value: 120 },
  { month: 'Feb', value: 150 },
  { month: 'Mar', value: 90  },
  { month: 'Apr', value: 200 }
];

const margin = { top: 20, right: 20, bottom: 40, left: 60 };
const width  = 600 - margin.left - margin.right;
const height = 400 - margin.top  - margin.bottom;

// Create SVG
const svg = d3.select('#chart')
  .append('svg')
    .attr('width',  width  + margin.left + margin.right)
    .attr('height', height + margin.top  + margin.bottom)
  .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

// Scales
const x = d3.scaleBand()
  .domain(data.map(d => d.month))
  .range([0, width]).padding(0.3);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .nice()
  .range([height, 0]);

// Axes
svg.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(x));
svg.append('g').call(d3.axisLeft(y));

// Bars
svg.selectAll('.bar')
  .data(data)
  .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', d => x(d.month))
    .attr('y', d => y(d.value))
    .attr('width', x.bandwidth())
    .attr('height', d => height - y(d.value))
    .attr('fill', 'steelblue')
    .on('mouseover', function(event, d) {
      d3.select(this).attr('fill', 'orange');
      tooltip.style('opacity', 1).html(`${d.month}: ${d.value}`);
    });

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
// or: npm install chart.js

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Mon','Tue','Wed','Thu','Fri'],
    datasets: [{
      label: 'Visitors',
      data: [100, 150, 120, 200, 180],
      tension: 0.4,       // curve smoothing
      fill: true,
      backgroundColor: 'rgba(75,192,192,0.2)',
      borderColor: 'rgba(75,192,192,1)'
    }]
  }
});

// Add new data point
chart.data.labels.push('Jul');
chart.data.datasets[0].data.push(105);
chart.update();  // re-renders

// Remove first item
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
chart.update('active');  // animate

<script src="https://unpkg.com/three@latest/build/three.module.js"></script>
// or: npm install three

new THREE.BoxGeometry(1, 1, 1);
new THREE.SphereGeometry(0.5, 32, 32);
new THREE.CylinderGeometry(0.5, 0.5, 2, 32);
new THREE.PlaneGeometry(10, 10);
new THREE.TorusKnotGeometry(0.4, 0.15, 100, 16);
new THREE.ConeGeometry(0.5, 1, 32);

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta(); // seconds since last frame
  const elapsed = clock.getElapsedTime();

  // Rotate the cube
  cube.rotation.x += delta * 0.5;
  cube.rotation.y += delta * 1.0;

  // Oscillate (bob up and down)
  sphere.position.y = Math.sin(elapsed * 2) * 0.5;

  renderer.render(scene, camera);
}

<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>

const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene  = new BABYLON.Scene(engine);

// Camera
const camera = new BABYLON.ArcRotateCamera('cam', -Math.PI/2, Math.PI/4, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// Light
new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);

// Mesh
const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);

// Render loop
engine.runRenderLoop(() => scene.render());

// PBRMaterial (physically based)
const mat = new BABYLON.PBRMaterial('metal', scene);
mat.albedoColor     = new BABYLON.Color3(0.8, 0.8, 0.8);
mat.metallic        = 1.0;
mat.roughness       = 0.2;
mat.reflectionTexture = new BABYLON.CubeTexture('env.env', scene);

// Standard Material
const stdMat = new BABYLON.StandardMaterial('std', scene);
stdMat.diffuseColor  = BABYLON.Color3.Red();
stdMat.specularColor = BABYLON.Color3.White();

// Apply
box.material = mat;

Plotly.newPlot('div-id', [{
  x: ['Jan', 'Feb', 'Mar', 'Apr'],
  y: [10, 15, 13, 20],
  type: 'scatter',
  mode: 'lines+markers',
  name: 'Revenue'
}], {
  title: 'Monthly Revenue',
  xaxis: { title: 'Month' },
  yaxis: { title: 'Amount ($K)' }
});

Plotly.newPlot('chart', [
  { x: [1,2,3], y: [4,5,6], xaxis:'x1', yaxis:'y1' },
  { x: [1,2,3], y: [2,4,8], xaxis:'x2', yaxis:'y2' }
], {
  grid: { rows: 1, columns: 2, pattern: 'independent' }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

function mousePressed() {
  fill(random(255), random(255), random(255));
  circle(mouseX, mouseY, random(20, 80));
}

function keyPressed() {
  if (key === 'c') background(0);  // clear
  if (key === 's') saveCanvas('mySketch', 'png');
  if (keyCode === SPACE) isPlaying = !isPlaying;
}

function mouseDragged() {
  stroke(255, 0, 100);
  line(mouseX, mouseY, pmouseX, pmouseY);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

const chart = echarts.init(document.getElementById('main'));

chart.setOption({
  title:  { text: 'Monthly Sales' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['2023', '2024'] },
  xAxis:  { type: 'category', data: ['Jan','Feb','Mar','Apr','May'] },
  yAxis:  { type: 'value' },
  series: [
    { name: '2023', type: 'bar', data: [120,132,101,134,90] },
    { name: '2024', type: 'bar', data: [150,160,115,165,110] }
  ]
});

chart.on('click', (params) => {
  console.log('Series:', params.seriesName);
  console.log('Data:', params.name, params.value);
});

chart.on('mouseover', 'series.bar', (params) => {
  console.log('Hovering bar:', params.value);
});

chart.getZr().on('click', (event) => {
  // Click on canvas background
  const [x, y] = chart.convertFromPixel('grid', [event.offsetX, event.offsetY]);
  console.log('Grid position:', x, y);
});

<script src="fusioncharts.js"></script>

FusionCharts.ready(function() {
  new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '600', height: '400',
    dataFormat: 'json',
    dataSource: {
      chart: {
        caption: 'Monthly Sales',
        xAxisName: 'Month',
        yAxisName: 'Revenue ($)',
        theme: 'fusion'
      },
      data: [
        { label: 'Jan', value: 120 },
        { label: 'Feb', value: 150 },
        { label: 'Mar', value: 130 }
      ]
    }
  }).render();
});

fusionCharts.addEventListener('dataplotClick', (e, args) => {
  console.log('Clicked:', args.categoryLabel, args.dataValue);
});

fusionCharts.addEventListener('chartClick', (e) => {
  console.log('Chart area clicked');
});

// FusionCharts.addEventListener (global, all charts)
FusionCharts.addEventListener('rendered', (e, args) => {
  console.log('Chart', args.id, 'rendered');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

const paper = Raphael('canvas-div', 800, 600);

const set = paper.set();
set.push(
  paper.circle(100, 100, 30),
  paper.text(100, 150, 'Node 1')
);
set.attr({ fill: '#ff6384' });  // applies to all
set.animate({ transform: 't100,0' }, 500);  // move all
set.remove();

<script src="https://cdn.jsdelivr.net/npm/rgraph/libraries/RGraph.common.core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rgraph/libraries/RGraph.bar.js"></script>

<canvas id="cvs" width="600" height="400"></canvas>

RGraph.on(bar, 'click', (e, shape) => {
  console.log('Bar clicked:', shape.index, 'value:', shape.yval);
});

RGraph.on(bar, 'mousemove', (e, shape) => {
  bar.canvas.style.cursor = shape ? 'pointer' : 'default';
});