Skip to main content
SimilarExport ZIP
100%

line_chart

• Draft2🔗 Unlisted
Ttadisatishreddy2000@gmail.com
Last edited Mar 31, 2025
Created on Mar 31, 2025
Forked from Bar_Plot

This example shows yearly patient counts for multiple hospitals as interactive line charts. Users select hospitals via checkboxes, and the chart updates to display a colored line for each selected hospital, with year on the x-axis and number of patients on the y-axis. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to build the chart. Data is loaded from a CSV file, and checkboxes are generated dynamically from the dataset's hospital names.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

area chart

This area chart displays yearly patient counts for a single hospital selected from a dropdown menu. The visualization uses an SVG rendering with d3.v7, employing `d3.area`, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color. Data is loaded as CSV from a GitHub gist, with the chart updating on dropdown changes by redrawing the area path.

Ttadisatishreddy2000@gmail.com
83% match
Loading thumbnail…

Hospital Data

A line chart visualization displays weekly hospital data, tracking the number of cases over time for multiple cities. Each city is represented by a colored line, with a color legend identifying each series. The chart uses D3 v5's `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smooth paths, and `nest` with `scaleOrdinal` and `schemeCategory10` for grouping and coloring. The data is loaded from a CSV file, and the visualization is rendered as an SVG within a React framework.

Ssushmithakalluri
82% match
Loading thumbnail…

pie chart

This interactive pie chart displays hospital-wise patient distribution for a selected year, with a dropdown menu to switch between years and a color-coded legend identifying each hospital. The visualization loads CSV data via `d3.csv` and uses `d3.pie()` to compute arc angles, `d3.arc()` to generate SVG paths, and `d3.scaleOrdinal(d3.schemeCategory10)` for slice colors. The chart redraws completely on year selection by clearing and re-appending SVG groups and legend items, rendering the final output as static SVG in the browser.

Ttadisatishreddy2000@gmail.com
79% match
Loading thumbnail…

LineChart+ColorLegend

A multi-line chart displays patient biomarker values over time, with each line representing a different marker and a color legend identifying them. The visualization uses D3 v5 within a React application, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeSet1` for colors. Data comes from a CSV file loaded via `d3.csv`, and hovering over a line highlights it while dimming others.

Ppplomith
77% match
Loading thumbnail…

Line chart temp

A line chart displays the trend of total hospitalized patients over time in Sardinia, using a dataset from Data Canvas Sense Your City. The visualization maps dates on a time scale and patient counts on a linear scale, with a smooth curve rendered via d3.line and curveNatural. Data points are marked with circles that have hover tooltips, while custom React components, AxisBottom and AxisLeft, render the axes using d3 scaleTime and d3 scaleLinear. The SVG is styled with Poppins font and subtle gray ticks.

Ssurikmeetr
76% match
Loading thumbnail…

InteractiveYearLineChart

An interactive line chart displays blood calcium values over time for a single patient, with a vertical red line marking a selected year. Users hover over the chart to see a tooltip with the exact date and value, while a brush allows zooming into time ranges. The chart uses d3.scaleTime, d3.line, d3.brush, and d3.bisector on data loaded from a CSV file. SVG rendering and mouse events drive the interactions, with a dashed line and tooltip circle updating dynamically.

Ppplomith
75% match
Loading thumbnail…

Fork of Fork of Fork of Selecting a Year on a Line Chart

A line chart visualizing heart disease rates across age categories, with each line colored by a category and selectable by hovering over the chart. The vertical year line updates as the mouse moves, and the chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleOrdinal, d3.nest, and SVG rendering. Data is loaded from a CSV file, and the chart includes axes, a legend from colorLegend.js, and a title.

Cchandanagandla
75% match
Loading thumbnail…

Bar_Plot

This bar chart displays the total number of patients received by the top ten hospitals in 2024, aggregating yearly data from 2020 through 2024. It uses React with hooks to load and process a CSV file via d3.csv, then renders horizontal bars as SVG rectangles with d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. Hover effects scale the bars, and axis labels show patient counts formatted in millions. Colors come from d3.schemeCategory10.

Ttadisatishreddy2000@gmail.com
74% match