Viewing a saved revision (read-only)
67ea01d6a9b04cdb94adfc39a058a6a9
Kraft Curve August 2022
This visualization plots a Kraft curve, showing insulin and glucose levels over time for a named patient from the Meterbolic organization, with data loaded from raw CSV on GitHub. The chart renders a black-background SVG component with two monotone-smoothed polylines, one green for insulin and one yellow for glucose, alongside labeled axes that use custom styling for dark-mode legibility. The interface includes a rescaling control for the insulin axis, a dropdown to select different individuals, and buttons to toggle a red area overlay beneath the insulin curve. The code is structured entirely with D3 v7 APIs, including `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and uses data filtering and DOM event handlers to manage interactivity.
AI-generated descriptionDynamic Kraft Curve
Forked from: https://gist.github.com/d3noob/090137c451b4f8c05fc3368506bc2182 Clip-path code: https://stackoverflow.com/questions/35997408/d3-hide-overflow-of-the-chart-area-when-y-axis-has-a-min-and-max To graph based on drop-down: https://www.d3-graph-gallery.com/graph/line_select.html Drop-down dependency handling: https://stackoverflow.com/questions/48820361/update-options-in-a-drop-down-menu-based-on-another-drop-down Populate drop-down based on csv: https://stackoverflow.com/questions/24588883/populate-dropdown-list-with-csv-file-d3?rq=1
Things to do
Rescaling https://www.d3-graph-gallery.com/graph/scatter_buttonXlim.html
Brushing https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6 https://www.d3-graph-gallery.com/graph/line_brushZoom.html
Calculating something with imported array of data https://stackoverflow.com/questions/9491885/csv-to-array-in-d3-js https://stackoverflow.com/questions/57353363/how-do-i-find-area-under-the-graph
Figure out transition Add more data and see if chart adjusts Add datapoints but keep curvinlinear. See: https://vizhub.com/dal233/c9d00aab185843a09700bcc1b56ec8b3?edit=files&file=index.html Add numbers above datapoints on line chart (see page 132 of book) Add Kraft Pattern underlay using css style .line, fill option http://www.d3noob.org/2013/01/filling-area-under-graph.html https://bl.ocks.org/d3noob/09d3a1416d4c5c9da6eb1c7e63efff9d
Phase 2 https://bl.ocks.org/LemoNode/a9dc1a454fdc80ff2a738a9990935e9d