meter

by nancynancy

HTML

<html>

<body>
<figure></figure>
</body>
</html>

JavaScript

///////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
// using d3 for convenience
var height = 350;
var width = 700;

var figure = d3.select('figure')
var colorScale = d3.scaleOrdinal().range(["#0078D7", "#008e68", "#FFAA00", "#661A1A", "#DA3900"]);
var colorScaleLight = d3.scaleOrdinal().range(["#8bc1ec", "#73c1ac", "#ffd88b", "#c7abab", "#f1b7a2"]);
var parseTime = d3.timeParse("%m/%d/%Y");
var parseDateKey = d3.timeParse("%Y%m%d")
var parseValues = d3.format(".0s")

var margin = {
    top: 30,
    bottom: 30,
    left: 60,
    right: 30
}

var x = d3.scaleLinear().range([0, width / 2])
var y = d3.scaleLinear()
var yHeight = d3.scaleLinear()

y.domain([0, 500]).range([height - 100, 0]);
yHeight.domain([0, 500]).range([0, height - 100])
x.domain([0, 5])

var xAxis = d3.axisBottom(x).ticks(5);
var yAxis = d3.axisLeft(y);

var myColors = d3.scaleOrdinal(["red", "orange", "yellow", "green", "blue", "purple"]);

var colorScale = d3.scaleLinear()
    .domain([0, 500])
    .range(["blue", "red"])
    .interpolate(d3.interpolateLab);

var g = d3.select('#figure')
    .append("svg")
    .attr("height", height)
    .attr("width", width)
    .append("g")

g.append("rect")
    .attr("height", height)
    .attr("width", width)
    .attr("fill", "pink")

g.append("g")
    .call(yAxis)
    .attr("class", "yaxis axis")
    .attr("id", "axes")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)

var makeGraph = function (content) {

    r = 50;
    thiccc = 40;
    var data = [
        [50, 100, 150, 200, 300, 500]
    ]

    console.log(d3.entries(data))

    var data = [
        { category: "A", y: 50, height: 50 },
        { category: "B", y: 100, height: 50 },
        { category: "C", y: 150, height: 50 },
        { category: "D", y: 200, height: 50 },
        { category: "E", y: 300, height: 100 },
        { category: "F", y: 500, height: 200...