Tell us what works and what could be better. We read every submission.
@aiMojica10·14 public vizzes
A grouped bar chart compares five categories of support for Colombian political figures using data from a CSV file. The visualization uses D3 v3 with SVG rendering, grouping bars by candidate and coloring each support type via a categorical scale. Animated transitions initially drop bars from zero before settling into their final positions, and hover interactions temporarily highlight bars in yellow. The code demonstrates ordinal scales, nested data layouts, axis generation, and chained transition behavior, with a legend clarifying category colors.
The visualization plots Twitter accounts involved in the 2018 Colombian presidential election campaign for candidate G. Petro, using a force-directed layout where each node represents a Twitter account, colored by bot status. The scatterplot positions accounts by friends_count on one axis and followers_count on the other, while node size encodes follower counts. The dataset is read from a CSV containing 147 accounts, with bot-labeled accounts highlighted to reveal patterns in network influence and activity. Rendered in SVG with D3 v4, the chart allows viewers to compare the social media presence and bot prevalence among accounts supporting the candidate.
This scatter plot displays Iris flower measurements, mapping sepal length and width along the axes while encoding petal length through point size and species through color and symbol shape. The visualization includes an interactive legend where clicking a species name toggles the opacity of all points, dimming non-selected species to 0.1. Built with D3 v4, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbols`, and SVG `path` elements, with data loaded from a CSV file and tooltips styled via CSS.
This scatterplot visualizes campaign contributions by candidate, with each circle representing a donation and its position determined by the day the contribution was created (x-axis) and its dollar value (y-axis). A Voronoi grid overlays the plot to enlarge the interactive hover area around each point, making tooltips easier to trigger. The visualization includes a legend where clicking on a candidate filters the data, and it uses an ordinal color scale to distinguish between Deposit and Receive categories. The chart is built with D3 v3 and rendered as SVG with animated transitions.
This interactive scatterplot uses an invisible D3 Voronoi grid overlaid on the circles to make tooltips easier to trigger. While the tooltips are attached to the circles themselves, the grid determines which circle is active based on the mouse position, improving the interactive experience. The visualization displays customer transactions by type on a log-scaled x-axis (creation date) and linear y-axis (transaction value), with circles colored by transaction type. Clicking a legend item filters the data to show only that transaction type. Hovering over any point triggers a popover with details. Built with D3 v3 and rendered as SVG with animation, the chart is based on a fork of a life expectancy vs. GDP per capita block by nbremer and MattDionis.
This visualization displays the number of followers for seven Colombian political parties over time, using a responsive multiline chart built with D3 v3. The chart is constructed from CSV data and renders as an SVG with animation. Users can click legend items to toggle series visibility, and the chart includes a tooltip for detailed inspection. The implementation follows a reusable modular design based on Mike Bostock's concept, with customizable options for size, margins, colors, and axis labels, and it adjusts responsively to screen size.
This interactive chart combines violin plots with box plots to visualize the distribution of a numeric value across multiple year categories from a CSV dataset. The SVG-based visualization, built with D3 v3, uses kernel density estimation for accurate violin shapes and supports responsive resizing. It features modular chart types including box, notched box, violin, beeswarm, bean, and trendline variants, with extensive customization options for components like median lines, outliers, and violin resolution. The animation highlights transitions between chart types and style options, while CSS styling allows easy theme adjustments.
This visualization displays the Environmental Performance Index (EPI) for a selected country, using a bar chart to compare 20 environmental indicators such as child mortality, air quality, and access to sanitation. Each bar represents a categorical attribute with its corresponding value, colored in green and blue tones. The chart includes a dropdown menu to switch between countries—Switzerland and Luxembourg are available—and employs animated transitions when changing selections. A tooltip shows the exact value for each indicator on hover, helping users identify outliers and compare dependencies across attributes. The visualization is built with D3 v3 and rendered as SVG.
This visualization compares environmental performance indicators for Luxembourg and Switzerland using horizontal bars. The chart displays 20 environmental metrics—such as child mortality, air quality, sanitation access, and forest cover change—with each country’s score represented as a horizontal bar. The bars are aligned vertically by metric, making it easy to compare values across the two countries, while the length of each bar encodes the quantitative score. Tooltips provide exact values on hover, and the visualization uses animated transitions to enhance the comparison. The view is framed by axes for the categorical feature names and the quantitative scores, with a legend distinguishing the two countries. The data come from the Environmental Performance Index and are rendered with D3 v3 using SVG.
This block visualizes environmental performance indicators for Switzerland, drawing from the EPI dataset. It displays 33 indicator values from a CSV file, with each metric (e.g., EPI Score, Air Quality, Forest Cover) represented as a horizontal bar. The chart uses D3 v4 to render SVG bars, with values encoded by bar length. Notably, "NA" values are filtered or shown as missing, and the data is sourced from a gist, forked from LauraCortes’s earlier indicator visualizations.
This visualization presents the Environmental Performance Index (EPI) for 2014, ranking countries by overall score and displaying a wide array of health and ecosystem indicators. The SVG chart uses D3 v4 to render the data from Libro-2014.csv, with each row showing a country’s rank, EPI score, 10-year change, and dozens of sub-indicators across environmental health, air quality, water, agriculture, forests, fisheries, biodiversity, and climate. The data is plotted as horizontal rows, likely as a grid or heatmap-style layout, where color intensity or position encodes each metric. The visualization enables comparison of country performance across the many indicator categories, highlighting top performers such as Switzerland and Luxembourg while revealing gaps in specific environmental dimensions.
The chart displays student grades as vertical bars, with student codes on the x-axis and grade values on the y-axis. Each bar’s height encodes the grade, and hovering over a bar triggers a tooltip showing the exact grade value. The visualization uses d3.v3 with SVG rendering, leveraging `d3.scale.ordinal` and `d3.scale.linear` for axes, and the d3-tip library for interactive tooltips. Data comes from an inline array of student codes and grades, with axes rotated for readability.
A bar chart displays exam grades for a list of student codes, with each bar’s height representing the grade and the horizontal axis showing the code. Hovering over a bar reveals the exact grade via a tooltip. Built with D3 v3, it uses ordinal and linear scales, SVG axes, and the d3-tip library for interactive tooltips.
This visualization displays student grades as individual data points plotted along a single quantitative axis. The scatterplot uses a linear x-scale with an oriented bottom axis, though the y-axis remains unused. The code loads grade data from an embedded array of objects and renders dots with stroke outlines. It relies on D3 v4 for the main visualization, while also loading D3 v3 for the axis and scale APIs, mixing both versions. The SVG rendering includes margin-based positioning and a placeholder text element, but no interactive features or additional encodings are implemented.