MaxBotta

@MaxBotta·2 public vizzes

fresh block

This example demonstrates a minimal line graph that initially displays a placeholder text message and switches to the word “Update” when a button is clicked. Built with D3 v4 and SVG, the visualization uses a custom JavaScript class, `LineGraph`, to manage the graph’s creation and update states. The code appends an SVG element to a container div and uses d3 selection methods like `d3.select` and `attr` to style text elements. Despite referencing a `data` array, the graph does not currently render any actual data points, focusing instead on the interaction pattern between the button and the chart’s update method.

Jul 10, 2018

Loading thumbnail…

D3 Bar Chart

This interactive D3 v4 bar chart displays two datasets of numbers as vertical steel-blue bars with value labels and a y-axis. Clicking the Update button toggles between a 10-element ascending dataset and an 8-element descending one, demonstrating the enter, update, and exit pattern. The code uses d3.scaleLinear for the y-scale, d3.axisLeft for the axis, and transition().duration(500) to smoothly animate bar heights, positions, widths, and labels when the data changes. SVG rendering handles all visual elements.

Jul 10, 2018