[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_124":-5,"_60":16,"_125":-5,"_126":127,"_128":129},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":70,"_103":70,"_44":104,"_105":-7,"_106":51,"_107":49,"_108":-5,"_109":110,"_111":16,"_112":113,"_114":115,"_116":43,"_117":-7,"_67":118,"_69":119,"_120":-5,"_121":66,"_122":123},"vizContent",{"_42":70,"_71":72,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":48,"_53":48,"_54":55,"_56":57,"_58":59,"_60":16,"_61":-7,"_62":41,"_63":64,"_65":66,"_67":68,"_69":68},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":41,"_47":48},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/Finn-Luka/842d14ce033244b7ade218baaac84b2e","author","Finn-Luka","id","f08b901f0243401894c908f15ba656eb","title","NUR BARS","ownerHandle","ownerDisplayName","wdn616@haw-hamburg.de","v3-user-finn-luka","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/247953122?v=4","oauthProvider","github","oauthId","247953122","isAdmin","stripeCustomerId","handle","handleNormalized","finn-luka","lifecycleEmailsEnabled",true,"createdAt",1791664547024,"updatedAt","842d14ce033244b7ade218baaac84b2e","files",{"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86},"24ce5451",{"_87":101,"_89":102},"29fbc049",{"_87":99,"_89":100},"36e1e36a",{"_87":97,"_89":98},"8dbc301e",{"_87":95,"_89":96},"b254b5d6",{"_87":93,"_89":94},"e93304e5",{"_87":91,"_89":92},"fd09e543",{"_87":88,"_89":90},"name","index.jsx","text","import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { App } from './App.jsx';\nconst root = createRoot(document.getElementById('root'));\nroot.render();\n","App.jsx","import React, { useRef, useEffect } from 'react';\nimport { select } from 'd3';\nimport { viz } from './viz.js';\n\nconst data = [\n {\n model: 'Student',\n vorher: 5.99,\n nachher: 6.99,\n },\n {\n model: 'Individual',\n vorher: 10.99,\n nachher: 11.99,\n },\n {\n model: 'Duo',\n vorher: 14.99,\n nachher: 16.99,\n },\n {\n model: 'Family',\n vorher: 17.99,\n nachher: 19.99,\n },\n];\n\nexport const App = () => {\n const svgRef = useRef(null);\n\n useEffect(() => {\n viz(select(svgRef.current), {\n data,\n width: 700,\n height: 380,\n });\n }, []);\n\n return (\n

Spotify Premium Preiserhöhung 2024/2025

\n Vergleich der Abopreise vor und nach der Erhöhung\n

\n \n

\n );\n};\n","styles.css","body {\n margin: 0;\n background-color: #0a0a0a;\n font-family:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n 'Helvetica Neue', Arial, sans-serif;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n padding: 0;\n background-color: #0a0a0a;\n}\n\n.chart-wrapper {\n background-color: #0f0f0f;\n border-radius: 1rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);\n padding: 2rem;\n width: fit-content;\n height: fit-content;\n}\n\nh1 {\n text-align: center;\n color: #1db954;\n margin: 0 0 0.25rem 0;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.subtitle {\n text-align: center;\n color: #a0a0a0;\n margin: 0 0 0.75rem 0;\n font-size: 0.875rem;\n}\n\nsvg {\n display: block;\n margin: 0 auto;\n}\n\n.tooltip {\n position: absolute;\n background-color: #2a2a2a;\n border: 1px solid #444444;\n border-radius: 0.5rem;\n padding: 0.75rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: 1000;\n}\n\n.tooltip.visible {\n opacity: 1;\n}\n\n.tooltip-label {\n font-weight: bold;\n margin-bottom: 0.25rem;\n color: #e0e0e0;\n}\n\n.tooltip-value {\n color: #b0b0b0;\n font-size: 0.875rem;\n}\n","index.html","\n\n \n Spotify Premium Preiserhöhung 2024/2025\n \n \n \n \n

\n \n \n\n","renderBarChart.js","import {\n scaleBand,\n scaleLinear,\n max,\n axisBottom,\n axisLeft,\n} from 'd3';\n\nexport const renderBarChart = (\n selection,\n { data, width, height },\n) => {\n const margin = {\n top: 15,\n right: 30,\n left: 50,\n bottom: 50,\n };\n const chartWidth = width - margin.left - margin.right;\n const chartHeight = height - margin.top - margin.bottom;\n\n // Add SVG background\n selection\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#0f0f0f');\n\n // Create main group\n const g = selection\n .append('g')\n .attr(\n 'transform',\n `translate(${margin.left},${margin.top})`,\n );\n\n // Create scales\n const xScale = scaleBand()\n .domain(data.map((d) => d.model))\n .range([0, chartWidth])\n .padding(0.15);\n\n const maxPrice = max(data, (d) =>\n Math.max(d.vorher, d.nachher),\n );\n const yScale = scaleLinear()\n .domain([0, maxPrice * 1.1])\n .range([chartHeight, 0]);\n\n // Add grid\n g.append('g')\n .attr('class', 'grid')\n .selectAll('line')\n .data(yScale.ticks(5))\n .join('line')\n .attr('x1', 0)\n .attr('x2', chartWidth)\n .attr('y1', (d) => yScale(d))\n .attr('y2', (d) => yScale(d))\n .attr('stroke', '#2a2a2a')\n .attr('stroke-dasharray', '3,3');\n\n // Add X axis\n const xAxis = axisBottom(xScale);\n g.append('g')\n .attr('transform', `translate(0,${chartHeight})`)\n .call(xAxis)\n .selectAll('text')\n .attr('fill', '#a0a0a0')\n .style('font-size', '11px');\n\n g.select('.domain').attr('stroke', '#444444');\n\n g.selectAll('.tick line').attr('stroke', '#444444');\n\n // Add Y axis\n const yAxis = axisLeft(yScale).ticks(5);\n g.append('g')\n .call(yAxis)\n .selectAll('text')\n .attr('fill', '#a0a0a0')\n .style('font-size', '11px');\n\n g.selectAll('.domain').attr('stroke', '#444444');\n\n g.selectAll('.tick line').attr('stroke', '#444444');\n\n // Y axis label\n g.append('text')\n .attr('transform', 'rotate(-90)')\n .attr('y', -38)\n .attr('x', -chartHeight / 2)\n .attr('text-anchor', 'middle')\n .attr('fill', '#a0a0a0')\n .style('font-size', '11px')\n .text('Preis (€)');\n\n // Bar width for grouped bars\n const barWidth = xScale.bandwidth() / 2;\n\n // Create tooltip\n const tooltip = selection\n .append('g')\n .attr('class', 'tooltip-group')\n .style('opacity', 0)\n .style('pointer-events', 'none');\n\n const tooltipRect = tooltip\n .append('rect')\n .attr('fill', '#2a2a2a')\n .attr('stroke', '#444444')\n .attr('rx', 8)\n .attr('ry', 8);\n\n const tooltipText = tooltip\n .append('text')\n .attr('fill', '#e0e0e0')\n .style('font-size', '12px');\n\n // Add \"Preis vorher\" bars\n g.selectAll('.bar-vorher')\n .data(data)\n .join('rect')\n .attr('class', 'bar-vorher')\n .attr('x', (d) => xScale(d.model))\n .attr('y', (d) => yScale(d.vorher))\n .attr('width', barWidth)\n .attr('height', (d) => chartHeight - yScale(d.vorher))\n .attr('fill', '#1db954')\n .attr('rx', 6)\n .attr('ry', 6)\n .style('cursor', 'pointer')\n .on('mouseover', function (event, d) {\n tooltip.style('opacity', 1);\n tooltipText.text(\n `Preis vorher: ${d.vorher.toFixed(2)} €`,\n );\n\n const bbox = tooltipText.node().getBBox();\n tooltipRect\n .attr('x', bbox.x - 8)\n .attr('y', bbox.y - 4)\n .attr('width', bbox.width + 16)\n .attr('height', bbox.height + 8);\n\n tooltip.attr(\n 'transform',\n `translate(${event.offsetX + 10},${event.offsetY - 10})`,\n );\n })\n .on('mousemove', function (event) {\n tooltip.attr(\n 'transform',\n `translate(${event.offsetX + 10},${event.offsetY - 10})`,\n );\n })\n .on('mouseout', function () {\n tooltip.style('opacity', 0);\n });\n\n // Add \"Preis nachher\" bars\n g.selectAll('.bar-nachher')\n .data(data)\n .join('rect')\n .attr('class', 'bar-nachher')\n .attr('x', (d) => xScale(d.model) + barWidth)\n .attr('y', (d) => yScale(d.nachher))\n .attr('width', barWidth)\n .attr('height', (d) => chartHeight - yScale(d.nachher))\n .attr('fill', '#1a6f3c')\n .attr('rx', 6)\n .attr('ry', 6)\n .style('cursor', 'pointer')\n .on('mouseover', function (event, d) {\n tooltip.style('opacity', 1);\n tooltipText.text(\n `Preis nachher: ${d.nachher.toFixed(2)} €`,\n );\n\n const bbox = tooltipText.node().getBBox();\n tooltipRect\n .attr('x', bbox.x - 8)\n .attr('y', bbox.y - 4)\n .attr('width', bbox.width + 16)\n .attr('height', bbox.height + 8);\n\n tooltip.attr(\n 'transform',\n `translate(${event.offsetX + 10},${event.offsetY - 10})`,\n );\n })\n .on('mousemove', function (event) {\n tooltip.attr(\n 'transform',\n `translate(${event.offsetX + 10},${event.offsetY - 10})`,\n );\n })\n .on('mouseout', function () {\n tooltip.style('opacity', 0);\n });\n\n // Add legend\n const legend = g\n .append('g')\n .attr('transform', `translate(${chartWidth - 160},0)`);\n\n const legendData = [\n { label: 'Preis vorher', color: '#1db954' },\n { label: 'Preis nachher', color: '#1a6f3c' },\n ];\n\n legendData.forEach((item, i) => {\n const legendRow = legend\n .append('g')\n .attr('transform', `translate(0,${i * 20})`);\n\n legendRow\n .append('rect')\n .attr('width', 14)\n .attr('height', 14)\n .attr('fill', item.color)\n .attr('rx', 2);\n\n legendRow\n .append('text')\n .attr('x', 20)\n .attr('y', 11)\n .attr('fill', '#a0a0a0')\n .style('font-size', '11px')\n .text(item.label);\n });\n};\n","README.md","","viz.js","import { renderBarChart } from './renderBarChart.js';\n\nexport const viz = (svg, { data, width, height }) => {\n svg.attr('width', width).attr('height', height);\n\n // Clear previous content\n svg.selectAll('*').remove();\n\n renderBarChart(svg, {\n data,\n width,\n height,\n });\n};\n","slug","Fork of NUR BARS","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","8318e5ad62bd48618e21260d85032011","startCommitId","8296555d91bf4009ab5ebb2d62ac105b","forkedFrom","forkedFromVisibility",1769763448000,1769763604000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]