wi12.unix7.org

<html>

<svg>

  <circle r="10" cx="100" cy="50" fill="teal"></circle>

</svg>

      var circle = d3.select("circle")
      setInterval(() => {
          circle.transition()
              .duration(2000)
              .attr("cx", Math.random() * 300)
              .attr("cy", Math.random() * 150)
              .ease(d3.easeElastic);
      }, 1000)

      let divWidth = document.getElementById('my-chart').clientWidth
      let divHeight = Math.floor(divWidth / 3.2)

      let margin = { top: 20, right: 42, bottom: 30, left: 42 }
      let width = divWidth - margin.left - margin.right
      let height = divHeight - margin.top - margin.bottom

      //let dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]
      //let dataset = [1, 2, 3, 4, 5]

      let data = [
          { label: "n1", value: Math.floor(Math.random() * 180) },
          { label: "n2", value: Math.floor(Math.random() * 180) },
          { label: "n3", value: Math.floor(Math.random() * 180) },
          { label: "n4", value: Math.floor(Math.random() * 180) },
          { label: "n5", value: Math.floor(Math.random() * 180) },
          { label: "n6", value: Math.floor(Math.random() * 180) },
          { label: "n7", value: Math.floor(Math.random() * 180) },
          { label: "n8", value: Math.floor(Math.random() * 180) },
          { label: "n9", value: Math.floor(Math.random() * 180) }
      ]

      let svg = d3
          .select("#my-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 + ")")

      //let xScale = d3
      //            .scaleLinear()
      //                .domain([1, dataset.length + 1])
      //                .range([0, width])

      // https://observablehq.com/@d3/d3-scaleband
      let xScale = d3
              .scaleBand()
                  .domain(data.map((s) => s.label ))
                  .range([0, width])
                  //.padding(2)
                  //.paddingInner(1.2)
                  //.paddingOuter(1.2)
                  //.align(1)

      let yScale = d3
          .scaleLinear()
              .domain([0, 200 /* d3.max(dataset) */])
              .range([height, 0])

      let barPadding = 5
      let barWidth = (width / data.length)

      let xAxis = d3.axisBottom(xScale)

      let yAxis = d3.axisLeft(yScale)
                      .tickSize(-width)
                      .tickFormat(null)

      //svg
        //.append('g')
        //.call(yAxis)

      svg
          .selectAll("barA")
          .data(data)
          .enter()
          .append("rect")
              .attr("y", (d) => {
                  return yScale(d.value)
              })
              .attr("height", (d) => {
                  return height - yScale(d.value)
              })
              .attr("width", barWidth - barPadding * 2)
              .attr("transform", (d, i) => {
                  let translate = [barWidth * i + barPadding, 0]
                  return "translate("+ translate +")"
              })
              .attr("fill", "#007000")
              .on("mouseover",function () {
                  d3.select(this)
                      .transition()
                      .duration(500)
                      .attr("fill", "#ea7a21")
              })
              .on("mouseout",function () {
                  d3.select(this)
                      .transition()
                      .duration(500)
                      .attr("fill", "#ae1a12")
              })
              .transition()
              .duration(5000)
              .attr("fill", "#fe7a42")

      svg
          .selectAll("text")
          .data(data)
          .enter()
              .append("text")
                  .text((d) => {
                      return d.value
                  })
                  .attr("y", (d, i) => {
                      return yScale(d.value)
                  })
                  .attr("x", (d, i) => {
                      return barWidth * i + barPadding
                  })
                  .attr("fill", "#0a0a0a")
                  .attr("dy", "-.25em")
                  .attr("dx", ".25em")

      //svg
        //.append('g')
        //.attr("transform", "translate(0," + height + ")")
        //.call(xAxis)
        //.selectAll("text")
            //.style("text-anchor", "end")
            //.attr("dx", "-.8em")
            //.attr("dy", "-.55em")
            //.attr("transform", "rotate(-48)" )

      svg.append('text')
          .attr('x', 1)
          .attr('y', 1)
          .attr('transform', 'rotate(-90)')
          //.attr('text-anchor', 'middle')
          //.attr('text-anchor', 'end')
          .attr("dy", "-1em")
          .attr("dx", "-5em")
          .text('Level, m')

      svg.append('text')
          .attr('x', 1)
          .attr('y', 1)
          .attr("id", "size")
          .text(divWidth + ' ' + divHeight)

      function resize() {
          divWidth = document.getElementById('my-chart').clientWidth
          divHeight = Math.floor(divWidth / 3.2)
          d3.select('#my-chart svg')
              .attr('width', divWidth)
              .attr('height', divHeight)

          svg.select("#size")
              .text(divWidth + ' ' + divHeight)

      window.onresize = resize

</script>

</html>

wi12.unix7.org

User Tools

Site Tools

Page Tools