Kraft Curve with Rescale and Overlay v2 and Metrics and Orgs
This interactive line chart visualizes Kraft curves, plotting insulin and glucose levels over time for selected patients within an organization. Built with D3 v7, it renders two monotone curves as SVG paths, using a black background and distinct colors for each analyte. A dropdown menu rescales the insulin axis, while buttons add or remove a red area overlay beneath the curve. Data is loaded from a CSV and filtered dynamically based on patient and organization selections, with axes and labels updated accordingly.
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
Comments
Sign in to join the discussion.