Tell us what works and what could be better. We read every submission.
@adamverdin·6 public vizzes
This example shows the age distribution of a population as a donut chart, with each slice labeled by its age bracket and colored using an ordinal scale. The visualization is rendered as SVG using D3 v4, applying `d3.pie` to compute the arc angles and `d3.arc` to generate the paths and label positions. Data is loaded from a local CSV file with population counts per age group, and the chart centers itself in an 960×500 viewport. The code uses D3’s data join to append arc groups, paths, and text elements.
This example shows a bar chart of language frequencies, with bars colored blue by default and highlighted in green for French and Italian. The chart is rendered as SVG using D3 v4, with an x-axis for language names and a y-axis for frequency percentages. The code loads tab-separated data from `languages.tsv` using `d3.tsv`, scales the data with `d3.scaleBand` and `d3.scaleLinear`, and draws rectangles via `g.selectAll(".bar").enter().append("rect")`. Hovering a bar turns it dark red, as defined by the `.bar:hover` CSS rule.
This bar chart displays the relative frequency of five Romance languages—Spanish, Portuguese, French, Italian, and Romanian—using vertical bars. The visualization is built with D3 v4 and rendered as SVG, with data loaded from a tab-separated file. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are colored with `fill`, highlighting Italian and French in black, while others appear in a muted orange. Hovering changes the bar color via CSS.
This bar chart displays the relative frequencies of five Romance languages—Spanish, Portuguese, French, Italian, and Romanian—using a simple SVG bar layout. The chart highlights Italian with a distinct green fill, while all other bars remain blue, and hovering over any bar changes its color to dark red. The visualization is built with D3 v4, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data is loaded from a TSV file and parsed with a custom type conversion function that converts frequency values to numbers.
This bar chart displays the relative frequency of five spoken languages, with Italian highlighted in green. The visualization loads data from a tab-separated file using `d3.tsv` and renders it as SVG rectangles. It uses `d3.scaleBand` for the x-axis categories, `d3.scaleLinear` for the y-axis frequencies, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Hover effects change bar color, and the y-axis labels are formatted as percentages with ten ticks.
This example shows a simple bar chart comparing the frequency of five Romance languages, loaded from a tab-separated file. The chart uses an SVG rendering approach with d3.v4, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Bars are drawn as `rect` elements with hover effects, and axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the y-axis formatted as percentages. The code applies a custom data conversion function to parse frequencies as numbers before binding them to the visualization.