{"id":42,"date":"2026-04-22T00:58:23","date_gmt":"2026-04-21T22:58:23","guid":{"rendered":"https:\/\/student062.akademiata.edu.pl\/?page_id=42"},"modified":"2026-04-22T01:55:53","modified_gmt":"2026-04-21T23:55:53","slug":"wykresy","status":"publish","type":"page","link":"https:\/\/student062.akademiata.edu.pl\/index.php\/wykresy\/","title":{"rendered":"Wykresy"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div id=\"ppsi-root-charts\" style=\"font-family:'Segoe UI',system-ui,sans-serif;color:#1a1a2e;background:#f8f9ff;line-height:1.7;width:100%;max-width:100%;box-sizing:border-box;\">\n\n<header style=\"background:linear-gradient(135deg,#0f3460 0%,#16213e 50%,#0f3460 100%);color:white;padding:0;position:relative;overflow:hidden;\">\n  <div style=\"position:relative;z-index:1;padding:60px 40px 50px;text-align:center;\">\n    <div style=\"margin:0 auto 16px;font-size:36px;width:70px;height:70px;border-radius:16px;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;\">\ud83d\udcc8<\/div>\n    <h1 style=\"font-size:clamp(26px,4vw,48px);font-weight:800;letter-spacing:-1px;margin-bottom:12px;background:linear-gradient(90deg,#e94560,#f5a623,#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\">Wizualizacja Danych w Sieci<\/h1>\n    <p style=\"font-size:17px;color:rgba(255,255,255,0.75);max-width:600px;margin:0 auto 24px;\">Prezentacja informacji za pomoc\u0105 czystego HTML, CSS i JavaScript<\/p>\n  <\/div>\n<\/header>\n\n<style>\n.chart-bar:hover { filter: brightness(1.1); transform: scaleY(1.02); }\n.donut-segment:hover { opacity: 0.8; cursor: pointer; }\n.tooltip { position:absolute; background:#0f3460; color:white; padding:6px 12px; border-radius:6px; font-size:12px; pointer-events:none; opacity:0; transition:opacity 0.2s; z-index:10; white-space:nowrap; }\n<\/style>\n\n<main style=\"max-width:1200px;margin:0 auto;padding:40px 20px;\">\n\n  <section style=\"background:white;border-radius:16px;padding:36px;margin-bottom:32px;box-shadow:0 2px 16px rgba(15,52,96,0.08);border:1px solid rgba(15,52,96,0.07);\">\n    <h2 style=\"font-size:22px;font-weight:700;color:#0f3460;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #f0f2f8;display:flex;align-items:center;gap:10px;\">\n      <span style=\"width:32px;height:32px;background:linear-gradient(135deg,#e94560,#f5a623);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;\">\ud83d\udcca<\/span>\n      Popularno\u015b\u0107 Framework\u00f3w (Wykres s\u0142upkowy)\n    <\/h2>\n    <p style=\"color:#4a5568;margin-bottom:24px;\">Zbudowany przy u\u017cyciu Flexboxa i animowany za pomoc\u0105 prostego skryptu JS.<\/p>\n    \n    <div id=\"bar-chart-container\" style=\"display:flex;flex-direction:column;gap:12px;\">\n      <\/div>\n    <button onclick=\"animateBars()\" style=\"margin-top:20px;padding:10px 20px;background:#0f3460;color:white;border:none;border-radius:8px;cursor:pointer;font-weight:600;\">Odtw\u00f3rz animacj\u0119<\/button>\n  <\/section>\n\n  <section style=\"background:white;border-radius:16px;padding:36px;margin-bottom:32px;box-shadow:0 2px 16px rgba(15,52,96,0.08);border:1px solid rgba(15,52,96,0.07);\">\n    <h2 style=\"font-size:22px;font-weight:700;color:#0f3460;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #f0f2f8;display:flex;align-items:center;gap:10px;\">\n      <span style=\"width:32px;height:32px;background:linear-gradient(135deg,#e94560,#f5a623);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;\">\ud83c\udf69<\/span>\n      Udzia\u0142 Przegl\u0105darek (Wykres pier\u015bcieniowy)\n    <\/h2>\n    \n    <div style=\"display:flex;flex-wrap:wrap;align-items:center;gap:40px;justify-content:center;\">\n      <div style=\"position:relative;width:250px;height:250px;\">\n        <div id=\"donut-chart\" style=\"width:100%;height:100%;border-radius:50%;background:conic-gradient(#e94560 0% 65%, #f5a623 65% 85%, #00d2ff 85% 95%, #dde3f5 95% 100%);box-shadow:0 8px 24px rgba(15,52,96,0.15);\"><\/div>\n        <div style=\"position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:inset 0 4px 10px rgba(0,0,0,0.05);\">\n            <span style=\"font-size:24px;font-weight:800;color:#0f3460;\">2026<\/span>\n            <span style=\"font-size:12px;color:#8892b0;\">Rynek Web<\/span>\n        <\/div>\n      <\/div>\n      \n      <div style=\"display:flex;flex-direction:column;gap:12px;min-width:200px;\">\n        <div style=\"display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#f8f9ff;border-radius:8px;\"><div style=\"display:flex;align-items:center;gap:10px;\"><span style=\"width:14px;height:14px;border-radius:4px;background:#e94560;\"><\/span><strong>Chrome<\/strong><\/div><span>65%<\/span><\/div>\n        <div style=\"display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#f8f9ff;border-radius:8px;\"><div style=\"display:flex;align-items:center;gap:10px;\"><span style=\"width:14px;height:14px;border-radius:4px;background:#f5a623;\"><\/span><strong>Safari<\/strong><\/div><span>20%<\/span><\/div>\n        <div style=\"display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#f8f9ff;border-radius:8px;\"><div style=\"display:flex;align-items:center;gap:10px;\"><span style=\"width:14px;height:14px;border-radius:4px;background:#00d2ff;\"><\/span><strong>Edge<\/strong><\/div><span>10%<\/span><\/div>\n        <div style=\"display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#f8f9ff;border-radius:8px;\"><div style=\"display:flex;align-items:center;gap:10px;\"><span style=\"width:14px;height:14px;border-radius:4px;background:#dde3f5;\"><\/span><span style=\"color:#8892b0\">Inne<\/span><\/div><span style=\"color:#8892b0\">5%<\/span><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section style=\"background:white;border-radius:16px;padding:36px;margin-bottom:32px;box-shadow:0 2px 16px rgba(15,52,96,0.08);border:1px solid rgba(15,52,96,0.07);\">\n    <h2 style=\"font-size:22px;font-weight:700;color:#0f3460;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #f0f2f8;display:flex;align-items:center;gap:10px;\">\n      <span style=\"width:32px;height:32px;background:linear-gradient(135deg,#e94560,#f5a623);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;\">\ud83d\udd0b<\/span>\n      Wykresy Paskowe (Skillset)\n    <\/h2>\n    <div id=\"skills-container\" style=\"display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px;\">\n      <\/div>\n  <\/section>\n<\/main>\n\n<footer style=\"background:linear-gradient(135deg,#0f3460,#16213e);color:white;padding:30px 40px;margin-top:20px;text-align:center;\">\n  <p style=\"font-size:13px;color:rgba(255,255,255,0.4);margin:0;\">\u00a9 2026 Podstawy Programowania Stron Internetowych &#8211; Wykresy<\/p>\n<\/footer>\n<div id=\"chart-tooltip\" class=\"tooltip\"><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc8 Wizualizacja Danych w Sieci Prezentacja informacji za pomoc\u0105 czystego HTML, CSS i JavaScript \ud83d\udcca Popularno\u015b\u0107 Framework\u00f3w (Wykres s\u0142upkowy) Zbudowany przy u\u017cyciu Flexboxa i animowany za pomoc\u0105 prostego skryptu JS. Odtw\u00f3rz animacj\u0119 \ud83c\udf69 Udzia\u0142 Przegl\u0105darek (Wykres pier\u015bcieniowy) 2026 Rynek Web Chrome 65% Safari 20% Edge 10% Inne 5% \ud83d\udd0b Wykresy Paskowe (Skillset) \u00a9 2026 Podstawy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":2,"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/student062.akademiata.edu.pl\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}