creadata VizPicker<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tektur&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: Mulish, sans-serif;\n padding: 40px;\n background: #f9f9f9;\n text-align: center;\n }\n h2 {\n font-family: 'Tektur', cursive;\n font-weight: 900;\n }\n h2, h4 {\n color: #44546A;\n }\n .creadata-logo {\n font-family: 'Tektur', cursive;\n font-weight: 900;\n font-size: 70%;\n color: #44546A;\n margin-bottom: 0;\n }\n h2 {\n margin-top: 0;\n }\n .question-block, .result-block {\n margin-bottom: 40px;\n animation: slideIn 0.5s ease-out;\n }\n.viz-button {\n margin: 6px;\n padding: 10px 16px;\n font-size: 15px;\n border: 1px solid #ccc;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n display: inline-block;\n color: white;\n}\n\n\/* Ba\u015fta t\u00fcm butonlar i\u00e7in *\/\n.question-block:not(.answered) .viz-button {\n background-color: #627998;\n}\n\n\/* Se\u00e7im yap\u0131ld\u0131ktan sonra se\u00e7ili olmayanlar *\/\n.question-block.answered .viz-button:not(.selected) {\n background-color: #BEC8D5;\n}\n\n\/* Hover edilen ama se\u00e7ili olmayanlar *\/\n.viz-button:hover:not(.selected) {\n background-color: #2BB67D;\n}\n\n\/* Se\u00e7ili buton *\/\n.viz-button.selected {\n background-color: #2C8C64;\n\n}\n .chart-grid {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n }\n .chart-card {\n width: 160px;\n background: white;\n border-radius: 8px;\n padding: 10px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n animation: slideIn 0.5s ease-out;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .chart-card img {\n width: 100%;\n height: auto;\n border-radius: 6px;\n }\n .chart-card-title {\n font-weight: bold;\n margin-top: 8px;\n color: #44546A;\n }\n .chart-card-desc {\n font-size: 13px;\n font-style: italic;\n color: #8FA0B7;\n line-height: 1.2;\n }\n @keyframes slideIn {\n from { transform: translateX(50px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"slider-container\">\n <div class=\"slider-track\" id=\"slider-track\"><\/div>\n<\/div>\n\n<style>\n.slider-container {\n width: 100%;\n overflow: hidden;\n padding: 8px 0;\n height: 95px;\n background: #fff;\n margin-bottom: 30px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n}\n.slider-track {\n display: flex;\n gap: 20px;\n animation: scrollSlider 20s linear infinite;\n align-items: center;\n}\n.slider-item {\n flex: 0 0 auto;\n width: 80px;\n position: relative;\n transition: transform 0.3s ease;\n}\n.slider-item:hover {\n transform: scale(1.2);\n z-index: 2;\n}\n.slider-item img {\n width: 100%;\n border-radius: 6px;\n}\n.slider-caption {\n position: absolute;\n top: 60px;\n width: 100%;\n font-size: 12px;\n line-height: 1;\n white-space: normal;\n word-break: break-word;\n background-color: rgba(255, 255, 255, 0.85);\n padding: 0px 0px;\n border-radius: 4px;\n color: #333;\n text-align: center;\n font-weight: 500;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n.slider-item:hover .slider-caption {\n opacity: 1;\n}\n\n@keyframes scrollSlider {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n<\/style>\n<h4 class=\"creadata-logo\">powered by creadata<\/h4>\n<h2>VizPicker<\/h2>\n <div id=\"question-container\"><\/div>\n <div id=\"result-container\"><\/div>\n\n <script>\n const container = document.getElementById(\"question-container\");\n const resultContainer = document.getElementById(\"result-container\");\n const imagePath = \"https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/06\/\";\n\n const charts = {\n \"1.1.1\": [\"Column\", \"Bar\", \"Lollipop\", \"Pareto\", \"Star\", \"Radial Column\", \"Data Bars\", \"Pictogram\"],\n \"1.1.2\": [\"Marimekko\", \"Overlapping Column\", \"Bullet\", \"Dumbbell\", \"Butterfly\"],\n \"1.1.3\": [\"Multiple Dot\", \"Spiral Multiple Dot\"],\n \"1.2.1\": [\"Clustered Column\", \"Clustered Bar\", \"Heat Map\", \"Sparklines\"],\n \"1.2.2\": [\"Multiple Column\", \"Multiple Bar\"],\n \"1.2.3\": [\"Stacked Column\", \"Stacked Bar\"],\n \"1.2.4\": [\"Diverging Column\", \"Diverging Bar\"],\n \"1.2.5\": [\"Range\", \"Dumbbell\"],\n \"1.3\": [\"Spider Net\"],\n \"2.1\": [\"Gauge\", \"Waffle\"],\n \"2.2.1.1\": [\"Pie\", \"Doughnut\", \"Tree Map\", \"Voronoi\", \"Parliement\"],\n \"2.2.1.2\": [\"Tree Map\", \"Voronoi\"],\n \"2.2.2\": [\"Tree Map\", \"Voronoi\", \"Sunburst\", \"Packed Circle\"],\n \"2.3.1\": [\"Radar\", \"Spiral Bar\"],\n \"2.3.2\": [\"100% Stacked Column\", \"100% Stacked Bar\", \"100% Stacked Area\"],\n \"3.1.1\": [\"Line\", \"Column\", \"Area\", \"Kagi\", \"Spiral Line\", \"Spiral Area\", \"Spiral Column\", \"Spiral Density\"],\n \"3.1.2\": [\"Line\", \"Multiple Line\", \"Sparklines\"],\n \"3.1.3\": [\"Stacked Area\", \"Stacked Column\", \"Diverging Area\", \"Stream\", \"Ribbon\", \"Nightingale\"],\n \"3.1.4\": [\"Slope\", \"Comet\"],\n \"3.1.5\": [\"Step\"],\n \"3.1.6\": [\"Waterfall\"],\n \"3.1.7\": [\"Fan\"],\n \"3.1.8\": [\"Bump\", \"Ribbon\"],\n \"3.1.9\": [\"Horizon\", \"Overlapping Column\"],\n \"3.1.10\": [\"Candlestick\", \"Range\"],\n \"3.1.11\": [\"Gantt\"],\n \"4.1\": [\"Dot Plot\", \"Barcode Plot\", \"Jitter Plot\", \"Beeswarm\"], \n \"4.2.1\": [\"Histogram\", \"Counts Plot\", \"Line Histogram\", \"Box and Whisker\"],\n \"4.2.2\": [\"Line Histogram\", \"Multiple Histogram\", \"Ridgeline\", \"Population Pyramid\", \"Violin\", \"Box and Whisker\"],\n \"4.2.3\": [\"Stacked Histogram\"],\n \"4.2.4\": [\"Box and Whisker\", \"Violin\"],\n \"4.2.5\": [\"Error Lines\"],\n \"5.1\": [\"Funnel\", \"Aluvial Diagram\", \"Sankey Diagram\", \"Chord Diagram\", \"Arc Diagram\"],\n \"5.2.1\": [\"Scatterplot\", \"Diamond Plot\"],\n \"5.2.2\": [\"Bubble Plot\", \"Multiple Scatterplot\", \"Sea Shell\", \"Triangle Plot\"],\n \"5.3\": [\"Connected Scatterplot\"],\n \"6.1.2\": [\"Point Map\", \"Bubble Map\", \"Location Heat Map\"],\n \"6.1.3\": [\"Flow Map\", \"Connection Map\", \"Transit Map\"],\n \"6.2.1\": [\"3D Density Map\", \"Choropleth\"],\n \"6.2.2\": [\"Hex Map\", \"Cartogram\", \"Tile Map\"],\n \"7\": [\"BAN\", \"Gauge\", \"Icons\"]\n };\n\n const chartDescriptions = {\n\"Column\": \"Provides vertical comparisons across categories or over time.\",\n\"Bar\": \"Ideal for comparisons in a horizontal layout.\",\n\"Lollipop\": \"Offers a minimal and clean visual presentation.\",\n\"Pareto\": \"Ranks factors by their level of impact.\",\n\"Star\": \"Suitable for showing proportional comparisons.\",\n\"Radial Column\": \"Displays proportions in a circular layout using columns.\",\n\"Marimekko\": \"Compares two variables simultaneously.\",\n\"Overlapping Column\": \"Presents grouped structures in an overlapped fashion.\",\n\"Bullet\": \"Used for comparing actual vs target values.\",\n\"Dumbbell\": \"Emphasizes the difference between two values.\",\n\"Multiple Dot\": \"Compares multiple data series in a compact form.\",\n\"Spiral Multiple Dot\": \"Shows change over time using a spiral layout.\",\n\"Clustered Column\": \"Vertically compares sub-groups within a category.\",\n\"Clustered Bar\": \"Horizontally compares sub-groups.\",\n\"Multiple Column\": \"Displays sub-series within groups.\",\n\"Multiple Bar\": \"Enables multi-group comparisons in a horizontal view.\",\n\"Butterfly\": \"Ideal for bidirectional data structures.\",\n\"Stacked Column\": \"Visualizes parts of a total over time or categories.\",\n\"Stacked Bar\": \"Shows stacked proportions horizontally.\",\n\"Diverging Column\": \"Compares positive and negative values visually.\",\n\"Diverging Bar\": \"Displays opposing data values horizontally.\",\n\"Range\": \"Highlights the range between minimum and maximum values.\",\n\"Spider Net\": \"Enables comparison of multivariate data in a radial form.\",\n\"Gauge\": \"Symbolically presents a single ratio or value.\",\n\"Waffle\": \"Represents proportions using symbolic blocks or icons.\",\n\"Pie\": \"Displays parts of a whole in a circular layout.\",\n\"Doughnut\": \"Similar to pie charts, but with a hollow center.\",\n\"Tree Map\": \"Uses area size to represent hierarchical proportions.\",\n\"Voronoi\": \"Allocates space based on proportional data values.\",\n\"Parliement\": \"Uses icons to present percentage distributions symbolically.\",\n\"Sunburst\": \"Circularly displays hierarchical data structures.\",\n\"Packed Circle\": \"Shows complex, multi-level proportions with filled circles.\",\n\"Radar\": \"Compares multidimensional groups.\",\n\"Spiral Bar\": \"Displays multiple proportions in a circular\/spiral manner.\",\n\"100% Stacked Column\": \"Shows percentage distribution within each group.\",\n\"100% Stacked Bar\": \"Presents horizontal percentage proportions.\",\n\"100% Stacked Area\": \"Visualizes cumulative proportions over time.\",\n\"Line\": \"Depicts time-based changes or index movements.\",\n\"Multiple Line\": \"Displays multiple value trends without clutter.\",\n\"Fan\": \"Shows the development of scenarios related to future or uncertainty.\",\n\"Step\": \"Represents changes in discrete (non-continuous) values.\",\n\"Kagi\": \"Highlights price trends and reversal points.\",\n\"Slope\": \"Visualizes transitions between two categories using slanted lines.\",\n\"Comet\": \"Shows movement between two time points with directional lines.\",\n\"Bump\": \"Facilitates comparison by ranking data from largest to smallest.\",\n\"Ribbon\": \"Shows category transitions over time using visual flows.\",\n\"Area\": \"Emphasizes change over time with filled areas.\",\n\"Stacked Area\": \"Displays how parts of a total evolve over time.\",\n\"Diverging Area\": \"Separates positive and negative values along an axis.\",\n\"Stream\": \"Dynamically visualizes flows between categories over time.\",\n\"Horizon\": \"Layers compact area charts to conserve space.\",\n\"Waterfall\": \"Step-by-step depiction of increases and decreases cumulatively.\",\n\"Candlestick\": \"Shows open, close, high, and low values in one column.\",\n\"Gantt\": \"Displays project task durations on a timeline using blocks.\",\n\"Spiral Line\": \"Presents recurring time-based data in a circular manner.\",\n\"Spiral Column\": \"Highlights seasonal cycles using a spiral time axis.\",\n\"Spiral Area\": \"Emphasizes recurring patterns in an area chart within a spiral layout.\",\n\"Spiral Density\": \"Shows varying densities over time in a spiral structure.\",\n\"Nightingale\": \"Circular chart that emphasizes area over angle to represent categories.\",\n\"Histogram\": \"Groups continuous variable frequencies into bar intervals.\",\n\"Counts Plot\": \"A minimalist chart representing individual data frequencies.\",\n\"Dot Plot\": \"Shows the relationship between two variables using data points.\",\n\"Barcode Plot\": \"Visualizes data density using line intensity.\",\n\"Jitter Plot\": \"Spreads data points slightly to reduce overlap.\",\n\"Beeswarm\": \"Prevents overplotting by adjusting point positions horizontally.\",\n\"Box and Whisker\": \"Summarizes data distribution via medians, quartiles, and outliers.\",\n\"Error Lines\": \"Indicates uncertainty or variability around mean values.\",\n\"Stacked Histogram\": \"Combines category histograms into a cumulative bar format.\",\n\"Violin\": \"Combines boxplot and density distribution in a symmetrical shape.\",\n\"Population Pyramid\": \"Used to compare demographics like age and gender in two directions.\",\n\"Ridgeline\": \"Depicts overlapping densities over time like mountain ranges.\",\n\"Multiple Histogram\": \"Compares distributions of several groups side-by-side or transparently.\",\n\"Line Histogram\": \"A line-based alternative to bar histograms, often used for smoothed distributions.\",\n\"BAN\": \"Shows a single value in context with references or comparisons.\",\n\"Icons\": \"Makes data easy to understand with representative symbols.\",\n\"Pictogram\": \"Uses repeating symbols to intuitively convey numeric values.\",\n\"Heat Map\": \"Uses color gradients to show data intensity or variation.\",\n\"Data Bars\": \"Emphasizes quantitative differences within table cells using bar lengths.\",\n\"Sparklines\": \"Small line or column charts used within tables to show trends.\",\n\"Scatterplot\": \"Basic plot showing relation between two variables.\",\n\"Multiple Scatterplot\": \"Uses color or shape to differentiate groups on the same axis.\",\n\"Diamond Plot\": \"Represents values as equally sized colored squares.\",\n\"Triangle Plot\": \"Visualizes the ratios of three variables in a triangular space.\",\n\"Sea Shell\": \"Displays time-based data with spiral patterns to emphasize periodic trends.\",\n\"Bubble Plot\": \"Adds a third variable by encoding its value as bubble size.\",\n\"Connected Scatterplot\": \"Connects points to emphasize directional change.\",\n\"Funnel\": \"Visualizes decreasing volumes through a process in a narrowing layout.\",\n\"Aluvial Diagram\": \"Shows evolving categorical relationships with flowing blocks.\",\n\"Sankey Diagram\": \"Shows flows from sources to targets with proportional thickness.\",\n\"Chord Diagram\": \"Displays connections between data groups on a circular axis.\",\n\"Arc Diagram\": \"Connects related data points with arcs along a circular path.\",\n\"3D Density Map\": \"Adds depth to represent data density over geographic areas.\",\n\"Choropleth\": \"Emphasizes intensity or weight using predefined spatial weights.\",\n\"Hex Map\": \"Divides area into equal-sized hexagons for density or category comparison.\",\n\"Tile Map\": \"Simplifies the distribution by placing the data on the map using equally sized squares or rectangles.\",\n\"Cartogram\": \"Distorts geographic regions to reflect variable values.\",\n\"Point Map\": \"Marks each data point at its real-world location on a map.\",\n\"Bubble Map\": \"Uses bubble size to reflect value at specific map locations.\",\n\"Location Heat Map\": \"Highlights hot and cold zones with color based on data density.\",\n\"Flow Map\": \"Uses arrows to indicate directional relationships across locations.\",\n\"Transit Map\": \"A simplified schematic showing public transportation networks.\",\n\"Connection Map\": \"Visualizes relationships between two or more locations with lines or curves.\"\n };\n\n const chartImages = {};\n Object.keys(chartDescriptions).forEach(name => {\n chartImages[name] = imagePath + name.toLowerCase()\n .replace(\/ \/g, '-')\n .replace(\/100%\/g, '100')\n + \"-badge.png\";\n\n });\n\nfunction scrollToBottom(shouldScroll = true) {\n if (!shouldScroll) return;\n setTimeout(() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }), 100);\n}\n\n function clearBelow(level) {\n const blocks = document.querySelectorAll(\".question-block\");\n blocks.forEach(block => {\n if (parseInt(block.dataset.level) >= level) block.remove();\n });\n resultContainer.innerHTML = \"\";\n }\n\n function addQuestion(level, title, options, callback, shouldScroll = true) {\n const block = document.createElement(\"div\");\n block.className = \"question-block\";\n block.dataset.level = level;\n let html = `<h4>${title}<\/h4>`;\n options.forEach(opt => {\n html += `<button class=\"viz-button\" onclick=\"${callback}('${opt}', this)\">${opt}<\/button>`;\n });\n block.innerHTML = html;\n container.appendChild(block);\n scrollToBottom(shouldScroll);\n }\n\nfunction selectBtn(btn) {\n const group = btn.parentNode.querySelectorAll(\".viz-button\");\n group.forEach(b => b.classList.remove(\"selected\"));\n btn.classList.add(\"selected\");\n\n \/\/ \u2757\ufe0fAit oldu\u011fu question-block'a answered s\u0131n\u0131f\u0131n\u0131 ekle\n const block = btn.closest(\".question-block\");\n if (block) block.classList.add(\"answered\");\n}\n\n function showCharts(code) {\n const list = charts[code];\n if (list) {\n let html = `<h4>Suggested Visualizations:<\/h4><div class=\"chart-grid\">`;\n list.forEach(name => {\n const img = chartImages[name];\n const desc = chartDescriptions[name] || \"A\u00e7\u0131klama bulunamad\u0131.\";\n html += \n `<div class=\"chart-card\">\n <img decoding=\"async\" src=\"${img}\" alt=\"${name}\">\n <div class=\"chart-card-title\">${name}<\/div>\n <div class=\"chart-card-desc\">${desc}<\/div>\n <\/div>`;\n });\n html += `<\/div>`;\n\n \/\/ Tekil \/ \u00c7o\u011ful mesaj kontrol\u00fc\nconst infoText = list.length === 1\n ? 'You can use the <strong><a href=\"https:\/\/creadata.gumroad.com\/l\/datavizcards\" target=\"_blank\" style=\"color:#2B59B6; text-decoration: none;\">DataViz Cards<\/a><\/strong> to learn more about this visualization.'\n : 'You can use the <strong><a href=\"https:\/\/creadata.gumroad.com\/l\/datavizcards\" target=\"_blank\" style=\"color:#2B59B6; text-decoration: none;\">DataViz Cards<\/a><\/strong> to learn more about these visualizations.';\n\nhtml += `<p style=\"margin-top:20px; font-size:14px; color:#44546A;\">${infoText}<\/p>`;\nresultContainer.innerHTML = html;\nscrollToBottom(true);\n }\n}\n\n\nfunction q1(ans, btn) {\n selectBtn(btn);\n clearBelow(2);\n if (ans.includes(\"Value Comparison\")) {\n addQuestion(2, \"How many categories (breakdowns) do you have in your data set?\", [\"1 Category\", \"2 Categories\", \"More than 2 categories\"], \"q1_1\");\n } else if (ans.includes(\"Part-to-Whole Relationship\")) {\n addQuestion(2, \"What kind of a relation do you want to visualize?\", [\"One part in a whole\", \"All parts in a whole\", \"Parts in multiple wholes\"], \"q2_1\");\n } else if (ans.includes(\"Trend Over Time\")) {\n addQuestion(2, \"What kind of a change do you want to visualize?\", [\n \"Change of a value\", \n \"Change of multiple values\", \n \"Change of total\", \n \"Before-After\", \n \"Discrete change\", \n \"Change of delta\", \n \"Change of scenarios\", \n \"Change of ranks\", \n \"Change of reference comparison\", \n \"Change of min-max\", \n \"Project steps layout\"\n ], \"q3_1\");\n} else if (ans.includes(\"Distribution Within Data\")) {\n addQuestion(2, \"How would you like to explore the distribution?\", [\"Each data point individually\", \"By summarizing the data\"], \"q4_1\");\n} else if (ans.includes(\"Relationship Between Variables\")) {\n addQuestion(2, \"What type of relationship would you like to explore?\", [\"Between parameters\", \"Changes in the relationship\", \"Flow-based relationship\"], \"q5_1\");\n} else if (ans.includes(\"Spatial Evaluation\")) {\n addQuestion(2, \"What kind of spatial evaluation would you like to display?\", [\"Value by location\", \"Location of data points\", \"Relationship between locations\"], \"q6_1\");\n} else if (ans.includes(\"Single Value Display\")) {\n showCharts(\"7\");\n }\n \n}\n\n\n function q1_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"1 Category\") {\n addQuestion(3, \"How many data series do you have?\", [\"Only one\", \"Two series\", \"More than two series\"], \"q1_1_1\");\n } else if (ans === \"2 Categories\") {\n addQuestion(3, \"What kind of comparison do you want?\", [\"Each data point with one another\", \"Within each category\", \"Totals\", \"Totals with each other\", \"Min-Max\"], \"q1_1_2\");\n } else if (ans === \"More than 2 categories\") {\n showCharts(\"1.3\");\n }\n }\n\n function q1_1_1(ans, btn) {\n selectBtn(btn);\n const map = {\n \"Only one\": \"1.1.1\",\n \"Two series\": \"1.1.2\",\n \"More than two series\": \"1.1.3\"\n };\n showCharts(map[ans]);\n }\n\n function q1_1_2(ans, btn) {\n selectBtn(btn);\n const map = {\n \"Each data point with one another\": \"1.2.1\",\n \"Within each category\": \"1.2.2\",\n \"Totals\": \"1.2.3\",\n \"Totals with each other\": \"1.2.4\",\n \"Min-Max\": \"1.2.5\"\n };\n showCharts(map[ans]);\n }\n\n function q2_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"One part in a whole\") {\n showCharts(\"2.1\");\n } else if (ans === \"All parts in a whole\") {\n addQuestion(3, \"How many breakdown levels do you have?\", [\"One level\", \"More than one\"], \"q2_2\");\n } else if (ans === \"Parts in multiple wholes\") {\n addQuestion(3, \"What do you want to visualize?\", [\"A single data point within multiple wholes\", \"All points within multiple wholes\"], \"q2_3\");\n }\n }\n\n\n function q2_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n if (ans === \"One level\") {\n addQuestion(4, \"How many data points do you have?\", [\"Less than 5\", \"More than 5\"], \"q2_2_1\");\n } else {\n showCharts(\"2.2.2\");\n }\n }\n\n function q2_2_1(ans, btn) {\n selectBtn(btn);\n const map = {\n \"Less than 5\": \"2.2.1.1\",\n \"More than 5\": \"2.2.1.2\"\n };\n showCharts(map[ans]);\n }\n\nfunction q2_3(ans, btn) {\n selectBtn(btn);\n const map = {\n \"A single data point within multiple wholes\": \"2.3.1\",\n \"All points within multiple wholes\": \"2.3.2\"\n };\n showCharts(map[ans]);\n}\n\nfunction q3_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n const map = {\n \"Change of a value\": \"3.1.1\", \n \"Change of multiple values\": \"3.1.2\", \n \"Change of total\": \"3.1.3\", \n \"Before-After\": \"3.1.4\", \n \"Discrete change\": \"3.1.5\", \n \"Change of delta\": \"3.1.6\", \n \"Change of scenarios\": \"3.1.7\", \n \"Change of ranks\": \"3.1.8\", \n \"Change of reference comparison\": \"3.1.9\", \n \"Change of min-max\": \"3.1.10\", \n \"Project steps layout\": \"3.1.11\"\n };\n showCharts(map[ans]);\n}\n\n function q4_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"Each data point individually\") {\n showCharts(\"4.1\");\n } else if (ans === \"By summarizing the data\") {\n addQuestion(3, \"What type of distribution would you like to explore?\", [\n \"A single distribution\",\n \"Multiple distributions compared\",\n \"Distribution with a breakdown\",\n \"Placement of quartiles\",\n \"Placement of deviation\"\n ], \"q4_2\");\n }\n }\n\nfunction q4_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n const map = {\n \"A single distribution\": \"4.2.1\", \n \"Multiple distributions compared\": \"4.2.2\", \n \"Distribution with a breakdown\": \"4.2.3\", \n \"Placement of quartiles\": \"4.2.4\", \n \"Placement of deviation\": \"4.2.5\"\n };\n showCharts(map[ans]);\n}\n\n function q5_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"Flow-based relationship\") {\n showCharts(\"5.1\");\n } else if (ans === \"Between parameters\") {\n addQuestion(3, \"How many parameters do you have?\", [\"Two parameters\", \"More than 2 parameters\"], \"q5_2\");\n } else if (ans === \"Changes in the relationship\") {\n showCharts(\"5.3\");\n }\n }\n\n function q5_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n const map = {\n \"Two parameters\": \"5.2.1\", \n \"More than 2 parameters\": \"5.2.2\"\n };\n showCharts(map[ans]);\n}\n\n function q6_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"Value by location\") {\n addQuestion(3, \"Do you need to show exact locations?\", [\"Yes critical\", \"Just realistic enough\"], \"q6_2\");\n } else if (ans === \"Location of data points\") {\n showCharts(\"6.1.2\");\n } else if (ans === \"Relationship between locations\") {\n showCharts(\"6.1.3\");\n }\n }\n\n function q6_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n const map = {\n \"Yes critical\": \"6.2.1\", \n \"Just realistic enough\": \"6.2.2\"\n };\n showCharts(map[ans]);\n}\n function shuffleArray(arr) {\n return arr.sort(() => Math.random() - 0.5);\n}\n\nfunction generateSlider() {\n const track = document.getElementById(\"slider-track\");\n const names = Object.keys(chartDescriptions);\n const shuffled = shuffleArray(names).slice(0, 50); \/\/ \u0130lk 50 tanesini al\n const sliderContent = [];\n\n \/\/ 2 kez yinelenerek sonsuz scroll etkisi\n for (let i = 0; i < 2; i++) {\n shuffled.forEach(name => {\n const img = chartImages[name];\n sliderContent.push(`\n <div class=\"slider-item\">\n <img decoding=\"async\" src=\"${img}\" alt=\"${name}\">\n <div class=\"slider-caption\">${name}<\/div>\n <\/div>\n`);\n });\n }\n\n track.innerHTML = sliderContent.join('');\n}\n\nwindow.onload = function() {\n generateSlider();\naddQuestion(1, \"What type of information would you like to visualize?\", [\n \"\ud83d\udcca Value Comparison\",\n \"\ud83e\udde9 Part-to-Whole Relationship\",\n \"\ud83d\udcc8 Trend Over Time\",\n \"\u2728 Distribution Within Data\",\n \"\ud83d\udd17 Relationship Between Variables\",\n \"\ud83c\udf0d Spatial Evaluation\",\n \"\ud83d\udd22 Single Value Display\"\n ], \"q1\", false);\n};\n\/\/ renderQuestions();\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>creadata VizPicker powered by creadata VizPicker<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6473","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/6473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/comments?post=6473"}],"version-history":[{"count":17,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/6473\/revisions"}],"predecessor-version":[{"id":6603,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/6473\/revisions\/6603"}],"wp:attachment":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/media?parent=6473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6473,"date":"2025-06-08T17:19:03","date_gmt":"2025-06-08T17:19:03","guid":{"rendered":"https:\/\/www.creadata.com.tr\/?page_id=6473"},"modified":"2025-06-09T21:49:44","modified_gmt":"2025-06-09T21:49:44","slug":"vizpicker","status":"publish","type":"page","link":"https:\/\/www.creadata.com.tr\/en\/vizpicker\/","title":{"rendered":"vizpicker"},"content":{"rendered":"\n\n\n \n creadata VizPicker<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tektur&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: Mulish, sans-serif;\n padding: 40px;\n background: #f9f9f9;\n text-align: center;\n }\n h2 {\n font-family: 'Tektur', cursive;\n font-weight: 900;\n }\n h2, h4 {\n color: #44546A;\n }\n .creadata-logo {\n font-family: 'Tektur', cursive;\n font-weight: 900;\n font-size: 70%;\n color: #44546A;\n margin-bottom: 0;\n }\n h2 {\n margin-top: 0;\n }\n .question-block, .result-block {\n margin-bottom: 40px;\n animation: slideIn 0.5s ease-out;\n }\n.viz-button {\n margin: 6px;\n padding: 10px 16px;\n font-size: 15px;\n border: 1px solid #ccc;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n display: inline-block;\n color: white;\n}\n\n\/* Ba\u015fta t\u00fcm butonlar i\u00e7in *\/\n.question-block:not(.answered) .viz-button {\n background-color: #627998;\n}\n\n\/* Se\u00e7im yap\u0131ld\u0131ktan sonra se\u00e7ili olmayanlar *\/\n.question-block.answered .viz-button:not(.selected) {\n background-color: #BEC8D5;\n}\n\n\/* Hover edilen ama se\u00e7ili olmayanlar *\/\n.viz-button:hover:not(.selected) {\n background-color: #2BB67D;\n}\n\n\/* Se\u00e7ili buton *\/\n.viz-button.selected {\n background-color: #2C8C64;\n\n}\n .chart-grid {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 20px;\n }\n .chart-card {\n width: 160px;\n background: white;\n border-radius: 8px;\n padding: 10px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n animation: slideIn 0.5s ease-out;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .chart-card img {\n width: 100%;\n height: auto;\n border-radius: 6px;\n }\n .chart-card-title {\n font-weight: bold;\n margin-top: 8px;\n color: #44546A;\n }\n .chart-card-desc {\n font-size: 13px;\n font-style: italic;\n color: #8FA0B7;\n line-height: 1.2;\n }\n @keyframes slideIn {\n from { transform: translateX(50px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"slider-container\">\n <div class=\"slider-track\" id=\"slider-track\"><\/div>\n<\/div>\n\n<style>\n.slider-container {\n width: 100%;\n overflow: hidden;\n padding: 8px 0;\n height: 95px;\n background: #fff;\n margin-bottom: 30px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n}\n.slider-track {\n display: flex;\n gap: 20px;\n animation: scrollSlider 20s linear infinite;\n align-items: center;\n}\n.slider-item {\n flex: 0 0 auto;\n width: 80px;\n position: relative;\n transition: transform 0.3s ease;\n}\n.slider-item:hover {\n transform: scale(1.2);\n z-index: 2;\n}\n.slider-item img {\n width: 100%;\n border-radius: 6px;\n}\n.slider-caption {\n position: absolute;\n top: 60px;\n width: 100%;\n font-size: 12px;\n line-height: 1;\n white-space: normal;\n word-break: break-word;\n background-color: rgba(255, 255, 255, 0.85);\n padding: 0px 0px;\n border-radius: 4px;\n color: #333;\n text-align: center;\n font-weight: 500;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n.slider-item:hover .slider-caption {\n opacity: 1;\n}\n\n@keyframes scrollSlider {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n<\/style>\n<h4 class=\"creadata-logo\">powered by creadata<\/h4>\n<h2>VizPicker<\/h2>\n <div id=\"question-container\"><\/div>\n <div id=\"result-container\"><\/div>\n\n <script>\n const container = document.getElementById(\"question-container\");\n const resultContainer = document.getElementById(\"result-container\");\n const imagePath = \"https:\/\/www.creadata.com.tr\/wp-content\/uploads\/2025\/06\/\";\n\n const charts = {\n \"1.1.1\": [\"Column\", \"Bar\", \"Lollipop\", \"Pareto\", \"Star\", \"Radial Column\", \"Data Bars\", \"Pictogram\"],\n \"1.1.2\": [\"Marimekko\", \"Overlapping Column\", \"Bullet\", \"Dumbbell\", \"Butterfly\"],\n \"1.1.3\": [\"Multiple Dot\", \"Spiral Multiple Dot\"],\n \"1.2.1\": [\"Clustered Column\", \"Clustered Bar\", \"Heat Map\", \"Sparklines\"],\n \"1.2.2\": [\"Multiple Column\", \"Multiple Bar\"],\n \"1.2.3\": [\"Stacked Column\", \"Stacked Bar\"],\n \"1.2.4\": [\"Diverging Column\", \"Diverging Bar\"],\n \"1.2.5\": [\"Range\", \"Dumbbell\"],\n \"1.3\": [\"Spider Net\"],\n \"2.1\": [\"Gauge\", \"Waffle\"],\n \"2.2.1.1\": [\"Pie\", \"Doughnut\", \"Tree Map\", \"Voronoi\", \"Parliement\"],\n \"2.2.1.2\": [\"Tree Map\", \"Voronoi\"],\n \"2.2.2\": [\"Tree Map\", \"Voronoi\", \"Sunburst\", \"Packed Circle\"],\n \"2.3.1\": [\"Radar\", \"Spiral Bar\"],\n \"2.3.2\": [\"100% Stacked Column\", \"100% Stacked Bar\", \"100% Stacked Area\"],\n \"3.1.1\": [\"Line\", \"Column\", \"Area\", \"Kagi\", \"Spiral Line\", \"Spiral Area\", \"Spiral Column\", \"Spiral Density\"],\n \"3.1.2\": [\"Line\", \"Multiple Line\", \"Sparklines\"],\n \"3.1.3\": [\"Stacked Area\", \"Stacked Column\", \"Diverging Area\", \"Stream\", \"Ribbon\", \"Nightingale\"],\n \"3.1.4\": [\"Slope\", \"Comet\"],\n \"3.1.5\": [\"Step\"],\n \"3.1.6\": [\"Waterfall\"],\n \"3.1.7\": [\"Fan\"],\n \"3.1.8\": [\"Bump\", \"Ribbon\"],\n \"3.1.9\": [\"Horizon\", \"Overlapping Column\"],\n \"3.1.10\": [\"Candlestick\", \"Range\"],\n \"3.1.11\": [\"Gantt\"],\n \"4.1\": [\"Dot Plot\", \"Barcode Plot\", \"Jitter Plot\", \"Beeswarm\"], \n \"4.2.1\": [\"Histogram\", \"Counts Plot\", \"Line Histogram\", \"Box and Whisker\"],\n \"4.2.2\": [\"Line Histogram\", \"Multiple Histogram\", \"Ridgeline\", \"Population Pyramid\", \"Violin\", \"Box and Whisker\"],\n \"4.2.3\": [\"Stacked Histogram\"],\n \"4.2.4\": [\"Box and Whisker\", \"Violin\"],\n \"4.2.5\": [\"Error Lines\"],\n \"5.1\": [\"Funnel\", \"Aluvial Diagram\", \"Sankey Diagram\", \"Chord Diagram\", \"Arc Diagram\"],\n \"5.2.1\": [\"Scatterplot\", \"Diamond Plot\"],\n \"5.2.2\": [\"Bubble Plot\", \"Multiple Scatterplot\", \"Sea Shell\", \"Triangle Plot\"],\n \"5.3\": [\"Connected Scatterplot\"],\n \"6.1.2\": [\"Point Map\", \"Bubble Map\", \"Location Heat Map\"],\n \"6.1.3\": [\"Flow Map\", \"Connection Map\", \"Transit Map\"],\n \"6.2.1\": [\"3D Density Map\", \"Choropleth\"],\n \"6.2.2\": [\"Hex Map\", \"Cartogram\", \"Tile Map\"],\n \"7\": [\"BAN\", \"Gauge\", \"Icons\"]\n };\n\n const chartDescriptions = {\n\"Column\": \"Provides vertical comparisons across categories or over time.\",\n\"Bar\": \"Ideal for comparisons in a horizontal layout.\",\n\"Lollipop\": \"Offers a minimal and clean visual presentation.\",\n\"Pareto\": \"Ranks factors by their level of impact.\",\n\"Star\": \"Suitable for showing proportional comparisons.\",\n\"Radial Column\": \"Displays proportions in a circular layout using columns.\",\n\"Marimekko\": \"Compares two variables simultaneously.\",\n\"Overlapping Column\": \"Presents grouped structures in an overlapped fashion.\",\n\"Bullet\": \"Used for comparing actual vs target values.\",\n\"Dumbbell\": \"Emphasizes the difference between two values.\",\n\"Multiple Dot\": \"Compares multiple data series in a compact form.\",\n\"Spiral Multiple Dot\": \"Shows change over time using a spiral layout.\",\n\"Clustered Column\": \"Vertically compares sub-groups within a category.\",\n\"Clustered Bar\": \"Horizontally compares sub-groups.\",\n\"Multiple Column\": \"Displays sub-series within groups.\",\n\"Multiple Bar\": \"Enables multi-group comparisons in a horizontal view.\",\n\"Butterfly\": \"Ideal for bidirectional data structures.\",\n\"Stacked Column\": \"Visualizes parts of a total over time or categories.\",\n\"Stacked Bar\": \"Shows stacked proportions horizontally.\",\n\"Diverging Column\": \"Compares positive and negative values visually.\",\n\"Diverging Bar\": \"Displays opposing data values horizontally.\",\n\"Range\": \"Highlights the range between minimum and maximum values.\",\n\"Spider Net\": \"Enables comparison of multivariate data in a radial form.\",\n\"Gauge\": \"Symbolically presents a single ratio or value.\",\n\"Waffle\": \"Represents proportions using symbolic blocks or icons.\",\n\"Pie\": \"Displays parts of a whole in a circular layout.\",\n\"Doughnut\": \"Similar to pie charts, but with a hollow center.\",\n\"Tree Map\": \"Uses area size to represent hierarchical proportions.\",\n\"Voronoi\": \"Allocates space based on proportional data values.\",\n\"Parliement\": \"Uses icons to present percentage distributions symbolically.\",\n\"Sunburst\": \"Circularly displays hierarchical data structures.\",\n\"Packed Circle\": \"Shows complex, multi-level proportions with filled circles.\",\n\"Radar\": \"Compares multidimensional groups.\",\n\"Spiral Bar\": \"Displays multiple proportions in a circular\/spiral manner.\",\n\"100% Stacked Column\": \"Shows percentage distribution within each group.\",\n\"100% Stacked Bar\": \"Presents horizontal percentage proportions.\",\n\"100% Stacked Area\": \"Visualizes cumulative proportions over time.\",\n\"Line\": \"Depicts time-based changes or index movements.\",\n\"Multiple Line\": \"Displays multiple value trends without clutter.\",\n\"Fan\": \"Shows the development of scenarios related to future or uncertainty.\",\n\"Step\": \"Represents changes in discrete (non-continuous) values.\",\n\"Kagi\": \"Highlights price trends and reversal points.\",\n\"Slope\": \"Visualizes transitions between two categories using slanted lines.\",\n\"Comet\": \"Shows movement between two time points with directional lines.\",\n\"Bump\": \"Facilitates comparison by ranking data from largest to smallest.\",\n\"Ribbon\": \"Shows category transitions over time using visual flows.\",\n\"Area\": \"Emphasizes change over time with filled areas.\",\n\"Stacked Area\": \"Displays how parts of a total evolve over time.\",\n\"Diverging Area\": \"Separates positive and negative values along an axis.\",\n\"Stream\": \"Dynamically visualizes flows between categories over time.\",\n\"Horizon\": \"Layers compact area charts to conserve space.\",\n\"Waterfall\": \"Step-by-step depiction of increases and decreases cumulatively.\",\n\"Candlestick\": \"Shows open, close, high, and low values in one column.\",\n\"Gantt\": \"Displays project task durations on a timeline using blocks.\",\n\"Spiral Line\": \"Presents recurring time-based data in a circular manner.\",\n\"Spiral Column\": \"Highlights seasonal cycles using a spiral time axis.\",\n\"Spiral Area\": \"Emphasizes recurring patterns in an area chart within a spiral layout.\",\n\"Spiral Density\": \"Shows varying densities over time in a spiral structure.\",\n\"Nightingale\": \"Circular chart that emphasizes area over angle to represent categories.\",\n\"Histogram\": \"Groups continuous variable frequencies into bar intervals.\",\n\"Counts Plot\": \"A minimalist chart representing individual data frequencies.\",\n\"Dot Plot\": \"Shows the relationship between two variables using data points.\",\n\"Barcode Plot\": \"Visualizes data density using line intensity.\",\n\"Jitter Plot\": \"Spreads data points slightly to reduce overlap.\",\n\"Beeswarm\": \"Prevents overplotting by adjusting point positions horizontally.\",\n\"Box and Whisker\": \"Summarizes data distribution via medians, quartiles, and outliers.\",\n\"Error Lines\": \"Indicates uncertainty or variability around mean values.\",\n\"Stacked Histogram\": \"Combines category histograms into a cumulative bar format.\",\n\"Violin\": \"Combines boxplot and density distribution in a symmetrical shape.\",\n\"Population Pyramid\": \"Used to compare demographics like age and gender in two directions.\",\n\"Ridgeline\": \"Depicts overlapping densities over time like mountain ranges.\",\n\"Multiple Histogram\": \"Compares distributions of several groups side-by-side or transparently.\",\n\"Line Histogram\": \"A line-based alternative to bar histograms, often used for smoothed distributions.\",\n\"BAN\": \"Shows a single value in context with references or comparisons.\",\n\"Icons\": \"Makes data easy to understand with representative symbols.\",\n\"Pictogram\": \"Uses repeating symbols to intuitively convey numeric values.\",\n\"Heat Map\": \"Uses color gradients to show data intensity or variation.\",\n\"Data Bars\": \"Emphasizes quantitative differences within table cells using bar lengths.\",\n\"Sparklines\": \"Small line or column charts used within tables to show trends.\",\n\"Scatterplot\": \"Basic plot showing relation between two variables.\",\n\"Multiple Scatterplot\": \"Uses color or shape to differentiate groups on the same axis.\",\n\"Diamond Plot\": \"Represents values as equally sized colored squares.\",\n\"Triangle Plot\": \"Visualizes the ratios of three variables in a triangular space.\",\n\"Sea Shell\": \"Displays time-based data with spiral patterns to emphasize periodic trends.\",\n\"Bubble Plot\": \"Adds a third variable by encoding its value as bubble size.\",\n\"Connected Scatterplot\": \"Connects points to emphasize directional change.\",\n\"Funnel\": \"Visualizes decreasing volumes through a process in a narrowing layout.\",\n\"Aluvial Diagram\": \"Shows evolving categorical relationships with flowing blocks.\",\n\"Sankey Diagram\": \"Shows flows from sources to targets with proportional thickness.\",\n\"Chord Diagram\": \"Displays connections between data groups on a circular axis.\",\n\"Arc Diagram\": \"Connects related data points with arcs along a circular path.\",\n\"3D Density Map\": \"Adds depth to represent data density over geographic areas.\",\n\"Choropleth\": \"Emphasizes intensity or weight using predefined spatial weights.\",\n\"Hex Map\": \"Divides area into equal-sized hexagons for density or category comparison.\",\n\"Tile Map\": \"Simplifies the distribution by placing the data on the map using equally sized squares or rectangles.\",\n\"Cartogram\": \"Distorts geographic regions to reflect variable values.\",\n\"Point Map\": \"Marks each data point at its real-world location on a map.\",\n\"Bubble Map\": \"Uses bubble size to reflect value at specific map locations.\",\n\"Location Heat Map\": \"Highlights hot and cold zones with color based on data density.\",\n\"Flow Map\": \"Uses arrows to indicate directional relationships across locations.\",\n\"Transit Map\": \"A simplified schematic showing public transportation networks.\",\n\"Connection Map\": \"Visualizes relationships between two or more locations with lines or curves.\"\n };\n\n const chartImages = {};\n Object.keys(chartDescriptions).forEach(name => {\n chartImages[name] = imagePath + name.toLowerCase()\n .replace(\/ \/g, '-')\n .replace(\/100%\/g, '100')\n + \"-badge.png\";\n\n });\n\nfunction scrollToBottom(shouldScroll = true) {\n if (!shouldScroll) return;\n setTimeout(() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }), 100);\n}\n\n function clearBelow(level) {\n const blocks = document.querySelectorAll(\".question-block\");\n blocks.forEach(block => {\n if (parseInt(block.dataset.level) >= level) block.remove();\n });\n resultContainer.innerHTML = \"\";\n }\n\n function addQuestion(level, title, options, callback, shouldScroll = true) {\n const block = document.createElement(\"div\");\n block.className = \"question-block\";\n block.dataset.level = level;\n let html = `<h4>${title}<\/h4>`;\n options.forEach(opt => {\n html += `<button class=\"viz-button\" onclick=\"${callback}('${opt}', this)\">${opt}<\/button>`;\n });\n block.innerHTML = html;\n container.appendChild(block);\n scrollToBottom(shouldScroll);\n }\n\nfunction selectBtn(btn) {\n const group = btn.parentNode.querySelectorAll(\".viz-button\");\n group.forEach(b => b.classList.remove(\"selected\"));\n btn.classList.add(\"selected\");\n\n \/\/ \u2757\ufe0fAit oldu\u011fu question-block'a answered s\u0131n\u0131f\u0131n\u0131 ekle\n const block = btn.closest(\".question-block\");\n if (block) block.classList.add(\"answered\");\n}\n\n function showCharts(code) {\n const list = charts[code];\n if (list) {\n let html = `<h4>Suggested Visualizations:<\/h4><div class=\"chart-grid\">`;\n list.forEach(name => {\n const img = chartImages[name];\n const desc = chartDescriptions[name] || \"A\u00e7\u0131klama bulunamad\u0131.\";\n html += \n `<div class=\"chart-card\">\n <img decoding=\"async\" src=\"${img}\" alt=\"${name}\">\n <div class=\"chart-card-title\">${name}<\/div>\n <div class=\"chart-card-desc\">${desc}<\/div>\n <\/div>`;\n });\n html += `<\/div>`;\n\n \/\/ Tekil \/ \u00c7o\u011ful mesaj kontrol\u00fc\nconst infoText = list.length === 1\n ? 'You can use the <strong><a href=\"https:\/\/creadata.gumroad.com\/l\/datavizcards\" target=\"_blank\" style=\"color:#2B59B6; text-decoration: none;\">DataViz Cards<\/a><\/strong> to learn more about this visualization.'\n : 'You can use the <strong><a href=\"https:\/\/creadata.gumroad.com\/l\/datavizcards\" target=\"_blank\" style=\"color:#2B59B6; text-decoration: none;\">DataViz Cards<\/a><\/strong> to learn more about these visualizations.';\n\nhtml += `<p style=\"margin-top:20px; font-size:14px; color:#44546A;\">${infoText}<\/p>`;\nresultContainer.innerHTML = html;\nscrollToBottom(true);\n }\n}\n\n\nfunction q1(ans, btn) {\n selectBtn(btn);\n clearBelow(2);\n if (ans.includes(\"Value Comparison\")) {\n addQuestion(2, \"How many categories (breakdowns) do you have in your data set?\", [\"1 Category\", \"2 Categories\", \"More than 2 categories\"], \"q1_1\");\n } else if (ans.includes(\"Part-to-Whole Relationship\")) {\n addQuestion(2, \"What kind of a relation do you want to visualize?\", [\"One part in a whole\", \"All parts in a whole\", \"Parts in multiple wholes\"], \"q2_1\");\n } else if (ans.includes(\"Trend Over Time\")) {\n addQuestion(2, \"What kind of a change do you want to visualize?\", [\n \"Change of a value\", \n \"Change of multiple values\", \n \"Change of total\", \n \"Before-After\", \n \"Discrete change\", \n \"Change of delta\", \n \"Change of scenarios\", \n \"Change of ranks\", \n \"Change of reference comparison\", \n \"Change of min-max\", \n \"Project steps layout\"\n ], \"q3_1\");\n} else if (ans.includes(\"Distribution Within Data\")) {\n addQuestion(2, \"How would you like to explore the distribution?\", [\"Each data point individually\", \"By summarizing the data\"], \"q4_1\");\n} else if (ans.includes(\"Relationship Between Variables\")) {\n addQuestion(2, \"What type of relationship would you like to explore?\", [\"Between parameters\", \"Changes in the relationship\", \"Flow-based relationship\"], \"q5_1\");\n} else if (ans.includes(\"Spatial Evaluation\")) {\n addQuestion(2, \"What kind of spatial evaluation would you like to display?\", [\"Value by location\", \"Location of data points\", \"Relationship between locations\"], \"q6_1\");\n} else if (ans.includes(\"Single Value Display\")) {\n showCharts(\"7\");\n }\n \n}\n\n\n function q1_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"1 Category\") {\n addQuestion(3, \"How many data series do you have?\", [\"Only one\", \"Two series\", \"More than two series\"], \"q1_1_1\");\n } else if (ans === \"2 Categories\") {\n addQuestion(3, \"What kind of comparison do you want?\", [\"Each data point with one another\", \"Within each category\", \"Totals\", \"Totals with each other\", \"Min-Max\"], \"q1_1_2\");\n } else if (ans === \"More than 2 categories\") {\n showCharts(\"1.3\");\n }\n }\n\n function q1_1_1(ans, btn) {\n selectBtn(btn);\n const map = {\n \"Only one\": \"1.1.1\",\n \"Two series\": \"1.1.2\",\n \"More than two series\": \"1.1.3\"\n };\n showCharts(map[ans]);\n }\n\n function q1_1_2(ans, btn) {\n selectBtn(btn);\n const map = {\n \"Each data point with one another\": \"1.2.1\",\n \"Within each category\": \"1.2.2\",\n \"Totals\": \"1.2.3\",\n \"Totals with each other\": \"1.2.4\",\n \"Min-Max\": \"1.2.5\"\n };\n showCharts(map[ans]);\n }\n\n function q2_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"One part in a whole\") {\n showCharts(\"2.1\");\n } else if (ans === \"All parts in a whole\") {\n addQuestion(3, \"How many breakdown levels do you have?\", [\"One level\", \"More than one\"], \"q2_2\");\n } else if (ans === \"Parts in multiple wholes\") {\n addQuestion(3, \"What do you want to visualize?\", [\"A single data point within multiple wholes\", \"All points within multiple wholes\"], \"q2_3\");\n }\n }\n\n\n function q2_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n if (ans === \"One level\") {\n addQuestion(4, \"How many data points do you have?\", [\"Less than 5\", \"More than 5\"], \"q2_2_1\");\n } else {\n showCharts(\"2.2.2\");\n }\n }\n\n function q2_2_1(ans, btn) {\n selectBtn(btn);\n const map = {\n \"Less than 5\": \"2.2.1.1\",\n \"More than 5\": \"2.2.1.2\"\n };\n showCharts(map[ans]);\n }\n\nfunction q2_3(ans, btn) {\n selectBtn(btn);\n const map = {\n \"A single data point within multiple wholes\": \"2.3.1\",\n \"All points within multiple wholes\": \"2.3.2\"\n };\n showCharts(map[ans]);\n}\n\nfunction q3_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n const map = {\n \"Change of a value\": \"3.1.1\", \n \"Change of multiple values\": \"3.1.2\", \n \"Change of total\": \"3.1.3\", \n \"Before-After\": \"3.1.4\", \n \"Discrete change\": \"3.1.5\", \n \"Change of delta\": \"3.1.6\", \n \"Change of scenarios\": \"3.1.7\", \n \"Change of ranks\": \"3.1.8\", \n \"Change of reference comparison\": \"3.1.9\", \n \"Change of min-max\": \"3.1.10\", \n \"Project steps layout\": \"3.1.11\"\n };\n showCharts(map[ans]);\n}\n\n function q4_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"Each data point individually\") {\n showCharts(\"4.1\");\n } else if (ans === \"By summarizing the data\") {\n addQuestion(3, \"What type of distribution would you like to explore?\", [\n \"A single distribution\",\n \"Multiple distributions compared\",\n \"Distribution with a breakdown\",\n \"Placement of quartiles\",\n \"Placement of deviation\"\n ], \"q4_2\");\n }\n }\n\nfunction q4_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n const map = {\n \"A single distribution\": \"4.2.1\", \n \"Multiple distributions compared\": \"4.2.2\", \n \"Distribution with a breakdown\": \"4.2.3\", \n \"Placement of quartiles\": \"4.2.4\", \n \"Placement of deviation\": \"4.2.5\"\n };\n showCharts(map[ans]);\n}\n\n function q5_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"Flow-based relationship\") {\n showCharts(\"5.1\");\n } else if (ans === \"Between parameters\") {\n addQuestion(3, \"How many parameters do you have?\", [\"Two parameters\", \"More than 2 parameters\"], \"q5_2\");\n } else if (ans === \"Changes in the relationship\") {\n showCharts(\"5.3\");\n }\n }\n\n function q5_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n const map = {\n \"Two parameters\": \"5.2.1\", \n \"More than 2 parameters\": \"5.2.2\"\n };\n showCharts(map[ans]);\n}\n\n function q6_1(ans, btn) {\n selectBtn(btn);\n clearBelow(3);\n if (ans === \"Value by location\") {\n addQuestion(3, \"Do you need to show exact locations?\", [\"Yes critical\", \"Just realistic enough\"], \"q6_2\");\n } else if (ans === \"Location of data points\") {\n showCharts(\"6.1.2\");\n } else if (ans === \"Relationship between locations\") {\n showCharts(\"6.1.3\");\n }\n }\n\n function q6_2(ans, btn) {\n selectBtn(btn);\n clearBelow(4);\n const map = {\n \"Yes critical\": \"6.2.1\", \n \"Just realistic enough\": \"6.2.2\"\n };\n showCharts(map[ans]);\n}\n function shuffleArray(arr) {\n return arr.sort(() => Math.random() - 0.5);\n}\n\nfunction generateSlider() {\n const track = document.getElementById(\"slider-track\");\n const names = Object.keys(chartDescriptions);\n const shuffled = shuffleArray(names).slice(0, 50); \/\/ \u0130lk 50 tanesini al\n const sliderContent = [];\n\n \/\/ 2 kez yinelenerek sonsuz scroll etkisi\n for (let i = 0; i < 2; i++) {\n shuffled.forEach(name => {\n const img = chartImages[name];\n sliderContent.push(`\n <div class=\"slider-item\">\n <img decoding=\"async\" src=\"${img}\" alt=\"${name}\">\n <div class=\"slider-caption\">${name}<\/div>\n <\/div>\n`);\n });\n }\n\n track.innerHTML = sliderContent.join('');\n}\n\nwindow.onload = function() {\n generateSlider();\naddQuestion(1, \"What type of information would you like to visualize?\", [\n \"\ud83d\udcca Value Comparison\",\n \"\ud83e\udde9 Part-to-Whole Relationship\",\n \"\ud83d\udcc8 Trend Over Time\",\n \"\u2728 Distribution Within Data\",\n \"\ud83d\udd17 Relationship Between Variables\",\n \"\ud83c\udf0d Spatial Evaluation\",\n \"\ud83d\udd22 Single Value Display\"\n ], \"q1\", false);\n};\n\/\/ renderQuestions();\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>creadata VizPicker powered by creadata VizPicker<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6473","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/6473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/comments?post=6473"}],"version-history":[{"count":17,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/6473\/revisions"}],"predecessor-version":[{"id":6603,"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/pages\/6473\/revisions\/6603"}],"wp:attachment":[{"href":"https:\/\/www.creadata.com.tr\/en\/wp-json\/wp\/v2\/media?parent=6473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}