Skip to main content
100%

Partidos followers

✓ Published0🌍 Public
AaiMojica10
Last edited Apr 28, 2018
Created on Apr 28, 2018

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.

AI-generated description

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Features:

  • Reusable modular design
  • Responsive design, chart size adjusts with screen size
  • Customizable options
    • Chart Size
    • Margins
    • Div Selector
    • Chart Colors
    • Axis labels
  • Toggleable series (click on the legend to toggle series)

Previous version: Reusable Responsive Multiline Chart

forked from <a href='http://bl.ocks.org/asielen/'>asielen</a>'s block: <a href='http://bl.ocks.org/asielen/50a527004cb79facf219'>Reusable Line Chart v2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Grouped BarChart

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.

AaiMojica10
72% match
Loading thumbnail…

Conditional Styling

This small-multiple line chart shows population changes for 16 Colombian cities between 1985 and 2020. Each city is rendered as a separate small chart using D3 v3 with SVG. The distinctive feature is the conditional styling: lines are colored based on their 2020 population value, with a sequential color scale mapping from light to dark. As the year progresses from 1985 to 2020, each line's color intensity reflects the magnitude of the final population, creating an immediate visual ranking. The use of a discrete color legend and consistent axes across panels makes it easy to compare trajectories and identify the largest cities, such as Bogotá, while preserving the temporal pattern of each city’s growth.

AAndresClavijo
69% match
Loading thumbnail…

Ejercicio 6

This example displays a bar chart of Spanish parliamentary seat counts from the June GAD3 barometer, comparing four parties. It shows both an SVG version with styled rectangles and text labels, and an HTML/CSS version using divs with background colors and widths. The code loads CSV data with d3.csv, binds it to existing SVG elements, and uses D3 v5 methods like `.attr()` and `.text()` to set bar dimensions, colors, and party names. The visible source data includes party names, seat counts, and color codes.

JJuanma-GP
68% match
Loading thumbnail…

Ejercicio6

This example visualizes a horizontal bar chart of Spanish parliamentary seat counts from the June GAD3 barometer, using a small CSV dataset with party names, seat numbers, and colors. It shows relative seat distributions across four political parties, with party labels overlaid on the bars. The visualization is built with D3 v5, using `d3.csv` to load the data and SVG `rect` elements for bars and `text` elements for labels, with bar widths scaled proportionally to seat counts and colors mapped from the dataset.

JJuanma-GP
67% match
Loading thumbnail…

Ejercicio6

This example visualizes a horizontal bar chart of Spanish parliamentary seat counts from the June GAD3 barometer, using a small CSV dataset with party names, seat numbers, and colors. It shows relative seat distributions across four political parties, with party labels overlaid on the bars. The visualization is built with D3 v5, using `d3.csv` to load the data and SVG `rect` elements for bars and `text` elements for labels, with bar widths scaled proportionally to seat counts and colors mapped from the dataset.

JJuanma-GP
67% match
Loading thumbnail…

el ejemplo que hicimos hoy durante la clase

A horizontal bar chart displays Twitter follower counts for three Argentine political candidates, with candidate names as text labels and steel-blue rounded rectangles representing follower magnitudes. The chart uses D3 v4 with an SVG rendering approach, mapping follower counts through a linear scale to bar widths, and includes tooltips showing exact follower numbers via the `title` element. Data is hardcoded as a JavaScript array with candidate names and follower counts, and the visualization is generated using D3 selections with data joins.

Aaaizemberg
67% match
Loading thumbnail…

Visualización de Datos

A horizontal bar chart presents June polling data from the Spanish barometer, showing vote shares for four political parties as colored bars of varying widths labeled with party names. The visualization uses plain HTML `div` elements with inline CSS `width` properties and background colors to encode the values, while an `h1` heading identifies the dataset. The code loads D3 v4 from a CDN but does not employ any D3-specific data binding or scale functions, instead relying entirely on static markup and styling within a flex-like layout. The source is embedded directly in the page structure.

JJuanma-GP
66% match
Loading thumbnail…

D3 DataBinding

This example demonstrates a basic scatterplot-style bar chart created with D3 v5, showing census data for Colombian municipalities loaded from a JSON file hosted on GitHub. The chart uses a linear scale (`d3.scaleLinear`) to map census values to horizontal bar widths, with rectangles appended to an SVG element via D3’s data join (`selectAll`, `.data`, `.enter`). Bars are sorted in descending order using `d3.descending` and rendered with a fixed height, while the dataset is fetched asynchronously with `d3.json`. The visualization emphasizes D3’s core data-binding pattern for simple, static SVG rendering.

663anp3ca
64% match