Skip to main content
SimilarExport ZIP
100%

Conditional Styling

✓ Published0🌍 Public
LLTymn
Last edited May 7, 2015
Created on May 7, 2015

This example visualizes UK homicide and attempted murder statistics from 2002 to 2011 as two filled area charts. The visualization uses conditional styling to highlight the homicide series in red with higher opacity, while attempted murders appear gray and faint. Built with d3.v3 and SVG, it employs d3.svg.area and d3.time.scale for the x-axis, with data loaded from a CSV file. Hovering over any circle or path changes its fill to orange, and the axis labels are rendered using d3.svg.axis.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

This visualization plots U.S. state-level crime statistics, showing violent crime totals against homicide cases for each state, with bubble size encoding population and color assigned by state name. The chart uses d3.v4 with d3-scale-chromatic for color mapping and includes an interactive tooltip that displays the state name on hover, while also fading out non-hovered bubbles. Data comes from the estimated_crimes.csv file, rendered as SVG circles with axes and labels generated using d3.axisBottom and d3.axisLeft.

Ssruthisenapathi
73% match
Loading thumbnail…

Scatterplot of Intentional Homicides

This scatterplot visualizes intentional homicide counts for various countries over time, with each circle’s vertical position representing the number of homicides and the horizontal position denoting the year. Built with d3.v6, the code uses `d3.csv` to load data from a GitHub Gist, `scaleLinear` and `extent` to map values, and `axisLeft` alongside `axisBottom` to render the axes. The SVG circles are placed using `attr` for the `cx` and `cy` coordinates, drawing directly from the UN Intentional Homicide dataset.

LLilly-beth Linnell
72% match
Loading thumbnail…

Legend

This interactive visualization explores death statistics by cause and demographic categories, displaying stacked area charts of suicide, firearm, and alcohol-related deaths over time. The interface includes dropdown menus for filtering by sex, ethnicity, age group, and specific death types, with a color legend that supports hovering to highlight or fade individual categories. Built with React and D3 v5, it uses d3.area, d3.curveNatural, and d3.scaleOrdinal to render SVG paths and pie charts. Data comes from a Gist CSV file, though several filtering options remain non-functional in the current version.

SSoorena
72% match
Loading thumbnail…

Added Interaction in Scatterplot of Intentional Homicides

This scatterplot displays UN intentional homicide data, plotting homicide values against year for each country. A Voronoi overlay, created with d3.Delaunay, enables interactive tooltips that reveal the country name when hovering over a data point. The visualization uses D3 v6 to render SVG circles and axes, with the Voronoi cells ensuring precise hover detection even for overlapping points.

LLilly-beth Linnell
71% match
Loading thumbnail…

Iteration of Scatterplot of Intentional Homicides

This scatterplot visualizes UN intentional homicide data, plotting each country’s yearly homicide count as a dot. The chart uses d3.scaleLinear for both the year and homicide-value axes, with circles colored by country. It attempts to label every point with its country name using SVG text elements, though the labels overlap. The code loads data via d3.csv, renders SVG circles and text, and includes axis labels for year and homicide count. All plotting is performed with D3 v6’s selection, scale, and axis APIs.

LLilly-beth Linnell
71% match
Loading thumbnail…

Fork of Fork of Area Death's

This visualization shows the crime index across different countries, with the x-axis displaying countries as time-scaled values and the y-axis representing the crime index. The chart uses a filled orange area path rendered with d3.area and a basis curve, while axes are created using d3.axisBottom and d3.axisLeft. Data is loaded as CSV from a GitHub gist, with country values parsed as dates and crime index as numbers. The SVG rendering includes a red title and purple axis labels, with d3.scaleTime and d3.scaleLinear mapping the data ranges.

NNikitha123171
71% match
Loading thumbnail…

Intersections

This visualization displays the relationship between U.S. state statistics—including median income, alcohol consumption, and murder rate—using a dynamic scatter plot. The plot transitions between categorical bar charts for states and quantitative scatter plots, with animated circles for numeric comparisons. D3's scaleLinear, scaleBand, axisBottom, and axisLeft APIs handle the chart construction, while the `menu` component and `dispatch` enable interactive axis selection. The code uses `transition` for smooth animations and `selection.join` for efficient SVG element updates. The data comes from a CSV file combining income, alcohol, and murder statistics per state.

Aadventuresenglish.info@gmail.com
71% match
Loading thumbnail…

Fork of Area Death's

This example shows the crime index across different countries over time, with the data plotted as a smooth, orange area chart. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to create the filled curve. It is rendered as an SVG inside an HTML page, and the data is loaded from a CSV hosted on GitHub, with axis labels and a title styled via CSS.

NNikitha123171
70% match