JSFiddle - React, Tailwind, and code Playground

by ischenkodv

HTML

<ul>
    <li>One</li>
    <li>One</li>
</ul>

JavaScript

// We need d3.select('ul') to specify parent node for enter() function.
// When we will process datum to be inserted the parent node will be used
// to append elements.
d3.select('ul')
    // Select already existing list elements.
    .selectAll("li")
    // Specify data for processing.
    .data([4, 7, 8, 12, 18])
    // Set style for already existing elements.
    .style("font-size", function(d) { return d + "px"; })
    // Extract new data - those that does not have corresponding elements on the page.
    .enter()
        // Use new datum (entry in the data) to append new elements with the text One and
        // font size equal to the datum.
        .append('li')
        .text('One')
        .style('font-size', function(d) { return d + 'px'; });

var scale = d3.scale.linear()
  .domain([0, 10])
  .range([0,1000]);

console.log(scale(0), scale(1), scale(2));

var color = d3.scale.linear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);
 
console.log(color(-1));   // "#ff0000" red
console.log(color(-0.5)); // "#ff8080" pinkish
console.log(color(0));    // "#ffffff" white
console.log(color(0.5));  // "#80c080" getting greener
console.log(color(0.7));  // "#4da64d" almost there..
console.log(color(1));    // "#008000" totally green!